¿Qué significan todos estos formatos de color?

Un color en una pantalla es una mezcla de luz roja, verde y azul, y cada formato representa esa mezcla a su manera. CSS y las herramientas de diseño usan códigos HEX y valores RGB. HSL, HSV y HWB describen un color según su tono —el ángulo en la rueda de color— y su intensidad y luminosidad, lo que facilita ajustarlo manualmente. CMYK indica las cantidades de tinta cian, magenta, amarilla y negra para impresión. LAB, LCH, OKLab y OKLCH están diseñados para que los incrementos iguales en sus valores se perciban aproximadamente iguales a la vista, lo que ayuda a crear paletas y degradados; CSS moderno es compatible con los cuatro. Los terminales usan códigos de color ANSI, y CSS también incluye colores con nombre, como tomato.

Este es el mismo naranja en cada formato:

Formato Ejemplo Qué representan los valores
HEX #ff6600 Rojo, verde y azul con dos dígitos hexadecimales cada uno
RGB rgb(255, 102, 0) Rojo, verde y azul, de 0 a 255
HSL hsl(24, 100%, 50%) Tono, saturación y luminosidad
HSV hsv(24, 100%, 100%) Tono, saturación y valor; también se denomina HSB
HWB hwb(24 0% 0%) Tono, blancura y negrura
CMYK cmyk(0%, 60%, 100%, 0%) Tinta cian, magenta, amarilla y negra
LAB lab(62.31, 55, 71.33) Luminosidad CIE, de verde a rojo y de azul a amarillo
LCH lch(62.31, 90.07, 52.36) Luminosidad CIE, croma y tono
OKLab oklab(69.58% 0.1482 0.1406) Luminosidad y dos ejes de color, como en LAB
OKLCH oklch(69.58% 0.2043 43.49) Luminosidad, croma y tono en OKLab
XYZ xyz(46, 30.77, 3.52) El espacio de color CIE XYZ en el que se basa LAB
HCG hcg(24, 100%, 0%) Tono, croma y nivel de gris
Nombre del color orangered El color con nombre de CSS más parecido
ANSI 16 91 Código de terminal de uno de los 16 colores básicos
ANSI 256 208 Código de terminal de uno de los 256 colores
RGB de AppleScript {65535, 26214, 0} Rojo, verde y azul, de 0 a 65535, según la representación de AppleScript
Escala de grises gray(46.7%) Brillo, de 0% a 100%

Descripción de la herramienta

Esta herramienta convierte colores entre estos 17 formatos y muestra una muestra de color debajo del resultado. Todos los convertidores de color de aquí funcionan de la misma manera, desde el Convertidor de colores general hasta los de un solo par, como HEX a RGB, RGB a CMYK o HEX a nombre del color: empiezan con los formatos indicados en su nombre, y los menús Fuente y Destino permiten elegir cualquier otro. Pega un color y el resultado aparecerá mientras escribes, listo para copiar. Si eliges Detección automática como fuente —la opción inicial del Convertidor de colores—, la herramienta deduce el formato a partir de cómo está escrito el color. El botón de intercambio invierte la conversión.

Ejemplos

Entrada Destino Resultado
#ff6600 RGB rgb(255, 102, 0)
rgb(37, 99, 235) HEX #2563eb
#2563eb HSL hsl(221.2, 83.2%, 53.3%)
rgb(37, 99, 235) CMYK cmyk(84.3%, 57.9%, 0%, 7.8%)
#2563eb HSV hsv(221.2, 84.3%, 92.2%)
#2563eb OKLCH oklch(54.61% 0.2152 262.88)
rgb(37, 99, 235) LAB lab(46.06, 30.96, -73.83)
#ff6347 Nombre del color tomato
rebeccapurple HEX #663399
rgba(37, 99, 235, 0.5) HEX #2563eb80

Qué puedes pegar

  • Códigos HEX de 3, 4, 6 u 8 dígitos, con o sin #. Un cuarto dígito o el último par establece la opacidad.
  • Funciones como rgb(), hsl() u oklch(), con comas o espacios entre los valores y una opacidad opcional como cuarto valor o después de una barra: rgba(37, 99, 235, 0.5) o rgb(37 99 235 / 50%).
  • Porcentajes para rojo, verde y azul, como en rgb(100%, 40%, 0%), y tonos en deg, rad, grad o turn, como en hsl(0.5turn, 100%, 50%).
  • Números sin el nombre de una función, como 255, 102, 0. La detección automática interpreta tres números como RGB, o como HSL si los dos últimos son porcentajes, y cuatro como CMYK, a menos que parezcan valores RGB con una opacidad.
  • Nombres de colores en cualquier combinación de mayúsculas y minúsculas, con espacios o sin ellos: Rebecca Purple funciona.
  • Valores HSB escritos como hsb() y colores de AppleScript entre llaves, como {65535, 26214, 0}.

Cómo funciona

Los cálculos se realizan con color-convert, una biblioteca de JavaScript para convertir colores.

  • La opacidad se conserva en HEX, RGB, HSL, HWB, OKLab y OKLCH, que pueden representarla. Los demás formatos la omiten.
  • LAB, LCH y XYZ son valores CIE con el punto blanco D65. CSS lab() y lch() usan el punto blanco D50, por lo que sus valores varían ligeramente.
  • LAB, LCH, OKLab y OKLCH pueden describir colores que las pantallas no pueden mostrar. Al convertirlos a HEX, RGB u otro formato de pantalla, sus canales se limitan al rango de 0 a 255, por lo que oklch(70% 0.3 145) se convierte en #00c800.
  • El resultado de nombre del color es el más parecido entre los colores con nombre de CSS, así que solo es exacto para los colores que tienen nombre: #ff6600 da como resultado orangered, que es #ff4500.
  • Los resultados ANSI 16 y ANSI 256 son aproximados, ya que esas paletas solo tienen 16 o 256 colores. Los resultados ANSI 16 son códigos de primer plano, del 30 al 37 y del 90 al 97; los códigos de fondo, del 40 al 47 y del 100 al 107, se interpretan como los mismos colores.
  • CMYK se calcula con la fórmula básica, sin un perfil de color de impresora, por lo que los valores CMYK de una imprenta para el mismo color pueden variar.
  • La escala de grises es el promedio de los valores rojo, verde y azul.

Consejos

  • Los resultados HEX, RGB, HSL, HWB, OKLab, OKLCH y de nombre del color son CSS válido, así que puedes pegarlos tal cual en una hoja de estilos.
  • La detección automática interpreta un número de tres dígitos, como 208, como un código HEX corto. Para los códigos de terminal, selecciona ANSI 256 o ANSI 16 como fuente.
  • HSV y HSB son dos nombres para el mismo modelo.