Cuatro campos sincronizados, un mismo color: escribe un código HEX, un valor rgb(), uno hsl() o porcentajes CMYK y los otros tres se actualizan al momento. El panel adopta un tinte sutil del color elegido para que siempre lo veas en contexto, y la muestra indica su ratio de contraste WCAG frente a texto negro o blanco. Bajo los campos encontrarás una escala de tonos y matices y las armonías complementaria, tríada y análoga: pulsa cualquier muestra para adoptarla como nuevo color base.
Cómo convertir un color
- 1 Escribe un valor en cualquier campo —HEX, RGB, HSL o CMYK— o abre el selector desde la muestra.
- 2 El resto de formatos se actualiza al instante, normalizado a la notación CSS estándar.
- 3 Explora variaciones con la escala de tonos y las armonías; pulsa una muestra para adoptarla.
- 4 Copia la notación que necesites con el botón junto a cada campo.
Qué calculan realmente las conversiones
HEX y RGB describen lo mismo con notación distinta: tres valores de canal de 0 a 255, escritos como números decimales o como parejas de dígitos hexadecimales. Convertir entre ellos es puro formateo. El analizador acepta las cuatro formas HEX habituales —#rgb, #rgba, #rrggbb y #rrggbbaa— y expande las formas cortas duplicando cada dígito, así que #f0c pasa a ser #ff00cc.
HSL sí es una transformación de verdad y no una renotación. Vuelve a describir el mismo color como tono (un ángulo de 0 a 360 en la rueda cromática), saturación y luminosidad. Por eso los diseñadores recurren a él: para aclarar un color cambias un solo número, mientras que en RGB tienes que mover los tres de una manera que es fácil equivocar. CMYK es un modelo sustractivo para impresión, y la conversión de aquí es la aritmética estándar: suficiente para comunicar un color, pero sin gestión de color. El trabajo de imprenta de verdad necesita un perfil ICC para esa máquina y ese papel concretos, y los valores que te dé el impresor serán distintos.
La comprobación de contraste aplica la fórmula de luminancia relativa de las WCAG, que pondera los tres canales de forma distinta porque la visión humana es mucho más sensible al verde que al azul. Por eso un azul medio y un verde medio con el mismo «brillo» RGB tienen un contraste muy distinto sobre blanco, y por eso juzgar el contraste a ojo no es fiable.
Dónde hace falta cada formato
Entregar colores a desarrollo
Los diseñadores trabajan en HSL; CSS admite ambos. Convertir una paleta a valores HEX o RGB da a desarrollo algo que pueden pegar directamente en una hoja de estilos o en un archivo de tokens de diseño.
Construir tintes y sombras
Una paleta coherente sale de variar la luminosidad sobre un tono fijo, no de elegir colores parecidos a ojo. Generar tintes y sombras desde una base te da las variantes de hover, deshabilitado y borde que de verdad pertenecen al mismo conjunto.
Comprobar accesibilidad
Las WCAG exigen una relación de contraste mínima de 4,5:1 para texto de cuerpo y 3:1 para texto grande. Comprobarlo antes de comprometerte con una paleta sale mucho más barato que rehacerla tras una auditoría de accesibilidad.
Preparar arte final para imprenta
Un logotipo definido en RGB tiene que pasar a CMYK para imprimirse. La conversión de aquí te da los valores de partida para hablar con el impresor, que los ajustará a su máquina.
Por qué diseñadores y desarrolladores necesitan convertir colores
Cada parte del flujo de trabajo habla un idioma de color distinto: las herramientas de diseño entregan HEX, las variables CSS y el canvas prefieren RGB, ajustar luminosidad y temas es mucho más fácil en HSL, y todo lo que va a imprenta necesita CMYK. Convertir a mano da errores, y la mayoría de selectores online son páginas pesadas llenas de rastreadores. Este son unos pocos kilobytes de matemática pura —incluido el canal alfa de #rrggbbaa y de rgba()/hsla()— ejecutándose localmente, así que es instantáneo y funciona sin conexión.
Dónde los números dejan de ser exactos
El color es más complicado que la aritmética, y dos de estos formatos esconden salvedades reales:
- La conversión a CMYK no tiene gestión de color. Usa la fórmula estándar sin perfil ICC, así que no puede tener en cuenta las tintas, la máquina ni el papel concretos. Trata la salida como una aproximación y confírmala con tu impresor.
- Muchos colores RGB vivos no se pueden imprimir en absoluto. Los verdes y cianes brillantes de pantalla caen fuera de la gama CMYK, y la conversión te dará en silencio el color imprimible más cercano en vez de avisarte.
- La luminosidad de HSL no es perceptual. Dos colores con el mismo valor de L pueden verse notablemente distintos de brillo: un amarillo al 50% se lee mucho más brillante que un azul al 50%. Los espacios perceptualmente uniformes como OKLCH resuelven esto; HSL no.
- El redondeo se acumula. Convertir de RGB a HSL y volver puede desplazar un canal en una unidad, así que mantén un formato como fuente de verdad en lugar de convertir una y otra vez.
- Las relaciones de contraste son un umbral, no una garantía. Pasar el 4,5:1 no hace cómodo de leer un texto gris claro y fino sobre blanco.
Resolución de problemas
- Mis valores CMYK se ven mal comparados con la prueba de imprenta
- Es lo esperable sin gestión de color. La fórmula estándar no sabe nada de tu máquina, tu juego de tintas ni tu papel, y los tres desplazan el resultado. Usa estos valores como punto de partida y deja que el impresor te dé los corregidos, sobre todo con colores corporativos donde la precisión importa.
- La misma luminosidad HSL da brillos visiblemente distintos
- Eso es HSL funcionando según su diseño, no un fallo. La luminosidad en HSL es un punto medio matemático, no perceptual, y el ojo es mucho más sensible a unos tonos que a otros. Si necesitas muestras que se vean igual de brillantes, ajústalas a ojo o usa un modelo perceptual.
- Mi color no pasa la comprobación de contraste pero se ve bien
- Verse bien en un buen monitor y con buena luz no es la prueba. Los umbrales WCAG contemplan pantallas antiguas, reflejos y lectores con sensibilidad al contraste reducida. Oscurecer el texto unos pasos suele arreglarlo sin cambio visible en el diseño.
Preguntas frecuentes
¿Qué formatos puedo pegar?
HEX de tres, cuatro, seis y ocho dígitos (con o sin #), rgb() y rgba(), hsl() y hsla(), además de porcentajes CMYK. El alfa se conserva siempre que el formato de destino lo admita.
¿La conversión a CMYK es fiel a la imprenta?
Usa la fórmula estándar independiente del dispositivo, que es la que muestran las herramientas de diseño en pantalla. El resultado exacto en máquina depende del perfil ICC de tu papel y tinta, así que confirma siempre con una prueba para trabajos profesionales.
¿Qué es el ratio que aparece en la muestra?
El ratio de contraste WCAG entre el color y el más legible de los textos negro o blanco. Busca al menos 4.5:1 para texto normal y 3:1 para texto grande.
¿Qué relación de contraste necesito realmente?
WCAG AA exige 4,5:1 para el texto de cuerpo normal y 3:1 para texto grande: 18 puntos, o 14 en negrita en adelante. El nivel AA para componentes de interfaz y objetos gráficos también es 3:1. AAA sube el texto de cuerpo a 7:1, que merece la pena buscar en lecturas largas pero no es el estándar legal habitual.
¿Cuándo debo usar HSL en lugar de HEX?
Usa HSL siempre que estés creando variaciones de un color en vez de especificar uno. Construir un estado hover, un estado deshabilitado o una serie de tintes consiste en ajustar la luminosidad unos puntos: trivial de leer en HSL y opaco en HEX, donde la relación entre #4a7c59 y #3d6749 es invisible.
¿Por qué no puedo igualar exactamente en imprenta el color de mi pantalla?
Las pantallas emiten luz y las impresoras la reflejan, así que reproducen rangos de color fundamentalmente distintos. Los colores de pantalla más saturados no tienen equivalente imprimible, y por eso los manuales de marca suelen especificar valores RGB y CMYK por separado en lugar de uno convertido del otro.
¿Sobrevive el canal alfa a la conversión?
Entre HEX, RGB y HSL, sí: los tres tienen notaciones que llevan alfa. CMYK no tiene ningún concepto de transparencia, así que allí el alfa se descarta; si tu arte final depende de la transparencia, eso hay que resolverlo en la maquetación y no en el valor de color.