¿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 por su tono, el ángulo en la rueda de colores, y por su viveza 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 incrementos iguales en sus valores se perciban como incrementos iguales a simple vista. Esto ayuda a crear paletas y degradados, y CSS moderno admite los cuatro formatos. Los terminales usan códigos de color ANSI, y CSS también tiene 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 conoce como 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, en un modelo más reciente que 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 1931 en el que se basa LAB
HCG hcg(24, 100%, 0%) Tono, croma y 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
AppleScript RGB {65535, 26214, 0} Rojo, verde y azul de 0 a 65535, tal como los representa AppleScript
Escala de grises gray(46.7%) Brillo de 0% a 100%

Descripción de la herramienta

Esta herramienta convierte un color entre estos 17 formatos y lo muestra en una muestra debajo del resultado. Todos los conversores de color de aquí funcionan igual, desde el Conversor de color general hasta los que convierten entre un solo par de formatos, como HEX a RGB, RGB a CMYK o HEX a nombre del color: comienza con los formatos indicados en su nombre, y los menús Origen y Destino permiten elegir cualquier otro. Pega un color y el resultado aparecerá mientras escribes, listo para copiar. Con Detección automática como origen, que es la opción inicial del Conversor de color, la herramienta identifica el formato según 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, salvo que parezcan valores RGB con una opacidad.
  • Nombres de colores en cualquier combinación de mayúsculas y minúsculas, con o sin espacios: Rebecca Purple funciona.
  • Valores HSB escritos como hsb() y colores 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 difieren un poco.
  • LAB, LCH, OKLab y OKLCH pueden describir colores que las pantallas no pueden mostrar. Al convertirlos a HEX, RGB u otro formato para 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 con nombre de color es el más parecido entre los colores con nombre de CSS, por lo 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 diferir.
  • 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; por eso, elige ANSI 256 o ANSI 16 como origen para los códigos de terminal.
  • HSV y HSB son dos nombres para el mismo modelo.