Convertidor de color

Qué hace este convertidor de color

Este convertidor de color traduce cualquier valor entre los cuatro formatos más usados en diseño y desarrollo: HEX, RGB, HSL y CMYK. Puedes pegar un código hexadecimal como #1e90ff, escribir rgb(30,144,255) o usar el selector de color nativo del navegador — el resultado aparece en todos los formatos simultáneamente. Esta versión en español incluye una explicación honesta sobre CMYK: en pantalla el valor es una aproximación útil, pero la conversión real para imprenta requiere un perfil ICC y depende del papel y la tinta. Si trabajas con paletas de CSS y necesitas también manipular cadenas codificadas, el [codificador y decodificador URL](/es/url-encoder/) puede complementar tu flujo. 100% en el navegador — tus datos nunca salen de tu equipo. Sin subidas, sin tracking, sin logs en servidor.

Características

• Conversión HEX ↔ RGB en tiempo real. Pega cualquier hex code — con o sin #, en tres o seis dígitos — y obtén el equivalente rgb() al instante. Cubre los casos «hex into rgb» y «convert hex rgb» más buscados.
• Soporte completo de HSL. El modelo HSL expresa el tono en grados (0–360) y la saturación/luminosidad en porcentaje. La herramienta distingue estos rangos para que no confundas unidades al copiar valores a tu CSS.
• CMYK aproximado con advertencia clara. La conversión RGB → CMYK en pantalla es matemática, no perceptual. El convertidor lo indica explícitamente: para trabajo de impresión profesional se requiere un perfil ICC calibrado según el medio.
• Selector de color nativo. Usa el color picker del propio navegador para elegir un tono visualmente y ver de inmediato su representación en todos los formatos, sin instalar ninguna extensión.
• Vista previa con swatch en vivo. Un recuadro de color se actualiza en tiempo real mientras escribes, para confirmar visualmente que el valor ingresado es el que buscas antes de copiarlo.
• Cero dependencias externas. La lógica de conversión es matemática pura, sin librerías de color de terceros. Menos código significa menos superficie de error y carga más rápida.

Cómo usar el convertidor de color

Escribe o pega un valor de color en el campo de entrada y los demás formatos se calculan solos. También puedes usar el selector visual.

1. Ingresa el color. Escribe un valor en cualquier formato soportado: #1e90ff, rgb(30, 144, 255) o hsl(210, 100%, 56%). El campo acepta variantes CSS estándar.
2. O usa el selector de color. Haz clic en el botón «Selector de color» para abrir la paleta nativa del navegador y elegir un tono de forma visual.
3. Revisa la vista previa. El swatch muestra el color resultante en tiempo real para que verifiques que corresponde al tono esperado antes de usar el valor.
4. Copia el formato que necesitas. Haz clic en «Copiar» junto al formato deseado — HEX, RGB, HSL o CMYK — y el valor queda en tu portapapeles listo para pegarlo en tu editor.

Casos de uso comunes

• Diseñadores que preparan archivos para imprenta. Un equipo en Sevilla puede tomar los colores de marca definidos en HEX para pantalla y obtener el equivalente CMYK orientativo antes de enviarlo al estudio de impresión, que ajustará con su perfil ICC.
• Desarrolladores ajustando accesibilidad en CSS. HSL facilita modificar luminosidad y saturación manteniendo el mismo tono. Convierte el HEX base a HSL, ajusta lightness para cumplir contraste WCAG y vuelve a HEX para el stylesheet.
• Traducción de paletas entre equipos. Un diseñador en Ciudad de México entrega un archivo con valores rgb() y el desarrollador necesita los hex codes equivalentes para las variables CSS del sistema de diseño. La conversión tarda segundos.
• Inspección rápida de capturas de pantalla. Usa un cuentagotas externo para extraer el valor RGB de cualquier píxel en una imagen y pégalo aquí para obtener el HEX o HSL correspondiente.
• Generación de variables CSS desde paletas. Al construir un design token, convierte cada color de la paleta al formato que require tu stack — por ejemplo HEX para Tailwind o HSL para variables CSS custom — y cópialo directamente. Si también manejas identificadores únicos por token, el [generador UUID](/es/uuid-generator/) puede ayudarte a nombrarlos.

Preguntas frecuentes