Conversor de colores
Convierte colores entre HEX, RGB, HSL y OKLCH con vista previa
Sobre esta herramienta
Introduce un color en cualquier notación común — #hex, rgb(), hsl() o un color CSS con nombre — y obtén todos los formatos a la vez: HEX, RGB, HSL y OKLCH, junto a una muestra en vivo. Los canales alfa se preservan entre formatos, y la salida usa la sintaxis CSS moderna (canales separados por espacios) que se pega limpiamente en las hojas de estilo actuales.
OKLCH está incluido porque es hacia donde va el color en CSS: a diferencia de HSL, su eje de luminosidad es perceptualmente uniforme, así que dos colores con la misma L realmente se ven igual de brillantes, y ajustar el matiz no cambia accidentalmente el brillo percibido. Convertir una paleta existente a OKLCH es el primer paso para construir escalas de color consistentes.
Las matemáticas de conversión corren localmente usando las transformaciones publicadas sRGB↔OKLab, y los valores hacen el viaje redondo: el RGB que obtienes de una entrada HSL es exactamente lo que el navegador computaría.
Preguntas frecuentes
- ¿Por qué los valores de luminosidad de HSL y OKLCH no coinciden?
- La luminosidad de HSL es una propiedad geométrica de los valores RGB, no de la visión humana — el amarillo hsl(60 100% 50%) se ve mucho más brillante que el azul hsl(240 100% 50%) pese a tener la misma L. El eje L de OKLCH está diseñado para coincidir con la percepción, así que L igual significa brillo aparente igual. Esa discrepancia es toda la razón de existir de OKLCH.
- ¿Qué significa el valor alfa y dónde va en cada formato?
- Alfa es la opacidad, de 0 (transparente) a 1 (opaco). En hex de 8 dígitos es el byte final (#RRGGBBAA); en la sintaxis funcional moderna sigue a una barra: rgb(76 141 255 / 0.5). Este conversor lleva el alfa a través de todos los formatos automáticamente.
- ¿Todo color OKLCH puede mostrarse en sRGB?
- No — OKLCH cubre gamas amplias, y algunas combinaciones de croma/luminosidad no tienen equivalente sRGB. Convertir desde sRGB (como hace esta herramienta) siempre queda representable; en el otro sentido, los colores fuera de gama deben recortarse o mapearse, y por eso un verde P3 vívido se ve más apagado en una pantalla sRGB.
- ¿Por qué rgb(76 141 255) separado por espacios en lugar de comas?
- El CSS Color Module Level 4 estandarizó los canales separados por espacios con un /alpha opcional, y todo navegador moderno lo soporta. La forma con comas sigue funcionando, pero la forma con espacios es la que usan las especificaciones nuevas (y esta herramienta).