Convertidor de Color y Contraste WCAG
Conversión bidireccional entre espacios de color web e impresos, auditoría de luminancia relativa WCAG 2.1 y generación de escalas para design tokens.
rgb(102, 126, 234) • hsl(229°, 76%, 66%) • 100% Alfa
Ajustar canales
Formatos de color convertidos (Copia instantánea)
13 formatos disponibles#667EEA
Código hexadecimal web estándar (Mayúsculas)
#667EEA
Hexadecimal con canal alfa de 8 bits (100%)
rgb(102, 126, 234)
Componentes enteros rojo, verde y azul [0–255]
rgba(102, 126, 234, 1)
Formato de color CSS RGBA estándar con canal alfa
rgb(102 126 234 / 100%)
Sintaxis moderna de CSS Color Module 4 separada por espacios
hsl(229, 76%, 66%)
Tono (0-360°), Saturación (0-100%), Luminosidad (0-100%)
hsla(229, 76%, 66%, 1)
Formato CSS HSLA con transparencia de canal alfa
hsv(229°, 56%, 92%)
Tono, Saturación, Brillo (estándar en Figma y Photoshop)
cmyk(56%, 46%, 0%, 8%)
Modelo de impresión sustractiva cian, magenta, amarillo y negro
~cornflowerblue (#6495ed)
Coincidencia más cercana (Delta: 23)
--color-primary: #667eea;
Declaración de variable CSS lista para usar
bg-[#667eea] text-[#667eea]
Clase de fondo con valor arbitrario de Tailwind CSS
Color(0xFF667EEA)
Entero de color nativo para Flutter/Dart y Android
Flujo de trabajo y operativa
- Introducir o muestrear el color: Escriba un código en el campo HEX (p. ej., #6366f1), introduzca valores numéricos para RGB o HSL, utilice el selector nativo del sistema o active el cuentagotas para tomar una muestra de cualquier píxel de su pantalla.
- Ajustar canales individuales: Modifique los deslizadores de Rojo, Verde, Azul, Tono, Saturación, Luminosidad o transparencia Alfa para examinar transiciones cromáticas intermedias con precisión.
- Copiar código para producción: Haga clic en cualquiera de las tarjetas de salida sincronizadas para copiar al portapapeles formatos HEX de 6 u 8 dígitos, rgba/hsla clásico, sintaxis moderna de CSS Color 4 separada por espacios, HSV, CMYK o nombres W3C.
- Auditar accesibilidad y contraste: Cambie a la pestaña Verificador de contraste WCAG para evaluar combinaciones de texto y fondo frente a los estándares oficiales AA y AAA para texto normal, títulos y componentes interactivos.
- Generar escalas y armonías: Explore la pestaña Matices y sombras para obtener una rampa de luminosidad de 10 niveles orientada a estados de interfaz (hover, active, disabled), o consulte Armonías de color para paletas complementarias, triádicas y análogas.
Especificaciones de espacios de color y sintaxis de canales
Los distintos dispositivos de visualización, motores de renderizado y entornos de diseño gráfico representan el color mediante geometrías y límites de cuantificación específicos:
| Formato | Sintaxis formal | Límites de canal | Base geométrica | Área técnica principal |
|---|---|---|---|---|
| HEX (#RGB / #RRGGBB) | #6366F1 o #6366F1CC | R, G, B: 00–FF (0–255) · Alfa: 00–FF | Codificación de enteros de 8 bits en espacio sRGB | Hojas de estilo web estándar, design tokens, Figma, serialización compacta y eficiente |
| RGB / RGBA (Sintaxis clásica) | rgba(99, 102, 241, 0.85) | R, G, B: 0–255 · Alfa: 0.0–1.0 | Primarios tricromáticos aditivos para pantallas y monitores | Contexto Canvas 2D, buffers de píxeles WebGL, declaraciones clásicas de CSS Nivel 3 |
| HSL / HSLA (Sintaxis clásica) | hsla(239, 84%, 67%, 0.85) | H: 0–360° · S: 0–100% · L: 0–100% · A: 0.0–1.0 | Proyección cilíndrica de coordenadas en doble cono | Ajuste intuitivo de paletas en sistemas de diseño, cálculo programático de luminosidad para temas |
| CSS Color 4 (Sintaxis moderna) | rgb(99 102 241 / 85%) o hsl(239deg 84% 67% / 85%) | Canales separados por espacios con canal alfa delimitado por barra oblicua | Sintaxis unificada de W3C CSS Color Module Level 4 | Hojas de estilo modernas, composición desacoplada de variables CSS personalizadas |
| HSV / HSB | hsv(239°, 59%, 95%) | H: 0–360° · S: 0–100% · V: 0–100% | Espacio geométrico cilíndrico de cono invertido simple | Software de ilustración digital, selectores de color en Figma, Adobe Photoshop e Illustrator |
| CMYK (Sustractivo) | device-cmyk(59% 58% 0% 5%) | C, M, Y, K: 0–100% | Aproximación por absorción de luz para cuatricromía física sobre papel | Preimpresión comercial, packaging físico, estimación de tintas para offset e imprenta |
| Nombres W3C (Named Colors) | indigo, slateblue, tomato | 148 identificadores estándar predefinidos por W3C | Diccionario normativo de W3C SVG 1.0 / CSS Color Module Level 3 | Prototipado rápido, marcado SVG, estilos semánticos en línea y pruebas unitarias visuales |
Fundamentos y lógica de conversión de color paso a paso
En lugar de memorizar fórmulas matemáticas abstractas, comprenda cómo se estructuran y transforman los datos de color entre los diferentes entornos técnicos:
1. De HEX a RGB: Segmentar y convertir pares
Base 16 a Base 10Cada código hexadecimal de 6 dígitos se divide limpiamente en tres pares de dos caracteres para Rojo, Verde y Azul. Tomemos como referencia #6366F1:
Para códigos de 8 dígitos (#6366F1CC), los dos caracteres finales CC equivalen a 204. Dividir 204 entre 255 resulta en 0.80 (80% de opacidad), generando rgba(99, 102, 241, 0.8).
2. HSL: El modelo intuitivo para el ojo humano
Tono, Sat, LumMientras que RGB modula subpíxeles físicos de hardware, HSL modela la forma en que los diseñadores conceptualizan las paletas:
- Tono (0–360°): Posición angular en la rueda cromática. 0° es Rojo, 120° es Verde, 240° es Azul. Al girar el ángulo se altera la familia cromática sin cambiar la energía del color.
- Saturación (0–100%): 0% es escala de grises absoluta, 100% representa el pigmento puro y vivido.
- Luminosidad (0–100%): 0% es negro absoluto, 50% es el tono estándar y 100% es blanco puro.
Ventaja práctica en UI: Para crear un estado hover de un botón, basta con incrementar la Luminosidad un 10% (66% → 76%). No se requiere calibrar tres valores RGB independientes.
3. Por qué el ojo humano percibe el verde más brillante
Luminancia fotópicaEl ojo humano no percibe todas las longitudes de onda con la misma intensidad lumínica. Nuestra retina posee una sensibilidad biológica máxima en la banda del verde:
Esto explica por qué el texto blanco sobre fondo amarillo verdoso brillante es prácticamente ilegible (no supera las pruebas de contraste), mientras que sobre fondo azul puro se lee con gran nitidez. Los cálculos de WCAG aplican exactamente estas ponderaciones fisiológicas.
4. RGB en pantalla frente a CMYK en imprenta
Luz vs TintaLa diferencia entre el mundo digital y los materiales impresos radica en la física fundamental de la luz:
- Pantallas (RGB aditivo): Los píxeles emiten luz activa. La suma de Rojo, Verde y Azul a máxima potencia genera luz blanca pura.
- Imprenta (CMYK sustractivo): El papel refleja la luz del entorno. Las capas de tinta Cian, Magenta, Amarilla y Negra absorben longitudes de onda.
Conclusión técnica: Los azules eléctricos y cianes fluorescentes visibles en paneles OLED se sitúan fuera del espacio imprimible de CMYK. La conversión a CMYK restringe dichos valores dentro del límite reproducible de la tinta.
Estándares de contraste WCAG 2.1 y umbrales de accesibilidad
Las Directrices de Accesibilidad para el Contenido Web (WCAG) miden la claridad con la que el texto se separa del fondo. Índices de contraste adecuados garantizan legibilidad bajo luz solar directa, en pantallas con poco brillo y para personas con dificultades visuales:
| Nivel de conformidad | Relación exigida | Elementos de interfaz destinatarios | Directiva de la especificación |
|---|---|---|---|
| Texto normal WCAG AA | 4.5 : 1 | Cuerpo de texto, párrafos de artículos, celdas de tabla, etiquetas de formularios (< 18pt regular o < 14pt negrita) | Umbral mínimo obligatorio para todas las plataformas digitales según ADA, Sección 508 y norma europea EN 301 549. |
| Texto grande WCAG AA | 3.0 : 1 | Títulos principales, encabezados H1/H2, titulares de banner (≥ 18pt / 24px regular o ≥ 14pt / 18.67px negrita) | Requisito reducido debido a un mayor grosor de trazo tipográfico y peso óptico perceptible. |
| Componentes e iconos UI WCAG AA | 3.0 : 1 | Bordes de campos de entrada, botones de radio, casillas de verificación, anillos de foco activo, pictogramas informativos | Garantiza que los límites de interacción y los elementos gráficos funcionales se distingan con claridad sobre el fondo. |
| Texto normal mejorado WCAG AAA | 7.0 : 1 | Lectura prolongada de alta densidad, plataformas médicas, documentación administrativa gubernamental | Estándar internacional de legibilidad óptima para usuarios con visión reducida o baja agudeza visual severa. |
| Texto grande mejorado WCAG AAA | 4.5 : 1 | Encabezados destacados y banners de gran formato que requieren contraste reforzado | Proporciona una lectura descansada y sin fatiga visual en entornos con iluminación ambiental adversa o luz solar directa. |
Regla de capas semitransparentes y transparencia alfa
Cuando el texto o el fondo poseen opacidad parcial (por ejemplo, 80% de canal alfa), el color de la superficie subyacente se entremezcla ópticamente. Las auditorías de contraste deben evaluar el color final resultante sobre la pantalla y no únicamente el valor de primer plano aislado. Si una combinación no supera el test, la solución más eficaz es desplazar la Luminosidad (L) hacia el 0% (más oscuro) o hacia el 100% (más claro).
Arquitectura de Design Tokens e integración en producción
Las aplicaciones web modernas exportan tokens cromáticos mediante propiedades personalizadas de CSS o clases utilitarias. A continuación se presentan patrones recomendados para sistemas de diseño:
/* Sintaxis moderna de CSS Color Module Level 4 */
.badge {
/* HEX de 8 dígitos con canal alfa del 80% */
background-color: #6366f1cc;
/* RGB separado por espacios con barra para alfa */
color: rgb(255 255 255 / 95%);
border: 1px solid rgb(99 102 241 / 0.4);
/* HSL moderno con unidades angulares explícitas en grados */
outline-color: hsl(239deg 84% 67% / 0.5);
}/* Arquitectura de tokens de diseño con canales alfa dinámicos (tokens.css) */
:root {
/* Almacena tripletas de canales puros para permitir composición con opacidad variable */
--color-primary-rgb: 99 102 241;
--color-surface-rgb: 30 41 59;
}
.panel-container {
/* Compone opacidad dinámica sin alterar los tokens base del sistema */
background-color: rgb(var(--color-surface-rgb) / 0.85);
border: 1px solid rgb(var(--color-primary-rgb) / 0.3);
box-shadow: 0 4px 24px rgb(var(--color-primary-rgb) / 0.15);
}/* Sintaxis de colores relativos de CSS Color 4 (CSS Relative Color Syntax) */
:root {
--brand: #6366f1;
}
.button-hover {
/* Ajusta la luminosidad dinámicamente (+10%) manteniendo el tono y la saturación originales */
background-color: hsl(from var(--brand) h s calc(l + 10%));
}
.button-subtle {
/* Modifica la saturación al 35% y asigna un 15% de opacidad */
background-color: hsl(from var(--brand) h 35% l / 0.15);
}// tailwind.config.js - Configuración de tokens con tripletas RGB
module.exports = {
theme: {
extend: {
colors: {
brand: {
500: '#6366f1',
600: '#4f46e5',
// Soporte nativo para clases de utilidad con opacidad: bg-brand-dynamic/80
dynamic: 'rgb(var(--color-primary-rgb) / <alpha-value>)',
},
},
},
},
};Matices, sombras y armonías cromáticas
Los sistemas de interfaz escalables se sustentan en rampas algorítmicas de luminosidad y rotaciones angulares precisas sobre el círculo cromático:
Rampas de luminosidad (Matices frente a Sombras)
Un Matiz (Tint) se calcula interpolando los canales RGB hacia el blanco puro (#FFFFFF), incrementando la claridad. Una Sombra (Shade) interpola hacia el negro puro (#000000). En bibliotecas de componentes, los matices (50–200) funcionan como fondos de tarjetas, estados hover y badges, mientras que las sombras (700–900) brindan contraste para texto y bordes.
Rotaciones angulares de armonía
Las relaciones armónicas se establecen fijando la Saturación y la Luminosidad mientras se gira el Tono H alrededor de los 360 grados del círculo de color:
- Complementario: Polo diametralmente opuesto en
(H + 180°) % 360 - Análogo: Vecinos directos adyacentes en
(H ± 30°) % 360 - Triádico: Triángulo equilátero en
(H + 120°) % 360y(H + 240°) % 360 - Tetrádico: Armonía cuadrangular en incrementos de +90°, +180° y +270°
Valores de referencia en paletas de interfaz
Métricas fotométricas y análisis de contraste para colores representativos utilizados en sistemas de diseño web:
| Muestra | Nombre del token | HEX | RGB | HSL | Lum. relativa | Sobre #FFFFFF | Sobre #000000 |
|---|---|---|---|---|---|---|---|
| Índigo Tailwind | #6366F1 | rgb(99, 102, 241) | hsl(239, 84%, 67%) | 0.181 | 4.88:1 (AA) | 4.30:1 (UI) | |
| Verde esmeralda | #10B981 | rgb(16, 185, 129) | hsl(160, 84%, 39%) | 0.363 | 2.54:1 (No apto) | 8.26:1 (AAA) | |
| Rosa carmesí | #F43F5E | rgb(244, 63, 94) | hsl(350, 89%, 60%) | 0.245 | 3.56:1 (Grande) | 5.90:1 (AA) | |
| Ámbar dorado | #F59E0B | rgb(245, 158, 11) | hsl(38, 92%, 50%) | 0.443 | 2.13:1 (No apto) | 9.86:1 (AAA) | |
| Azul cielo | #0EA5E9 | rgb(14, 165, 233) | hsl(199, 89%, 48%) | 0.339 | 2.70:1 (No apto) | 7.78:1 (AAA) | |
| Pizarra 800 | #1E293B | rgb(30, 41, 59) | hsl(217, 33%, 17%) | 0.024 | 14.18:1 (AAA) | 1.48:1 (No apto) | |
| Blanco puro | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | 1.000 | 1.00:1 (No apto) | 21.00:1 (AAA) | |
| Negro puro | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | 0.000 | 21.00:1 (AAA) | 1.00:1 (No apto) |
Frequently Asked Questions
¿Cómo convertir un código de color HEX a RGB o RGBA?
Un color hexadecimal de 6 dígitos (#RRGGBB) está compuesto por tres pares de números en base 16 que representan Rojo, Verde y Azul. Para convertir a RGB, se procesa cada par a su valor entero decimal de 0 a 255 (por ejemplo, en #6366F1: 63 hex = 99 dec, 66 hex = 102 dec, F1 hex = 241 dec, dando como resultado rgb(99, 102, 241)). En la notación abreviada de 3 dígitos (#RGB), se duplica cada carácter (#F09 equivale a #FF0099). En códigos de 8 dígitos (#RRGGBBAA), se divide el cuarto byte entre 255 para calcular el canal alfa decimal (por ejemplo, CC hex = 204 dec -> 204 / 255 = 0.8 -> rgba(99, 102, 241, 0.8)).
¿Por qué los diseñadores y desarrolladores prefieren HSL antes que RGB en sistemas de diseño?
RGB es un modelo físico aditivo vinculado al hardware de la pantalla, lo que dificulta variar el brillo o la saturación sin recalcular manualmente las tres componentes primarias. HSL (Tono, Saturación, Luminosidad) separa el ángulo de color en la rueda cromática (0–360°) de la intensidad y la claridad. Esto permite a los desarrolladores derivar programáticamente escalas de color completas (50–950), estados hover, bordes interactivos y modos oscuros simplemente incrementando o reduciendo el porcentaje de Luminosidad (L) mientras se preserva inalterado el tono de la marca.
¿Cuál es la diferencia técnica entre los modelos HSL y HSV (HSB) en Figma frente a CSS?
Aunque ambos proyectan RGB sobre coordenadas cilíndricas, definen la claridad de manera divergente. En HSL, el color cromático puro y saturado se ubica exactamente al 50% de Luminosidad, y el 100% de Luminosidad representa siempre blanco puro. En HSV/HSB (utilizado en Figma, Sketch y Adobe Photoshop), el 100% de Valor (V) representa la intensidad máxima del color puro, y el blanco solo se alcanza cuando la Saturación desciende al 0% con un 100% de Valor. Como CSS admite nativamente HSL pero no HSV/HSB, las coordenadas copiadas de selectores HSB de Figma no pueden pegarse directamente en hsl() sin una conversión matemática.
¿Cuál es la fórmula matemática del contraste WCAG 2.1 y cuáles son los umbrales de conformidad AA y AAA?
WCAG 2.1 define la relación de contraste mediante la ecuación (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia relativa del color más claro y L2 la del más oscuro, calculadas a partir de los canales sRGB linealizados. La constante 0.05 compensa la dispersión lumínica ambiental en el ojo humano. En cuanto a umbrales: el Nivel AA exige al menos 4.5:1 para texto normal (< 18pt o < 14pt negrita) y 3.0:1 para texto grande (≥ 18pt o ≥ 14pt negrita) y componentes UI interactivos. El Nivel AAA requiere al menos 7.0:1 para texto normal y 4.5:1 para texto grande.
¿Cómo funciona la sintaxis moderna de CSS Color Module Level 4 con barra oblicua y qué soporte tiene?
La especificación moderna CSS Color 4 sustituye los separadores por coma por espacios en blanco y utiliza una barra inclinada para declarar el canal alfa: rgb(99 102 241 / 80%) o hsl(239deg 84% 67% / 0.8). Permite indicar el alfa indistintamente como número decimal (0.8) o porcentaje (80%), admite unidades angulares explícitas (deg, rad, turn) en el tono, y unifica rgb() y rgba() en una sola función universal. Es compatible con el 100% de los navegadores modernos actuales (Chrome 65+, Safari 12.1+, Firefox 52+, Edge 79+).
¿Por qué varían los colores al convertir de RGB en pantalla a CMYK para imprenta?
Las pantallas digitales emiten luz aditiva RGB con un espectro cromático amplio, mientras que la imprenta comercial utiliza tintas sustractivas físicas CMYK sobre papel. La fórmula matemática básica K = 1 - max(R,G,B) es una estimación teórica en pantalla. La producción impresa real requiere gestión de color basada en perfiles ICC calibrados (como GRACoL o FOGRA39) y límites de cobertura total de tinta (TAC). Los tonos cian luminosos o azules eléctricos que rebasan la gama imprimible son comprimidos al límite del espacio físico de la tinta.
¿Cómo gestiona la notación hexadecimal de 8 dígitos (#RRGGBBAA) el canal alfa?
Un código hexadecimal de 8 dígitos añade un byte de dos caracteres hexadecimales al formato estándar de 6 dígitos (#RRGGBB). Este byte va desde 00 (0% de opacidad / totalmente transparente) hasta FF (100% de opacidad / totalmente opaco). El porcentaje de opacidad se obtiene dividiendo el valor decimal del byte entre 255 (por ejemplo, #6366f180 tiene 80 hex = 128 dec, lo que equivale a 128 / 255 = 50.2% de opacidad). Todos los navegadores modernos soportan #RRGGBBAA de forma nativa, así como la variante abreviada de 4 dígitos #RGBA.
¿Cómo determina la herramienta el nombre de color CSS W3C más cercano?
El motor evalúa las 148 definiciones estándar de colores con nombre de W3C SVG/CSS mapeadas en el espacio cartesiano tridimensional RGB. Para cualquier color seleccionado, calcula la distancia euclídea d = sqrt((R1 - R2)^2 + (G1 - G2)^2 + (B1 - B2)^2) respecto a cada entrada del diccionario. Aquel color con la menor distancia matemática se devuelve como la coincidencia más próxima, siendo cero una coincidencia exacta.
¿Cuál es la diferencia entre el espacio sRGB y Display P3 en el desarrollo web moderno?
sRGB es el espacio de color estándar histórico de la web con una gama cromática moderada. Display P3 abarca un volumen de color aproximadamente un 50% mayor, ofreciendo verdes y rojos notablemente más vivos y profundos en pantallas modernas (Apple Retina, monitores HDR, dispositivos OLED). Con CSS Color 4, los desarrolladores pueden emplear la función color(display-p3 r g b) para renderizar matices hipervibrantes sin perder la compatibilidad con dispositivos sRGB convencionales.
¿Cómo se generan programáticamente escalas de matices (tints) y sombras (shades) en sistemas UI?
Un matiz (tint) se genera mediante interpolación lineal de los canales RGB originales hacia el blanco puro (#FFFFFF), elevando la luminosidad en pasos regulares (por ejemplo, 10%). Una sombra (shade) interpola los valores hacia el negro puro (#000000). En sistemas de diseño como Tailwind o Radix, los matices claros (50–200) se destinan a fondos de tarjetas, estados hover y badges, mientras que las sombras profundas (700–900) configuran bordes activos, textos principales y contrastes elevados.