Conversor de colores: HEX, RGB, HSL, HSV, HWB, CMYK, LAB y OKLCH
Convierte cualquier color entre HEX, RGB, HSL, HSV, HWB, CMYK, CIELAB y OKLCH, consulta su nombre CSS y el contraste WCAG sobre blanco y negro. Gratis, en tu navegador.
Acepta HEX (#rgb, #rrggbb, #rrggbbaa), rgb()/rgba(), hsl()/hsla(), hsv(), hwb(), cmyk(), lab(), oklch() y los 148 nombres de color CSS.
dodgerblue#1e90ffrgb(30, 144, 255)hsl(209.6, 100%, 55.9%)hsv(209.6, 88.2%, 100%)hwb(209.6 11.8% 0%)cmyk(88.2%, 43.5%, 0%, 0%)lab(58.36% 0.89 -64.78)oklch(65.2% 0.1901 253.21)CIELAB usa el punto blanco D50 como en CSS Color 4. Los valores solo se redondean al mostrarlos; las conversiones usan precisión completa. La transparencia se ignora en CMYK, HSV y el contraste.
¿Qué es Conversor de colores?
Pega un color en cualquier notación habitual y obtenlo a la vez en ocho modelos de color: HEX, RGB(A), HSL(A), HSV, HWB, CMYK, CIELAB y OKLCH. La herramienta también muestra el nombre de color CSS correspondiente (si hay uno exacto) y la relación de contraste WCAG del color sobre blanco y sobre negro.
Cómo usar Conversor de colores
- Escribe o pega un color en Color (cualquier formato), por ejemplo
#1e90ff,rgb(30 144 255),hsl(210 100% 56%),oklch(65% 0.19 253)otomato, o elige uno con el selector de color. - Consulta los valores convertidos en la lista de resultados; cada fila tiene su propio botón Copiar.
- Revisa Nombre CSS para ver si coincide exactamente con un color con nombre, y las tarjetas Contraste sobre blanco / negro para los resultados WCAG AA y AAA.
- Si un valor LAB u OKLCH está fuera de sRGB, un aviso indica que se recortó al color representable más cercano.
Ejemplo
#ff0000
rgb(255, 0, 0) · hsl(0, 100%, 50%) · hsv(0, 100%, 100%) · hwb(0 0% 0%) · cmyk(0%, 100%, 100%, 0%) · lab(54.29% 80.8 69.89) · oklch(62.8% 0.2577 29.23) · CSS name: red
El contraste sobre blanco es de 3.99:1, así que el rojo puro no cumple WCAG AA para texto normal.
Cuándo usar Conversor de colores
Úsalo al pasar colores entre herramientas de diseño y CSS, cuando necesites un modelo perceptual como OKLCH para crear paletas o para comprobar rápidamente el contraste de un texto. No uses la salida CMYK para pruebas de impresión profesionales: la impresión real necesita un perfil de color ICC, que esta fórmula simple ignora.
Cómo funciona Conversor de colores
Cada entrada se convierte en canales sRGB con codificación gamma más alfa. HSL, HSV y HWB son las transformaciones cilíndricas estándar de sRGB; CMYK usa la fórmula simple independiente del dispositivo K = 1 − max(R,G,B). Para LAB, los valores sRGB se linealizan, se convierten a CIE XYZ (D65), se adaptan cromáticamente a D50 con la matriz de Bradford y se pasan a CIELAB, exactamente como en CSS Color 4. OKLCH usa las matrices OKLab de Björn Ottosson sobre sRGB lineal. Los valores solo se redondean para mostrarlos (enteros para RGB, un decimal para HSL/HSV/HWB/CMYK, dos para LAB). El contraste sigue la luminancia relativa de WCAG 2.x: (L1 + 0,05) / (L2 + 0,05).
Casos de Uso Comunes
- Convertir el código HEX de una guía de marca en
hsl()uoklch()para variables CSS - Convertir un valor
rgba()de DevTools en un HEX de 8 dígitos con alfa - Comprobar si un color de texto cumple WCAG AA (4.5:1) sobre fondo blanco
- Encontrar la palabra clave CSS de un valor HEX como
#663399(rebeccapurple) - Obtener porcentajes CMYK aproximados para imprimir en la oficina
Preguntas Frecuentes
¿Por qué el valor LAB difiere del de Photoshop?
Esta herramienta sigue CSS Color 4, que usa el punto blanco D50 con adaptación de Bradford. Algunas aplicaciones muestran LAB respecto a D65, lo que da cifras algo distintas.
¿Qué significa «fuera de la gama sRGB»?
LAB y OKLCH pueden describir colores que una pantalla sRGB normal no puede mostrar. Esas entradas se recortan canal por canal al color representable más cercano, y el aviso indica que los valores HEX/RGB son aproximaciones.
¿Cómo se redondea la relación de contraste?
Se trunca a dos decimales, sin redondear hacia arriba, para que una relación de 4,499 nunca aparezca como si cumpliera 4.5:1.
¿Se conserva el alfa en todos los formatos?
El alfa se conserva en HEX (8 dígitos), rgba(), hsla(), HWB, LAB y OKLCH. HSV y CMYK no tienen canal alfa, y el contraste se calcula para el color opaco.