Conversor de colores HEX a RGB, HSL y OKLCH online

Qué es

HEX en la hoja de estilos, RGB en la herramienta de diseño, HSL u OKLCH en la paleta: los valores de color no paran de cambiar de forma. Escribe un color en cualquiera de estos formatos y esta herramienta te muestra a la vez HEX, RGB, HSL y OKLCH, una vista previa del color y su contraste sobre fondo blanco y negro.

Cómo se usa

1. Escribe un color o usa el selector que hay junto a la entrada. Ejemplos: #1e90ff, rgb(30 144 255), hsl(210 100% 56%), oklch(0.65 0.19 250).
2. Lee los valores HEX, RGB, HSL y OKLCH de abajo y copia el que necesites.
3. En la sección de contraste verás la relación sobre blanco y sobre negro, y si cumple AA y AAA. Si tu diseño usa otro fondo, escríbelo en Color de fondo para comprobar esa combinación exacta.
4. Un color con transparencia se muestra como HEX de 8 dígitos, rgba(), hsla() y con la forma / alpha.

Cómo funciona

• La entrada admite HEX (3, 4, 6 u 8 dígitos, con # opcional), los 148 nombres de CSS Color 4 (tomato, rebeccapurple, en mayúsculas o minúsculas) y transparent, rgb()/rgba() (sintaxis con comas o con espacios, se admiten porcentajes), hsl()/hsla() y oklch().
• OKLCH usa las matrices estándar de la definición de OKLab de Björn Ottosson (2020). El sRGB se linealiza y pasa por las raíces cúbicas LMS para obtener L, a y b; C es la longitud de (a, b) y H su ángulo.
• La precisión de salida es de un decimal para HSL, cuatro para L y C de OKLCH y dos para H, suficiente para que al volver a HEX se obtenga exactamente el valor inicial.
• Una entrada OKLCH fuera de la gama sRGB se limita canal a canal a 0-255 y se muestra un aviso.
• El contraste sigue la luminancia relativa de WCAG 2.x. La relación mostrada se redondea a dos decimales, pero el resultado de cumple o no cumple usa el valor sin redondear, así que 4.499 nunca aparece como un 4.5 aprobado.

Ejemplos

Notas

• Para el texto del cuerpo, toma AA normal (4.5:1) como mínimo. El texto grande, es decir, de 18 pt o más, o de 14 pt en negrita, solo necesita 3:1 para AA.
• No confíes solo en el color para transmitir un significado; añade un icono o una etiqueta. La comprobación de contraste solo mide la diferencia de luminosidad entre el texto y el fondo.