Un mismo color se puede describir en HEX, RGB, HSL o HSB/HSV, y cada formato es más útil en un contexto distinto: HEX para CSS y diseño web, HSL para ajustar tonalidad y luminosidad de forma intuitiva, RGB para trabajar directamente con canales de píxel. Este conversor de color traduce entre todos estos formatos en tiempo real, calcula el contraste WCAG frente a blanco y negro, y genera automáticamente variantes más claras y más oscuras del mismo tono.
HEX, RGB y la relación de 8 bits por canal
Un color HEX como #3B82F6 codifica tres canales (rojo, verde, azul) en pares hexadecimales, cada uno representando un valor de 0 a 255 en base 16: 3B = 59, 82 = 130, F6 = 246. Es exactamente el mismo dato que rgb(59, 130, 246), solo cambia la base numérica y la agrupación. El formato HEX abreviado de 3 dígitos (#3B8 equivale a #33BB88) duplica cada dígito y solo permite 4096 colores frente a los 16,7 millones del formato completo de 6 dígitos.
HSL: pensar en color, saturación y luminosidad
HSL separa el matiz (Hue, 0-360° en la rueda cromática), la saturación (0-100%, de gris a color puro) y la luminosidad (0-100%, de negro a blanco). Es el modelo más intuitivo para ajustar un color manualmente: para aclarar un azul sin cambiar su tono, subes la L manteniendo H y S fijos, algo que en RGB requeriría recalcular los tres canales proporcionalmente. Los sistemas de diseño modernos (Tailwind, Material Design) generan sus paletas de escalas de color variando la L sobre un H y S constantes.
Contraste WCAG: por qué no todos los colores sirven para texto
La Web Content Accessibility Guidelines exige una ratio de contraste mínima de 4.5:1 entre texto y fondo para nivel AA en texto normal, y 3:1 para texto grande (18pt o 14pt en negrita). La ratio se calcula a partir de la luminancia relativa de cada color, una fórmula que pondera los canales RGB de forma no lineal (el verde pesa más que el rojo y el azul en la percepción humana). Este conversor calcula automáticamente el contraste de cualquier color frente a blanco y negro para verificar si cumple WCAG AA o AAA.
HSB/HSV y su uso en herramientas de diseño gráfico
HSB (o HSV, Hue-Saturation-Brightness/Value) es muy similar a HSL pero define el tercer canal como brillo en lugar de luminosidad, lo que cambia ligeramente cómo se comporta al variar la saturación. Photoshop, Figma y la mayoría de selectores de color de aplicaciones de diseño usan HSB porque su rueda de color coincide más con la intuición pictórica: el valor B=100% y S=100% da el color más 'puro' y saturado posible del matiz elegido.
Generar variantes de un color: tints, shades y tonos
Un tint se obtiene mezclando el color con blanco (aumentar L en HSL manteniendo H y S), un shade mezclándolo con negro (reducir L), y un tone mezclándolo con gris (reducir S). Estas variantes son la base de cualquier paleta de diseño consistente: en lugar de elegir colores al azar para estados hover, disabled o focus, se generan matemáticamente a partir del color base ajustando L y S, garantizando armonía visual en toda la interfaz.
CMYK y su relevancia solo para impresión
CMYK (Cyan, Magenta, Yellow, Key/negro) es un modelo sustractivo pensado para impresión física, donde los colores se generan restando luz reflejada en lugar de sumando luz emitida como en RGB. Convertir de RGB a CMYK para mostrar en pantalla no tiene sentido práctico salvo que vayas a enviar el diseño a imprenta, y la conversión exacta depende del perfil de color (ICC) de la imprenta específica, por lo que un valor CMYK teórico rara vez coincide exactamente con el resultado impreso final.
Casos de uso comunes
- Convertir un color HEX de un diseño en Figma al RGB que necesita un script Python.
- Verificar si el contraste de un texto sobre un fondo de marca cumple WCAG AA.
- Generar una escala de 9 tonos de un color corporativo para un sistema de diseño.
- Ajustar la luminosidad de un color en HSL sin alterar su matiz original.
- Traducir un color CSS con nombre (como tomato) a su valor HEX exacto.
Buenas prácticas
- Verifica siempre el contraste WCAG antes de usar un color para texto sobre un fondo.
- Usa HSL para generar variantes de un color manteniendo el matiz constante.
- Prefiere HEX o RGB en CSS moderno; evita nombres de color por su ambigüedad entre navegadores.
- No conviertas a CMYK para mostrar en pantalla; resérvalo solo para archivos de imprenta.
- Documenta la paleta de tu proyecto con los tres formatos (HEX, RGB, HSL) para facilitar el trabajo entre diseño y desarrollo.