Conversor de colores (HEX, RGB, HSL)
Convierte colores entre HEX, RGB, HSL y OKLCH.
Escribe un color en cualquier formato (HEX, RGB, HSL, OKLCH) y los demás se actualizan al instante. Perfecto para design tokens, variables CSS y brand kits.
rgb(10 124 255)
hsl(212 100% 52%)
oklch(0.608 0.215 257.4)
Mejor contraste con
texto negro → ratio 5.34:1 (WCAG AA requiere 4,5:1)
Cómo usarla
Escribe un color en cualquier formato
HEX, rgb(), hsl() u oklch() en el campo correspondiente. Los demás se actualizan en vivo.
Ajusta los canales directamente
Mueve los sliders R/G/B o los componentes HSL para afinar.
Copia el formato que necesites
Botón de copia junto al formato que pide tu destino.
¿Qué es?
Un conversor de colores traduce entre los formatos que usan CSS, herramientas de diseño y editores de imagen. HEX (#0a7cff) es el atajo legacy de un triplete RGB. RGB expresa intensidades rojo/verde/azul. HSL es más intuitivo para retocar tonalidades. OKLCH es el nuevo modelo perceptualmente uniforme de CSS Color Level 4.
Cuándo usarla
Cuando un color cambia de contexto: copiar un color de marca de un SVG (HEX) al sistema de variables CSS (HSL u OKLCH), traducir una captura (RGB) en token, generar variantes accesibles. Útil también para revisar contraste WCAG.
Errores comunes
No supongas que la luminosidad HSL es perceptual - no lo es. hsl(60 100% 50%) (amarillo) y hsl(240 100% 50%) (azul) tienen la misma cifra de luminosidad pero luminancias muy distintas; OKLCH lo corrige. Y no trunques canales HEX a mitad: redondea al final.
Preguntas frecuentes
- ¿Por qué OKLCH?
- OKLCH es el nuevo formato de CSS Color Level 4. A diferencia de HSL es perceptualmente uniforme: ajustar luminosidad o croma no desplaza el tono.