Guía de conversión de formatos de color: HEX, RGB, HSL, OKLCH completamente cubiertos
Resumen de formatos de color
Formatos de color comunes en desarrollo web:
| Formato | Ejemplo | Características |
|---|---|---|
| HEX | #FF6B35 |
Más común, compacto |
| RGB | rgb(255, 107, 53) |
Intuitivo, valores de canal 0-255 |
| HSL | hsl(16, 100%, 60%) |
Tono/Saturación/Luminosidad, intuitivo para ajustes |
| OKLCH | oklch(0.68 0.17 37) |
Perceptualmente uniforme, recomendado en CSS moderno |
Diferentes formatos representan el mismo color—solo diferentes sistemas de coordenadas.
Formato HEX explicado
HEX usa hexadecimal para representar los tres canales RGB:
#FF6B35
↑ ↑ ↑
R G B → Cada canal 00-FF (0-255)
- Abreviatura de 3 dígitos:
#F63equivale a#FF6633 - Abreviatura de 4 dígitos con alfa:
#F63Aequivale a#FF6633AA - Completo de 8 dígitos con alfa:
#FF6B3580(80 = 50% opacidad)
RGB y canal alfa
RGB se mapea directamente a los colores primarios de visualización:
rgb(255, 107, 53) /* opaco */
rgba(255, 107, 53, 0.5) /* 50% transparente */
rgb(255 107 53 / 50%) /* sintaxis moderna */
Canal alfa: 1 = completamente opaco, 0 = completamente transparente. El CSS moderno prefiere
rgb()con valores separados por espacios y/para la transparencia.
HSL: Ajuste de color intuitivo
HSL descompone el color en tono, saturación y luminosidad:
| Parámetro | Rango | Significado |
|---|---|---|
| H (Tono) | 0-360° | Ángulo de la rueda de colores: 0=rojo, 120=verde, 240=azul |
| S (Saturación) | 0-100% | 0%=gris, 100%=color puro |
| L (Luminosidad) | 0-100% | 0%=negro, 50%=color puro, 100%=blanco |
Consejos de ajuste:
- ¿Mismo tono, diferentes tonalidades? Fija H y S, ajusta L
- ¿Tono más suave? Reduce S
- ¿Color complementario? H ± 180°
OKLCH: El estándar perceptualmente uniforme
OKLCH es un espacio de color introducido en CSS Color Level 4, modelado sobre la percepción humana:
| Ventaja | Descripción |
|---|---|
| Perceptualmente uniforme | El cambio de brillo de 0.5→0.6 se ve igual que 0.7→0.8 |
| Gama más amplia | Soporta P3 y otras pantallas de gama amplia |
| Ajustes predecibles | L fijo con C/H variable mantiene la luminosidad visual constante |
oklch(0.68 0.17 37)
↑ ↑ ↑
L C H → Luminosidad/Croma/Tono
La L=50% de HSL varía mucho en brillo visual según el tono. OKLCH soluciona esto.
Uso de la herramienta de conversión de color
Paso 1: Abrir la herramienta
Visita la herramienta de conversión de color e ingresa un color en cualquier formato.
Paso 2: Seleccionar formato de entrada
Ingresa un color en el cuadro de entrada. Formatos soportados:
- HEX:
#FF6B35 - RGB:
255, 107, 53 - HSL:
16, 100%, 60% - OKLCH:
0.68, 0.17, 37
Paso 3: Ver resultados de conversión
La herramienta muestra automáticamente todas las conversiones de formato. Copia cualquier resultado directamente.
Paso 4: Ajustar canal alfa
Marca "Incluir transparencia" e ingresa un valor alfa (0-1). Los resultados incluirán el canal alfa.
CSS color-mix() en la práctica
OKLCH combinado con color-mix() permite mezclas de color precisas:
/* Mezclar en espacio OKLCH — perceptualmente uniforme */
.button {
background: color-mix(in oklch, #FF6B35, #3B82F6);
}
/* Mezclar 30% del color de acento */
.card {
border-color: color-mix(in oklch, #FF6B35 30%, white);
}
Usa el verificador de contraste para verificar que el color mezclado cumple con los requisitos de contraste con el texto.
Formatos de color en degradados
Al usar el generador de degradados, se recomienda el formato OKLCH:
/* Las transiciones de degradado OKLCH son más uniformes */
background: linear-gradient(
in oklch,
oklch(0.7 0.15 30),
oklch(0.7 0.15 250)
);
Los degradados tradicionales RGB/HSL pueden producir puntos medios apagados alrededor de la rueda de colores. OKLCH evita esto.
Problemas comunes
| Problema | Causa | Solución |
|---|---|---|
| Resultado HEX a RGB incorrecto | Abreviatura no expandida | Expandir a HEX de 6 dígitos primero |
| Cambio de color HSL a HEX | Pérdida de precisión de punto flotante | Usar la herramienta para conversión precisa |
| OKLCH no soportado | Navegador antiguo | Usar fallback CSS o plugin PostCSS |
| Visualización del valor alfa incorrecta | Porcentaje y decimal mezclados | Usar decimal 0-1 o 0%-100% consistentemente |
Resumen
Dominar los formatos HEX, RGB, HSL y OKLCH y sus conversiones es una habilidad fundamental para el desarrollo frontend y el diseño. La uniformidad perceptual de OKLCH lo convierte en la mejor opción para el CSS moderno. La herramienta de conversión de color maneja todas las conversiones de formato en un clic, mientras que el verificador de contraste y el generador de degradados completan tu flujo de trabajo de color.