Conversión de color explicada: HEX, RGB y HSL sin líos

Un cliente devuelve un diseño con un azul de marca muy concreto y pregunta: "¿puedes exportarlo como código de color?". La diseñadora lo escribió como HSL(225, 80%, 47%), el CSS del desarrollador espera #2f6fed, y ambos hablan de exactamente el mismo color. Por eso existe la conversión de color: tres notaciones, una realidad. Esta guía explica qué significa cada formato, cómo convertir entre ellos con confianza y las pocas reglas que evitan decisiones de color ilegibles.

Los tres modelos que te vas a encontrar

Cada color en una pantalla se produce mezclando luz roja, verde y azul. Lo que cambia es cómo describimos la mezcla:

• HEX es la abreviatura de la web: los valores RGB comprimidos en seis dígitos hexadecimales.
• RGB escribe las cantidades de rojo, verde y azul como tres números de 0 a 255.
• HSL nombra el color por su matiz, saturación y luminosidad: la forma en que piensa una persona.

Ninguno es “más correcto” que otro. Son herramientas distintas: elige el que haga más fácil razonar sobre la tarea actual.

HEX: de dónde salen los seis dígitos

Un valor como #2f6fed no es más que tres números de dos dígitos pegados. Divídelo: 2f es el rojo, 6f el verde, ed el azul. El truco es que los dígitos van de 0–9 a a–f (hexadecimal), así que 2f equivale a 2 × 16 + 15 = 47. Ese número cae directo en la escala de 0–255: hex 2f → 47 → rgb(47, ...).

Cuando los tres pares son dígitos duplicados —como #aabbcc— puedes abreviarlo a tres dígitos: #abc. Los navegadores tratan ambas formas como idénticas, y la corta es la estándar en utilidades de Tailwind como bg-red-500. Un error típico de principiante: creer que #ffffff es gris. Es blanco puro; #808080 es el gris medio.

RGB: los números 0–255 que usa la pantalla

Cuando ves rgb(47, 111, 237), léelo como “47 unidades de luz roja, 111 de luz verde, 237 de azul”. Cero está apagado, 255 es brillo total, y una pantalla moderna mezcla esos tres canales para producir el color. Todo lo demás —incluido el HEX— es una capa de comodidad sobre esos tres números.

Los números parecen vacíos hasta que los conectas con la experiencia. Un color con los tres canales iguales — rgb(200,200,200) — es un gris. El brillo de cualquier color RGB es más o menos el promedio de sus canales: súbelos juntos y el color se aclara hacia el blanco. Cuando eso se asienta, leer RGB se vuelve mucho más fácil.

HSL: el modelo que quiere tu intuición

HSL describe el color como la gente lo describe de verdad. Matiz es el ángulo en el círculo cromático: 0° rojo, 120° verde, 240° azul, de modo que puedes elegir “el rojo de ahí” sin calcular nada. Saturación es lo vivo que está el color, de gris (0%) a color puro (100%). Luminosidad va de negro (0%) a blanco (100%), siendo 50% la versión “normal” y viva del color.

Por eso HSL es el modelo correcto para el diseño: oscurecer un estado hover bajando la luminosidad unos puntos, o atenuar un color de acento reduciendo la saturación, sin tocar el matiz. Hacer el mismo cambio en HEX significa recalcular tres dígitos que no tienen relación. Por eso la mayoría de selectores de color, degradados CSS y herramientas de diseño muestran HSL en algún lugar.

Convertir entre modelos

Las conversiones son mecánicas. HEX → RGB ya está resuelto arriba; RGB → HSL solo requiere hallar el canal máximo/mínimo y derivar el matiz del canal ganador. En la práctica rara vez lo harás a mano —un conversor lo resuelve al instante—, pero la fórmula le quita el misterio:

function rgbToHex(r, g, b) {
  const toHex = (n) => n.toString(16).padStart(2, "0");
  return "#" + [r, g, b].map(toHex).join("");
}
function hexToRgb(hex) {
  const h = hex.replace("#", "");
  const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
  return [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2), 16));
}

Accesibilidad: comprobar el contraste con matemáticas

Elegir colores a ojo es como se crean interfaces ilegibles. WCAG define una relación de contraste entre el color del texto y el fondo, de 1 (sin contraste) a 21 (negro sobre blanco). Los umbrales prácticos: el texto normal necesita 4,5:1; el texto grande, 3:1. La proporción nace de la luminancia relativa de ambos colores, que pondera más el canal verde porque el ojo humano es más sensible a él —un fondo #00ff00 puro se ve mucho más brillante que uno #ff0000.

El atajo honesto no es calcular la luminancia a mano, sino entender qué mueve la cifra: aumentar la diferencia de luminosidad entre texto y fondo casi siempre ayuda. Por eso HSL es inestimable aquí: dos colores que comparten matiz armonizan solos, y puedes subir la luminosidad de uno hasta que el contraste pase. Cuando un cliente insiste en un amarillo pálido como color de marca, el contraste es la conversación que debes saber tener: no es una cuestión de gusto, es una cuestión de 4,5:1.

Crear y extraer paletas

El mismo conocimiento del color impulsa el trabajo con paletas. Una paleta estilo Tailwind parte de un color base y reparte pasos a intervalos fijos de luminosidad; un extractor de paletas toma una imagen existente y saca sus colores dominantes y visualmente equilibrados. Ambos se apoyan en convertir los colores de origen a un espacio donde se pueda medir “similar” y “distinto” —por eso las herramientas que saltan entre HEX, RGB y HSL, o que sacan colores directo de una imagen, ahorran muchísimo trabajo.

Herramientas de color en Convrs

Convrs mantiene todo esto en el navegador: el conversor de color traduce cualquier valor HEX, RGB o HSL a las demás notaciones con vista previa en vivo, el extractor de paletas obtiene una paleta equilibrada de cualquier imagen, y el generador de paletas Tailwind convierte un solo color en una rampa completa de tonos para tu sistema de diseño. Tus colores nunca salen de tu dispositivo y puedes copiar el resultado directo a CSS o a la configuración de Tailwind.