Conversor de colores

Cómo usar el conversor de colores

1. 1. Introduce un color. Pégalo o escríbelo en cualquier notación que acepte el cuadro: #336699, rgb(51 102 153), hsl(210 50% 40%), hwb(210 20% 40%), cmyk(67%, 33%, 0%, 40%) o un nombre CSS como rebeccapurple. Un simple 51 102 153 se lee como RGB.
2. 2. O usa el selector. El selector fija el color y conserva la transparencia que ya hayas escrito.
3. 3. Copia lo que necesites. Cada notación tiene su propio botón de copiar, y Copiar CSS te da los valores HEX, RGB, HSL y OKLCH como propiedades personalizadas para una hoja de estilos.
4. 4. Comprueba el nombre. La herramienta muestra la palabra clave CSS cuando tu color es exactamente una (rebeccapurple es #663399) y la palabra clave más cercana cuando no lo es.

Cómo funcionan las conversiones

Todo se convierte a través de sRGB, el espacio de color en el que pinta un navegador. Un código HEX es solo RGB en base 16: #336699 es rojo 0x33 = 51, verde 0x66 = 102 y azul 0x99 = 153. Las demás notaciones reordenan esos mismos tres números.

• HSL describe un color mediante su tono (un ángulo en la rueda de color, de 0 a 360°), su saturación y su luminosidad. Con max, el canal mayor, y min, el menor (divididos ambos entre 255), la luminosidad es (max + min) ÷ 2 y la saturación es (max − min) ÷ (1 − |2L − 1|). El tono sale de qué canal es el mayor.
• HSV (también llamado HSB) conserva el mismo tono, pero mide el valor como max y la saturación como (max − min) ÷ max. Es el modelo que dibujan la mayoría de los selectores de color.
• HWB es blancura (min) y negrura (1 − max) sobre un tono puro; es más fácil de razonar que HSL cuando quieres un tinte o una sombra. Si blancura y negrura suman 100 %, el resultado es un gris.
• CMYK se muestra como la conversión simple de dispositivo: K = 1 − max, y luego cada uno de C, M e Y es (1 − canal − K) ÷ (1 − K). No interviene ninguna tinta, papel ni perfil.
• OKLCH es luminosidad, croma y tono en el espacio OKLab de Björn Ottosson, que CSS Color 4 admite como oklch(). Los pasos iguales en L se perciben mucho más iguales en brillo que en RGB o HSL.

Por qué el CMYK aquí no es un color de impresión

Las pantallas suman luz en rojo, verde y azul; las impresoras depositan tinta cian, magenta, amarilla y negra sobre el papel. Las dos gamas de color difieren, y la tinta que queda en la página depende del papel, de la prensa y del perfil ICC que las describe. Una fórmula que trabaja solo desde RGB no puede saber nada de eso, así que el CMYK de arriba es una notación, no una predicción: el azul puro de pantalla #0000ff se convierte en 100 % de cian y 100 % de magenta, que se imprime como un violeta más apagado. Para un cartel o una figura impresa, entrega a tu imprenta el archivo en RGB y pídele su perfil, o convierte con ese perfil en una aplicación de diseño.

Redondeo, recorte y transparencia

• Redondeo. HEX y rgb() solo admiten números enteros de 0 a 255, así que un color escrito como hsl(210 50% 41%) se redondea al valor de 8 bits más cercano. Al volver a convertir ese valor, el HSL resultante es ligeramente distinto: la cuadrícula de 8 bits es más gruesa que la de HSL.
• Canales fuera de rango. Los valores fuera de rango se recortan, como hacen los navegadores: rgb(300 0 0) es #ff0000, y un canal negativo pasa a 0.
• Unidades de tono. Se aceptan deg, grad, rad y turn, y el tono es cíclico: −150° equivale a 210°.
• Alfa. #rrggbbaa, #rgba y / 50% funcionan. El alfa se guarda con 8 bits en el HEX de 8 dígitos, así que 50 % se convierte en 80 y al leerlo vuelve como 50,2 %.

Preguntas frecuentes

¿Cómo convierto HEX a RGB?

Divide los seis dígitos en tres pares y lee cada par como un número en base 16: #336699 son 33, 66 y 99, es decir, 51, 102 y 153. Pega el código HEX en el cuadro y el valor RGB aparece al instante, junto con HSL, HWB, HSV, CMYK y OKLCH.

¿Cuál es la diferencia entre HSL y HSV?

Ambos usan el mismo ángulo de tono. HSL pone el blanco en luminosidad máxima sea cual sea la saturación, así que su punto medio es el color puro; HSV pone el color puro en valor y saturación máximos, y el blanco en saturación cero. HSL es lo que CSS admite como hsl(), mientras que HSV (o HSB) es lo que muestran la mayoría de los selectores de color.

¿Es exacto el valor CMYK para imprimir?

No. Es la conversión ingenua desde RGB, sin tinta, papel ni perfil ICC, así que describe los mismos números de otra forma en lugar de predecir lo que imprimirá una prensa. Los colores fuera de la gama de la impresora, como los azules y verdes brillantes de pantalla, saldrán más apagados. Usa el perfil de tu imprenta para todo lo que importe.

¿Qué significa el nombre CSS más cercano?

CSS define 148 palabras clave de color. Si tu color es exactamente una de ellas, la herramienta la muestra sin más. Si no, muestra la palabra clave más cercana en OKLab, un espacio diseñado para que la distancia coincida con la diferencia percibida. Es útil para nombrar un color en un comentario, pero no sustituye al código.

¿Por qué cambia un poco mi valor HSL tras una ida y vuelta?

HEX y RGB guardan cada canal como uno de 256 valores, y HSL no se corresponde uno a uno con esa cuadrícula. Un color escrito en HSL se redondea al valor RGB más cercano, y el HSL que se muestra se calcula a partir del valor redondeado. Si partes de un código HEX, cada conversión es exacta con la precisión que se muestra.

¿Se envían mis datos de color a algún sitio?

No. La conversión es aritmética sencilla en tu navegador; nada de lo que escribes se sube ni se guarda.