Hex, RGB, HSL: Una Guía Rápida para el Resto de Nosotros
Códigos de color decodificados para desarrolladores y no diseñadores que solo necesitan el tono correcto de azul.
El diseñador te envía un color: #3B82F6. Lo necesitas en RGB para alguna biblioteca. O quieres una versión ligeramente más oscura. O estás tratando de averiguar por qué se ve diferente en tu monitor.
Los sistemas de color no son complicados, pero nadie los explica bien. Aquí está lo que realmente necesitas saber.
HEX: El Estándar Web
#3B82F6 se desglosa así:
3B= Rojo (59 en decimal)82= Verde (130 en decimal)F6= Azul (246 en decimal)
Cada par es un número hexadecimal de 00 a FF (0-255 en decimal). Más = más brillante. #000000 es negro. #FFFFFF es blanco.
Existe abreviación: #FFF = #FFFFFF, #09C = #0099CC. Tres caracteres se expanden a seis duplicando cada uno.
RGB: El Obvio
rgb(59, 130, 246) es el mismo color, solo escrito diferente. Rojo 59, Verde 130, Azul 246.
Algunos formatos quieren porcentajes: rgb(23%, 51%, 96%). Lo mismo, notación diferente.
RGBA agrega transparencia: rgba(59, 130, 246, 0.5) es ese azul al 50% de opacidad.
HSL: El Realmente Útil
hsl(217, 91%, 60%) describe el color de manera diferente:
- Tono (217): Posición en la rueda de color. 0=rojo, 120=verde, 240=azul.
- Saturación (91%): Intensidad. 0%=gris, 100%=vívido.
- Luminosidad (60%): Brillo. 0%=negro, 50%=puro, 100%=blanco.
Por qué HSL importa: ajustar colores es intuitivo.
¿Quieres una versión más oscura? Baja la luminosidad. ¿Quieres una versión apagada? Baja la saturación. ¿Quieres un color completamente diferente con la misma "sensación"? Cambia el tono, mantén saturación y luminosidad.
En HEX o RGB, estos ajustes requieren matemática o adivinanza. En HSL, son cambios de un solo número.
Convertir Entre Ellos
Los números representan el mismo color de manera diferente. #3B82F6 = rgb(59, 130, 246) = hsl(217, 91%, 60%).
Usa un convertidor cuando necesites un formato específico. La mayoría de herramientas de diseño muestran los tres. CSS acepta los tres.
Situaciones Comunes
"Haz este color más oscuro" Convierte a HSL, reduce la luminosidad 10-20%, convierte de vuelta.
"Necesito variaciones para estados hover" Convierte a HSL. Botón: 60% luminosidad. Hover: 55%. Activo: 50%.
"Este color se ve deslavado" La saturación podría estar muy baja. Intenta aumentarla en HSL.
"Hacer coincidir el color de marca exactamente" Obtén el código hex de las guías de marca. No lo estimes a ojo.
"El color se ve diferente en diferentes pantallas" Bienvenido al infierno de la calibración de color. Usa el mismo código hex; acepta que los monitores varían.
Nota de Accesibilidad
El contraste de color importa. Texto claro sobre fondo claro = ilegible para muchas personas.
Hay una proporción: 4.5:1 para texto normal, 3:1 para texto grande. Existen herramientas para verificar esto. En la duda, más contraste es mejor.
¿Texto blanco sobre ese azul #3B82F6? La proporción de contraste es de aproximadamente 4.6:1, apenas pasando. Un azul más oscuro sería más seguro para texto de cuerpo.
No necesitas ser diseñador. Solo necesitas convertir entre formatos y saber que HSL hace los ajustes más fáciles. Todo lo demás son detalles.