Cómo usar el convertidor de colores

Haz clic en la muestra de color o en el selector para elegir un color visualmente.
O escribe directamente un valor en un campo de formato, HEX, RGB, HSL u OKLCH, y los demás se actualizan al instante.
Haz clic en Copiar junto a cualquier formato para copiarlo al portapapeles.

HEX, RGB, HSL, OKLCH, ¿cuáles son las diferencias?

HEX (#RRGGBB) es el formato de color más habitual en la web. Cada par de dígitos es un valor hexadecimal de 00 (0) a FF (255), representando los canales rojo, verde y azul. Ejemplo: #3498db es un azul medio. La forma abreviada #RGB existe para colores donde cada par se repite (ej. #fff = #ffffff).

RGB (rojo, verde, azul) expresa cada canal como un número del 0 al 255. CSS acepta tanto rgb(52, 152, 219) como la sintaxis moderna rgb(52 152 219).

HSL (tono, saturación, luminosidad) es el formato más intuitivo para diseñadores. El tono es un ángulo en la rueda de colores (0-360°). La saturación controla la intensidad (0% = gris). La luminosidad ajusta el brillo (0% = negro, 100% = blanco). Incrementar o decrementar la luminosidad crea tintes y sombras del mismo tono.

OKLCH (luminosidad, croma, tono) es el espacio de color perceptual moderno definido en CSS Color Level 4. Su valor de luminosidad es perceptualmente uniforme y cubre una gama de colores más amplia que sRGB, incluidos los colores P3 de las pantallas modernas.

¿Qué formato usar en CSS?

Usa HEX para referencias rápidas y tokens de diseño, compacto y universalmente entendido
Usa HSL para sistemas de temas donde generas variantes ajustando un solo valor
Usa OKLCH para sistemas de diseño CSS modernos con rampas de color consistentes y soporte wide-gamut
Usa RGB con canvas, WebGL o bibliotecas que esperan canales numéricos