Conversor de colores para desarrolladores: HEX, RGB, HSL explicados

Los tres sistemas de color que necesitas conocer

HEX (#RRGGBB)

Los colores HEX representan los canales rojo, verde y azul como valores hexadecimales de 00 a FF. Por ejemplo, #FF6B35 produce un naranja cálido.

Cuándo usar HEX: Copiar colores de archivos de diseño, establecer colores de marca en variables CSS, el formato más común en entregas de diseño.

RGB / RGBA

RGB usa valores decimales de 0 a 255. RGBA añade un canal de opacidad (alpha) de 0 a 1.

Cuándo usar: Cuando necesites transparencia, cálculos programáticos de color, JavaScript canvas o manipulación de imágenes.

HSL / HSLA

HSL significa Matiz (0-360°), Saturación (0%-100%), Luminosidad (0%-100%). Es el modelo de color más intuitivo.

Cuándo usar: Crear paletas de colores, ajustar colores, construir sistemas de temas, adaptación al modo oscuro.

Construir paletas con HSL

HSL hace que la manipulación de colores sea intuitiva. Desde un color base, puedes crear toda una paleta ajustando solo la luminosidad mientras mantienes el matiz y la saturación consistentes.

Accesibilidad: estándares de contraste WCAG

| Nivel | Texto normal | Texto grande | |-------|-------------|-------------| | AA (mínimo) | 4.5:1 | 3:1 | | AAA (mejorado) | 7:1 | 4.5:1 |

Consejos prácticos:

1. Nunca dependas solo del color para transmitir información — usa íconos y etiquetas.
2. Gris claro sobre blanco es la violación más común.
3. Verifica ambos temas — un color que pasa en modo claro puede fallar en modo oscuro.

Entrega de colores diseñador-desarrollador

Usa tokens de diseño en lugar de valores de color sin procesar. Especifica colores para todos los estados de cada elemento UI. Acuerda un formato temprano.

Estrategia de color para modo oscuro

1. Reduce la saturación — 10-20% menos en fondos oscuros.
2. Usa superficies elevadas, no negro puro — #1a1a2e es mejor que #000000.
3. Invierte la escala de luminosidad.
4. Prueba con ojos reales.

Convierte colores al instante

Usa el Conversor de Colores para traducir entre HEX, RGB, HSL y más. También explora el Generador de Gradientes CSS y el Generador de Sombras CSS.