INNOZONA Tools

Conversor de colores HEX, RGB y HSL

Escribe un color en cualquier formato y obtén el resto al momento. Comprueba si dos colores tienen contraste suficiente para ser accesibles y genera una paleta de tonos lista para CSS.

Se procesa en tu navegador Gratis, sin registro Contraste WCAG Paleta de tonos
Admite 3, 4, 6 u 8 dígitos (con transparencia).
Por ejemplo rgb(100, 55, 217), rgba(100, 55, 217, 0.5) o 100, 55, 217.
Por ejemplo hsl(257, 68%, 53%) o hsl(257 68% 53% / 50%).
Espacio de color perceptual de CSS moderno.
Conversión simple sin perfil de color: para imprenta, pide el valor a tu imprenta.

Comprobador de contraste (WCAG 2)

Texto grande de ejemplo

Texto normal: así se leerá un párrafo con estos colores en tu web.

— relación de contraste

    Texto grande: desde 24 px, o 18,66 px (14 pt) en negrita. Los colores con transparencia se combinan sobre el fondo (y el fondo, sobre blanco).

    Tonos claros y oscuros

    Mezclas del color con blanco (tintes) y con negro (sombras). Pulsa un tono para copiar su HEX.

    Paso a paso: Conversor de colores

    1. Elige o pega un colorUsa el selector o escribe el valor en HEX, RGB o HSL. Los demás formatos se actualizan mientras escribes.
    2. Ajusta la opacidadCon el control de opacidad obtienes los valores con transparencia: HEX de 8 dígitos, RGBA y HSLA.
    3. Comprueba el contrasteElige el color del texto y del fondo y mira si cumplen los niveles AA y AAA de las pautas WCAG.
    4. Copia lo que necesitesCada formato tiene su botón de copiar, y la paleta de tonos se copia como variables CSS.

    Formatos de color: cuándo usar cada uno

    • HEX (#6437D9): el más usado en diseño web. Con 8 dígitos (#6437D980) incluye la transparencia.
    • RGB / RGBA (rgb(100, 55, 217)): rojo, verde y azul de 0 a 255. Lo usan CSS, programas de diseño y muchas librerías.
    • HSL / HSLA (hsl(257, 68%, 53%)): tono, saturación y luminosidad. Muy práctico para crear variaciones de un mismo color a mano.
    • OKLCH (oklch(49.7% 0.228 287.7)): formato moderno de CSS en el que la luminosidad es perceptual. Dos colores con la misma L se ven igual de claros, cosa que no ocurre en HSL.
    • CMYK: cian, magenta, amarillo y negro, para impresión. Aquí se calcula con una fórmula simple sin perfil de color, así que es solo orientativo: el valor real depende del papel y de la imprenta.

    Cómo funciona el comprobador de contraste

    Las pautas de accesibilidad WCAG 2 miden el contraste como la relación entre la luminancia del color más claro y la del más oscuro, de 1:1 (sin contraste) a 21:1 (negro sobre blanco). Exigen:

    • AA: 4,5:1 para texto normal y 3:1 para texto grande (24 px, o 18,66 px en negrita).
    • AAA: 7:1 para texto normal y 4,5:1 para texto grande.
    • Elementos de interfaz (iconos, bordes de campos, botones): 3:1.

    La relación se muestra truncada, no redondeada: un 4,49:1 nunca aparece como 4,5:1 aprobado. Si un color tiene transparencia, primero se mezcla con el fondo, tal como lo vería el usuario.

    Tonos claros y oscuros para tu paleta

    La paleta mezcla tu color con blanco (tintes 100–400) y con negro (sombras 600–900), dejando el original en el 500. Es una forma rápida de obtener fondos suaves, bordes y estados hover coherentes con tu color de marca. Copia la paleta como variables CSS (--color-100 … --color-900) y pégala en tu hoja de estilos.

    Características

    Cinco formatos a la vez

    HEX, RGB, HSL y OKLCH editables o visibles al instante, y CMYK aproximado para impresión.

    Acepta lo que pegues

    Entiende #fff, #6437D980, rgb(100 55 217 / 50%), hsla(...) o simplemente 100, 55, 217.

    Contraste WCAG 2

    Resultados AA y AAA para texto normal, texto grande e interfaz, con vista previa real.

    Paleta lista para CSS

    Nueve tonos de tu color que se copian con un clic como variables CSS.

    Preguntas frecuentes

    ¿Cómo convierto un color HEX a RGB?

    Escribe o pega el código HEX (con o sin #) en el campo HEX y el valor RGB aparece al instante. Cada par de dígitos hexadecimales es un canal: en #6437D9, 64 = 100 de rojo, 37 = 55 de verde y D9 = 217 de azul.

    ¿Qué contraste necesita un texto para ser accesible?

    Para cumplir el nivel AA, que es el que exigen la mayoría de normativas (como la norma europea EN 301 549), el texto normal necesita 4,5:1 y el texto grande 3:1.

    ¿Por qué el CMYK es aproximado?

    Convertir pantalla a impresión de forma exacta requiere un perfil de color (por ejemplo, FOGRA39) que depende del papel y de la máquina. La fórmula simple sirve como punto de partida, pero pide a tu imprenta el valor definitivo.

    ¿Qué es OKLCH y por qué usarlo?

    Es un espacio de color que los navegadores actuales entienden en CSS. Su luminosidad se corresponde con cómo percibimos el color, así que es más fácil crear paletas equilibradas y variaciones accesibles que con HSL.

    ¿Se guardan los colores?

    No. Todo se calcula en tu navegador y nada se envía ni se guarda.

    Actualizado: · Equipo de INNOZONA