Códigos de color: HEX, RGB y HSL explicados

Por · Actualizado el

Un código de color es una forma numérica de describir un color para que computadoras, navegadores y programas de diseño muestren exactamente el mismo tono. Los tres formatos más usados en la web son HEX (#FF5733), RGB (rgb(255 87 51)) y HSL (hsl(11 100% 60%)). Los tres ejemplos describen el mismo color, un naranja rojizo intenso: lo único que cambia es la forma de escribirlo.

En la práctica, HEX y RGB le indican a la pantalla cuánta luz roja, verde y azul debe emitir, mientras que HSL describe el color como lo pensamos las personas: qué tono es, qué tan vivo y qué tan claro. En esta guía aprenderás a leer cada formato, a convertir de uno a otro a mano y a elegir el más adecuado para CSS, diseño de interfaces e identidad visual.

Qué es un código de color y para qué sirve

Toda pantalla moderna forma los colores con diminutos puntos de luz roja, verde y azul. Un código de color es la instrucción que fija la intensidad de cada uno de esos tres canales. Como es numérica, no deja lugar a interpretaciones: la diseñadora que elige #4169E1 en Figma, el desarrollador que lo escribe en la hoja de estilos y el navegador que lo muestra hablan del mismo azul real.

Detrás de cada código hay un espacio de color, que define a qué rojo, verde y azul corresponde el valor máximo de cada canal. En la web el estándar es sRGB: siempre que escribes un HEX, un rgb() o un hsl() sin indicar otro espacio, el navegador lo interpreta como sRGB. Por eso un mismo código puede verse algo distinto en dos monitores: el número es igual, pero la calibración y la capacidad de cada pantalla varían.

Con 8 bits por canal, cada componente va de 0 a 255, lo que da 256 × 256 × 256 = 16.777.216 combinaciones. De ahí sale la conocida cifra de “16,7 millones de colores”.

Cómo leer un código HEX

El HEX (de hexadecimal) es el formato más común en CSS, manuales de marca y herramientas de diseño. Empieza con # y usa seis dígitos que van del 0 al 9 y de la A a la F. Los seis dígitos forman tres pares:

Cada par es un número en base 16. El dígito de la izquierda vale 16 veces su valor y el de la derecha vale su propio valor, con A = 10, B = 11, C = 12, D = 13, E = 14 y F = 15. Así, 00 es 0 (canal apagado) y FF es 15 × 16 + 15 = 255 (canal al máximo). Algunos ejemplos:

Mayúsculas y minúsculas son equivalentes: #ff5733 y #FF5733 son el mismo color.

Notación corta: #RGB

Cuando cada par está formado por dos dígitos iguales, puedes abreviar el código a tres dígitos y el navegador duplica cada uno: #F80 se convierte en #FF8800 , y #FFF en #FFFFFF. Un código como #FF5733 no tiene versión corta, porque 57 no es un par de dígitos repetidos.

Transparencia: #RRGGBBAA y #RGBA

CSS acepta un cuarto par para el canal alfa (la opacidad). 00 es totalmente transparente y FF, totalmente opaco. En #FF573380, el par 80 vale 128, y 128 ÷ 255 ≈ 50,2 % de opacidad. La versión corta de cuatro dígitos sigue la misma lógica: #F538 equivale a #FF553388. Algunos programas de diseño antiguos no reconocen el alfa en HEX; en ese caso, usa rgb() con alfa.

Cómo funciona el código RGB

RGB escribe los mismos tres canales que el HEX, pero en números decimales de 0 a 255. En el CSS actual, la sintaxis recomendada separa los valores con espacios:

.destacado { color: rgb(255 87 51); }
.capa { background: rgb(0 0 0 / 60%); }
.etiqueta { background: rgb(255 87 51 / 0.5); }

La barra / introduce el alfa, que puedes escribir en porcentaje (50%) o en decimal (0.5). La sintaxis antigua con comas, rgb(255, 87, 51) y rgba(255, 87, 51, 0.5), sigue funcionando en todos los navegadores. Hoy rgba() es solo un alias de rgb(), que ya acepta el alfa.

RGB es un modelo aditivo: sumar luz aclara. Con los tres canales al máximo obtienes blanco; con los tres en cero, negro. Rojo más verde da amarillo (rgb(255 255 0)). Esa diferencia entre luz y pigmento es el tema de la guía RGB vs CMYK.

HSL: tono, saturación y luminosidad

HSL describe el color con tres propiedades que tienen sentido para el ojo humano:

En CSS, la sintaxis moderna también usa espacios: hsl(11 100% 60%) o, con transparencia, hsl(11 100% 60% / 50%). La gran ventaja es que puedes ajustar un color cambiando un solo número. Con el tono en 11° y la saturación en 100 %, basta variar la luminosidad para crear una escala:

Con HEX, la misma escala obligaría a recalcular los tres pares en cada paso. Por eso HSL es tan usado para crear variaciones de una paleta de colores.

HSL no es lo mismo que HSV (o HSB)

Photoshop y muchos selectores de color muestran HSB o HSV (tono, saturación y brillo/valor). El tono es el mismo, pero la escala vertical cambia: en HSB, brillo 100 % con saturación 100 % da el color puro, mientras que en HSL el color puro está en luminosidad 50 %. Así que no copies los números de un modelo al otro. CSS no tiene función hsv(): convierte a HSL, RGB o HEX antes de llevar el color al código.

Cómo convertir entre HEX, RGB y HSL

Un convertidor de colores lo hace al instante, pero entender el cálculo te ayuda a verificar valores y detectar errores de tipeo.

De HEX a RGB

Separa los pares y convierte cada uno a decimal (dígito izquierdo × 16 + dígito derecho). Para #FF5733:

FF → 15 × 16 + 15 = 255
57 →  5 × 16 +  7 =  87
33 →  3 × 16 +  3 =  51
#FF5733 = rgb(255 87 51)

De RGB a HEX

Haz el camino inverso: divide cada valor entre 16. El cociente entero es el primer dígito y el resto es el segundo. Para el azul real, rgb(65 105 225):

 65 ÷ 16 =  4, resto 1 → 41
105 ÷ 16 =  6, resto 9 → 69
225 ÷ 16 = 14, resto 1 → E1
rgb(65 105 225) = #4169E1

De RGB a HSL

La fórmula estándar trabaja con los canales en escala de 0 a 1. Este es el paso a paso con rgb(255 87 51):

  1. Divide cada canal entre 255: R = 1, G ≈ 0,341, B = 0,2.
  2. Busca el mayor (máx = 1) y el menor (mín = 0,2). La diferencia es d = 0,8.
  3. Luminosidad: L = (máx + mín) ÷ 2 = 0,6 → 60 %.
  4. Saturación: si d = 0, el color es gris y S = 0. Si no, S = d ÷ (1 − |2L − 1|) = 0,8 ÷ 0,8 = 1 → 100 %.
  5. Tono: depende de cuál canal es el mayor. Si es R, H = 60 × ((G − B) ÷ d), sumando 360 si el resultado es negativo; si es G, H = 60 × ((B − R) ÷ d + 2); si es B, H = 60 × ((R − G) ÷ d + 4). Aquí el mayor es R: H = 60 × (0,141 ÷ 0,8) ≈ 10,6 → 11°.

Resultado: hsl(11 100% 60%). Fíjate en el redondeo: el tono exacto es 10,6°, y si conviertes hsl(11 100% 60%) de vuelta obtienes #FF5833, una unidad de diferencia en el verde. Es imperceptible, pero explica por qué ir y volver entre formatos no siempre devuelve el HEX original. Cuando la fidelidad importa, como en el color de una marca, guarda el HEX o el RGB como valor de referencia.

Qué formato usar: tabla comparativa

FormatoEjemploVentajasMejor uso
HEX#FF5733Compacto, fácil de copiar y pegar, aceptado por casi cualquier herramientaManuales de marca, entrega de diseño, colores fijos en CSS
HEX con alfa#FF573380Transparencia sin cambiar de formatoSombras y capas cuando el proyecto ya usa HEX
RGBrgb(255 87 51)Valores decimales legibles, alfa claro con /Transparencias, manipulación de color en JavaScript, canvas
HSLhsl(11 100% 60%)Ajuste intuitivo de claridad e intensidadEscalas de tonos, estados de botón, temas y variables CSS
Nombre CSStomatoLegible en prototiposPruebas rápidas y ejemplos didácticos

Una combinación habitual en proyectos reales: guardar los colores de marca en HEX, declararlos como variables CSS y recurrir a rgb() o hsl() cuando hace falta transparencia o una variación de luminosidad.

Otros formatos que encontrarás

Nombres de color de CSS

CSS define más de 140 nombres de color, como navy, teal y tomato. Cada nombre corresponde a un HEX fijo: navy es #000080 (azul marino) y teal es #008080 (verde azulado). Son prácticos para pruebas, pero se quedan cortos para una identidad propia.

CMYK

CMYK (cian, magenta, amarillo y negro) es el modelo de la impresión, no de la pantalla. Existe una conversión matemática sencilla que da #FF5733 ≈ cmyk(0%, 66%, 80%, 0%), pero lo que realmente sale de la imprenta depende del perfil de color, el papel y la máquina. CSS no usa CMYK para mostrar colores en pantalla.

OKLCH y otros espacios modernos

CSS Color Level 4 incorporó funciones como oklch(), lab() y color(), que alcanzan colores fuera de sRGB en pantallas de gama amplia y ofrecen una luminosidad más fiel a la percepción humana. En HSL, un amarillo y un azul con la misma luminosidad de 50 % se ven con claridades muy distintas; OKLCH corrige eso. La guía de colores en CSS moderno explica estos formatos a fondo.

Errores comunes con los códigos de color

Resumen y próximos pasos

HEX, RGB y HSL son tres formas de escribir la misma información. El HEX es compacto y universal, el RGB muestra los canales en decimal y maneja bien la transparencia, y el HSL facilita crear variaciones de un color.

Para ponerlo en práctica:

Herramientas usadas en esta guía