Cómo convertir HEX a RGB y saber si tu texto pasa el contraste WCAG
Si alguna vez has copiado un código HEX de un diseño y no sabías qué RGB o HSL le corresponde — o si te han rechazado un color por «bajo contraste» — esta guía explica, con ejemplos numéricos, cómo funcionan las conversiones de color y el cálculo de contraste WCAG que usa el convertidor de color de ToolPico.
Respuesta cortaUn HEX como #7C3AED se divide en tres bloques de dos caracteres (7C, 3A, ED) y cada uno se convierte de base 16 a base 10: 124, 58, 237, es decir rgb(124, 58, 237).
El sistema hexadecimal usa 16 símbolos (0–9 y A–F) en lugar de los 10 habituales, así que cada par de caracteres puede representar valores de 0 a 255 — exactamente el rango que necesita un canal de color en pantalla. La forma abreviada de tres caracteres (#RGB) se expande duplicando cada carácter: #F0A se convierte en #FF00AA. Si el código tiene ocho caracteres (#RRGGBBAA), los dos últimos representan el canal alfa, es decir la transparencia.
Color de ejemplo
HEX
RGB
Violeta
#7C3AED
rgb(124, 58, 237)
Verde azulado
#0D9488
rgb(13, 148, 136)
Rojo carmín
#E11D48
rgb(225, 29, 72)
En el convertidor, basta con pegar el HEX o mover el selector de color: los campos RGB, HSL, HSV y CMYK se actualizan al instante, junto con la salida lista para copiar en CSS, SCSS, Tailwind, Swift, Android/Kotlin o Flutter.
HSL, HSV y cuándo usar cada uno
Respuesta cortaHSL (Tono, Saturación, Luminosidad) es más intuitivo para aclarar u oscurecer un color manteniendo su tono; HSV/HSB (Tono, Saturación, Valor) es el que suelen usar los selectores de color de las apps de diseño porque «vivo y brillante» resulta más fácil de ajustar visualmente.
Ambos modelos describen el mismo espacio de color sRGB que RGB, solo cambia cómo se organiza matemáticamente. En HSL, una Luminosidad del 50% da el color puro, 100% da blanco y 0% da negro. En HSV, subir el Valor al máximo da el color más vivo, y hay que bajar la Saturación para acercarse al blanco. CSS admite directamente hsl() y hsla(), lo que hace muy cómodo crear variantes más claras u oscuras de un mismo tono sin recalcular el HEX a mano.
Dato práctico: si necesitas 5 tonos de un mismo azul para un sistema de diseño, fija el Tono y la Saturación en HSL y solo cambia la Luminosidad (por ejemplo 20%, 35%, 50%, 65%, 80%) — es más rápido que ajustar RGB a mano.
Contraste WCAG: qué ratio necesitas
Respuesta cortaEl texto de tamaño normal necesita un ratio de contraste WCAG de al menos 4,5:1 para el nivel AA, y 7:1 para AAA. El texto grande (18pt o más, o 14pt en negrita) baja a 3:1 y 4,5:1 respectivamente.
El cálculo parte de la luminancia relativa de cada color, un valor entre 0 (negro) y 1 (blanco) obtenido a partir de los canales sRGB linearizados. El ratio de contraste es (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia del color más claro y L2 la del más oscuro; el resultado va de 1:1 (sin contraste) a 21:1 (negro sobre blanco). El comprobador de la herramienta hace este cálculo al instante para tu par de colores y marca cada umbral como superado o no.
Ejemplo (hipotético)
Ratio aprox.
AA texto normal
AAA texto normal
Blanco sobre violeta #7C3AED
~4,9:1
Aprueba
No aprueba
Gris claro sobre blanco
~1,6:1
No aprueba
No aprueba
Negro sobre blanco
21:1
Aprueba
Aprueba
Estos valores son ejemplos ilustrativos para entender el orden de magnitud; usa siempre el comprobador con tus colores reales antes de decidir una combinación de marca.
Cómo se construyen las paletas de color
Respuesta cortaUna paleta complementaria usa el tono opuesto (H+180°) para contraste fuerte; una análoga usa tonos vecinos (H±30°) para armonía; una triádica reparte tres tonos uniformemente (H, H+120°, H+240°) para variedad equilibrada.
Tintes y matices: se obtienen manteniendo el Tono y la Saturación fijos en HSL y solo subiendo (tinte, más claro) o bajando (matiz, más oscuro) la Luminosidad — es la técnica más simple para generar una escala de un mismo color.
Por ejemplo, si tu color de marca es un violeta con Tono 262°, la paleta complementaria tomará el Tono 82° (un amarillo verdoso), útil para un botón de llamada a la acción que destaque sobre un fondo de marca. La paleta análoga usará tonos alrededor de 232° y 292°, dando variaciones suaves para fondos o ilustraciones sin romper la coherencia visual. El convertidor genera las cuatro paletas automáticamente al elegir un color, y también permite extraer una paleta directamente desde una imagen subida, procesada localmente en el navegador.
Convierte y comprueba tu contraste ahora
HEX, RGB, HSL, HSV, CMYK, OKLCH, contraste WCAG y paletas — todo gratis, en tu navegador.
Un código HEX se escribe #RRGGBB, y cada bloque de dos caracteres es un canal de color en base 16. Para convertir, cada bloque se pasa a base 10: por ejemplo #7C3AED da 7C=124, 3A=58, ED=237, es decir rgb(124, 58, 237). El convertidor de color de ToolPico hace este cálculo al instante y muestra también HSL, HSV y CMYK.
¿Qué ratio de contraste necesito para que el texto sea accesible?
Según WCAG 2.1, el texto de tamaño normal necesita un ratio AA mínimo de 4,5:1, y AAA necesita al menos 7:1. Para texto grande (unos 18pt, o 14pt en negrita), los umbrales bajan a 3:1 (AA) y 4,5:1 (AAA). Introduce tu color de texto y de fondo en el comprobador de contraste para ver el ratio exacto y si aprueba cada nivel.
¿Qué diferencia hay entre una paleta complementaria y una análoga?
Una paleta complementaria toma el tono exactamente opuesto al color base (H+180°) y crea un contraste fuerte, útil para botones o acentos. Una paleta análoga usa tonos vecinos (H±30°) y da un aspecto armonioso, típico de fondos o ilustraciones. Una paleta triádica reparte tres tonos uniformemente en la rueda (H, H+120°, H+240°) para más variedad manteniendo el equilibrio.
¿Por qué mi color se ve distinto en la pantalla y en la impresión?
La pantalla usa un modelo aditivo (RGB/HEX) que añade luz, mientras que la impresión usa un modelo sustractivo (CMYK) que añade tinta. Algunos colores vivos que muestra una pantalla no pueden reproducirse igual con tinta, así que la conversión HEX→CMYK es siempre una aproximación matemática. Para resultados de impresión exactos conviene usar un perfil ICC o una referencia Pantone.
¿Puedo extraer una paleta de colores desde una imagen?
Sí. El convertidor de color de ToolPico permite subir una imagen y extraer sus colores dominantes directamente en el navegador (usando Canvas), sin subir el archivo a ningún servidor. Es útil para tomar la paleta de un logotipo, una foto de producto o una captura de pantalla y reutilizarla en un diseño.
Nota: esta guía y la herramienta usan fórmulas estándar del espacio de color sRGB y del algoritmo de contraste WCAG 2.1; los ejemplos numéricos de las tablas son ilustrativos para explicar el orden de magnitud, no una certificación de accesibilidad. El contenido es solo informativo — para decisiones de marca o cumplimiento normativo, verifica siempre con la herramienta y con tus propios colores exactos.