Referencia de Formatos de Color

Definiciones, rangos de valores y uso para 11 formatos de color incluyendo HEX, RGB, HSL, CMYK y OKLCH.

HEX

Un código de color hexadecimal de 6 dígitos precedido por #. Cada par de dígitos representa los canales Rojo, Verde y Azul en base 16 (00-FF).

When to use
El formato más común en diseño web y CSS. Usado en HTML, CSS, herramientas de diseño y control de versiones.
Value ranges
#000000 (negro) a #FFFFFF (blanco). Soporta abreviatura de 3 dígitos (#RGB) y alfa de 8 dígitos (#RRGGBBAA).
CSS support
Soportado en todas las versiones de CSS.
Try in Color Converter →

RGB

Representa colores usando los canales Rojo, Verde y Azul, cada uno con un rango de 0 a 255. Basado en la mezcla aditiva de color — la forma en que las pantallas emiten luz.

When to use
Estándar para pantallas digitales, edición de imágenes y manipulación programática de colores.
Value ranges
R: 0-255, G: 0-255, B: 0-255
CSS support
Soportado en todas las versiones de CSS como rgb() y rgba().
Try in Color Converter →

HSL

Define el color por Tono (ángulo en la rueda de color), Saturación (intensidad) y Luminosidad (brillo). Más intuitivo que RGB para la selección manual de colores.

When to use
Ideal para generar variaciones de color — ajustar luminosidad para sombras/tintes, saturación para intensidad.
Value ranges
H: 0-360°, S: 0-100%, L: 0-100%
CSS support
Soportado en CSS3+ como hsl() y hsla().
Try in Color Converter →

CMYK

Cian, Magenta, Amarillo, Clave (negro). Un modelo de color sustractivo usado en producción de impresión donde las tintas absorben luz en lugar de emitirla.

When to use
Requerido para diseño de impresión y flujos de trabajo de preimpresión. No soportado directamente en CSS.
Value ranges
C: 0-100%, M: 0-100%, Y: 0-100%, K: 0-100%
CSS support
No soportado en CSS.
Try in Color Converter →

HSB / HSV

Tono, Saturación, Brillo (también llamado HSV — Tono, Saturación, Valor). Similar a HSL pero usa brillo en lugar de luminosidad, coincidiendo con cómo funcionan muchos selectores de color.

When to use
Común en herramientas de diseño como Adobe Photoshop y Figma para sus selectores de color.
Value ranges
H: 0-360°, S: 0-100%, B: 0-100%
CSS support
No soportado directamente en CSS.
Try in Color Converter →

CIELAB (LAB)

Un espacio de color perceptualmente uniforme donde los cambios numéricos iguales corresponden a diferencias de color percibidas aproximadamente iguales. Consiste en Luminosidad (L), eje verde-rojo (a) y eje azul-amarillo (b).

When to use
Usado para cálculos precisos de diferencia de color (Delta-E), corrección de color y representación de color independiente del dispositivo.
Value ranges
L: 0-100, a: -128 a 127, b: -128 a 127
CSS support
Soportado en CSS Color Level 4 como lab().
Try in Color Converter →

CIE XYZ

Un espacio de color independiente del dispositivo definido por la Comisión Internacional de Iluminación. Sirve como la base matemática para la mayoría de otros espacios de color.

When to use
Usado como paso intermedio en conversiones de espacios de color y para cálculos colorimétricos.
Value ranges
X: 0-95.047, Y: 0-100, Z: 0-108.883 (iluminante D65)
CSS support
No soportado directamente en CSS.
Try in Color Converter →

LCH

La forma cilíndrica de CIELAB, usando Luminosidad, Croma (intensidad de color) y Tono (ángulo). Más intuitivo que los ejes a/b de LAB manteniendo la uniformidad perceptual.

When to use
Preferido sobre LAB cuando necesitas ajustar croma o tono independientemente manteniendo la uniformidad perceptual.
Value ranges
L: 0-100, C: 0-150+, H: 0-360°
CSS support
Soportado en CSS Color Level 4 como lch().
Try in Color Converter →

OKLCH

Un espacio de color perceptual moderno que mejora LCH con mejor uniformidad de tono. Diseñado por Björn Ottosson para corregir los cambios de tono que ocurren en espacios basados en CIELAB.

When to use
Recomendado para la adopción de CSS Color Level 4. Proporciona la manipulación más uniforme de luminosidad, croma y tono de cualquier espacio de color ampliamente soportado.
Value ranges
L: 0-1, C: 0-0.4+, H: 0-360°
CSS support
Soportado en CSS Color Level 4 como oklch(). Ganando amplio soporte en navegadores.
Try in Color Converter →

HWB

Tono, Blancura, Negrura. Describe el color por su ángulo de tono, luego cuánto blanco y negro se mezclan. Considerado el modelo de color más intuitivo para humanos.

When to use
Fácil de entender para usuarios no técnicos. Agregar blancura crea pasteles, agregar negrura crea tonos más profundos.
Value ranges
H: 0-360°, W: 0-100%, B: 0-100%
CSS support
Soportado en CSS Color Level 4 como hwb().
Try in Color Converter →

CIELUV (LUV)

Un espacio de color perceptualmente uniforme optimizado para la mezcla aditiva de color (luz). Similar a CIELAB pero más adecuado para aplicaciones que involucran iluminación.

When to use
Usado en diseño de iluminación, ciencia del color televisivo y aplicaciones que involucran luz emitida en lugar de luz reflejada.
Value ranges
L: 0-100, u: -134 a 224, v: -140 a 122
CSS support
No soportado en CSS.
Try in Color Converter →