Saltar al contenido
arnaud.app

Conversor HEX a HSL

Convierte código HEX a HSL (tono, saturación, luminosidad). Mejor para retocar tonos.

Funciona en tu navegador

HSL describe el color por tono (0-360°), saturación (0-100 %) y luminosidad (0-100 %) - mucho más intuitivo que HEX o RGB para diseñadores. Pega un HEX y devolvemos su HSL con vista previa en vivo.

CSS hsl()

hsl(212 100% 52%)

CSS rgb()

rgb(10 124 255)

CSS oklch()

oklch(0.608 0.215 257.4)

#0A7CFF

Mejor contraste con

texto negro → ratio 5.34:1 (WCAG AA requiere 4,5:1)

Cómo usarla

  1. Escribe un color en cualquier formato

    HEX, rgb(), hsl() u oklch() en el campo correspondiente. Los demás se actualizan en vivo.

  2. Ajusta los canales directamente

    Mueve los sliders R/G/B o los componentes HSL para afinar.

  3. 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.

Conversor de colores (HEX, RGB, HSL)

Convierte colores entre HEX, RGB, HSL y OKLCH.

Probar →

Más en esta categoría