Skip to main content

Convertidor de colores

Español

Convierte entre los formatos de color HEX, RGB y HSL.

hex
#3b82f6
rgb
rgb(59, 130, 246)
hsl
hsl(217, 91%, 60%)
Todos los cálculos se realizan localmente en tu navegador. No se envía ningún dato al servidor.

Los resultados tienen carácter informativo. Contrástalos con otras fuentes.

HEX, RGB y HSL: el mismo color de tres formas

Estas tres notaciones describen colores idénticos; se diferencian en lo que facilitan. HEX y RGB direccionan directamente los canales rojo, verde y azul. HSL separa el tono de la saturación y la luminosidad, y por eso es la que conviene al construir una paleta.

Cómo funciona

  • HEX son dos dígitos hexadecimales por canal: #RRGGBB, cada par un valor de 00 a FF (0–255).
  • RGB son los mismos tres números en decimal, a veces con canal alfa como rgba().
  • HSL da el tono en grados sobre una rueda cromática (0–360), más saturación y luminosidad en porcentaje.
HEX → RGB:  divide en pares y lee cada uno en base 16
  #3B82F6 → 3B=59, 82=130, F6=246 → rgb(59, 130, 246)

RGB → HSL:  normaliza a 0–1 y luego
  L = (max + min) / 2
  S = (max − min) / (1 − |2L − 1|)
  H = el ángulo que depende del canal dominante

Ejemplo resuelto

Convertir #3B82F6 —un azul de interfaz habitual— por las tres notaciones.

  1. 3B = 3×16 + 11 = 59, 82 = 8×16 + 2 = 130, F6 = 15×16 + 6 = 246
  2. rgb(59, 130, 246)
  3. normalizar: r=0,231, g=0,510, b=0,965 → max=0,965 (azul), min=0,231
  4. L = (0,965 + 0,231) / 2 = 0,598 → 60%
  5. S = (0,965 − 0,231) / (1 − |2(0,598) − 1|) = 0,734 / 0,804 = 0,913 → 91%
  6. el azul es el canal dominante, de donde H ≈ 217°

hsl(217, 91%, 60%). Para sacar una paleta, mantén el tono en 217 y varía la luminosidad: justo el gesto que HSL vuelve trivial y HEX, penoso.

Cómo leer el resultado

  • Igual luminosidad en HSL no significa igual brillo percibido. El amarillo al 50% se ve mucho más brillante que el azul al 50%, porque HSL es una simple transformación matemática de RGB y no sabe nada de la visión humana. Para contraste accesible, calcula la relación de contraste WCAG en vez de comparar luminosidades.
  • El HEX de tres dígitos es una abreviatura en la que cada dígito se duplica: #3BF significa #33BBFF, no #03B0F0.
  • Los redondeos se acumulan. Ir de HEX → HSL → HEX puede desplazar un canal en una unidad, así que mantén una notación como fuente de verdad en tus tokens de diseño.
  • Los espacios de color CSS más recientes —oklch en particular— corrigen el problema perceptual de HSL y merecen la pena donde el soporte del navegador lo permita.

Preguntas frecuentes

¿Qué notación uso en CSS?
HSL u oklch para todo lo que generes de forma sistemática, como los matices de un color de marca, porque cambiar un número cambia una sola cosa. HEX está bien para valores fijos que te entrega diseño.
¿Por qué mi color se ve distinto en otra aplicación?
Casi siempre por una diferencia de perfil de color. El mismo triple RGB se representa distinto en sRGB y en Display P3, y por eso capturas de la misma página no cuadran entre dispositivos.

Fuentes