Herramientas para desarrolladores · 16 herramientas

Conversor de colores

Escribe un color en HEX, RGB, HSL, HWB u OKLCH, o elígelo con el selector, para obtenerlo en todos los demás formatos. La comprobación de contraste indica si el texto sobre ese color cumple los niveles WCAG.

ENTRADA

HEX, rgb(), hsl(), hwb() u oklch(), con o sin transparencia

Leído como HEX

RESULTADO

  • HEX#2445D6
  • RGBrgb(36, 69, 214)
  • HSLhsl(229, 71%, 49%)
  • HWBhwb(229 14% 16%)
  • OKLCHoklch(47.27% 0.2232 266.62)

CONTRASTE (WCAG 2)

  • Con blanco

    7,24:1

    • AA: cumple
    • AA texto grande: cumple
    • AAA: cumple
    • AAA texto grande: cumple

  • Con negro

    2,89:1

    • AA: no cumple
    • AA texto grande: no cumple
    • AAA: no cumple
    • AAA texto grande: no cumple

  • Con #F5F6F8

    6,70:1

    • AA: cumple
    • AA texto grande: cumple
    • AAA: no cumple
    • AAA texto grande: cumple

Funciona por completo en tu navegador. Nada de lo que escribes se envía a ningún servidor.

Cómo convertir un código de color

  1. Escribe un color

    Escribe o pega un valor como #2445D6, rgb(36, 69, 214) u oklch(47% 0.22 267), o usa el selector de color.

  2. Copia el formato que necesites

    HEX, RGB, HSL, HWB y OKLCH se muestran juntos, cada uno con su propio botón de copiar.

  3. Comprueba el contraste

    Consulta la relación de contraste con el blanco, el negro y un color que elijas, con los resultados de WCAG AA y AAA.

Un color, cinco notaciones

HEX y RGB describen las partes roja, verde y azul de un color. HSL y HWB lo describen por su tono, que es más fácil de ajustar a mano. OKLCH es un formato CSS más reciente cuya luminosidad corresponde a lo claros que parecen los colores, así que las paletas creadas con él quedan equilibradas. La transparencia se conserva en todos los formatos.

Contraste y WCAG

WCAG exige una relación de contraste de al menos 4,5:1 para el texto normal (AA) y de 7:1 para AAA. El texto grande, a partir de unos 24px o de 19px en negrita, necesita 3:1 para AA y 4,5:1 para AAA. Las relaciones se redondean hacia abajo, así que un color que aparece como aprobado cumple de verdad.

Preguntas frecuentes

¿Por qué mi color OKLCH se ve distinto?

OKLCH puede describir colores que las pantallas con la gama sRGB no pueden mostrar. Esos colores se ajustan a la gama reduciendo su croma y manteniendo la luminosidad y el tono, y una nota te avisa cuando ocurre.

¿Cómo se comprueba el contraste de los colores transparentes?

Un color transparente se dibuja primero sobre blanco, tal como se vería en una página blanca, y se compara ese resultado.

¿Se envía algo a un servidor?

No. Todas las conversiones y comprobaciones de contraste se hacen en tu navegador.