Estudio de Paletas y Accesibilidad de Color
Crea paletas desde cero o imágenes, valida contraste WCAG 2.2, genera correcciones accesibles, simula daltonismo y exporta a CSS, Tailwind y JSON.
- Verificación rigurosa de luminancia relativa y contraste WCAG 2.2 (AA, AAA y no textual)
- Corrección de color automatizada en espacio OKLCH con distancia mínima para preservar el tono
- Extracción de paletas en navegador con algoritmo Median Cut sin subidas al servidor
- Simulación de daltonismo (protanopía, deuteranopía, tritanopía, acromatopsia) en componentes reales
- Exportación en variables CSS, SCSS, Tailwind CSS, Design Tokens JSON, SVG y PNG
Start From
Color Inspector
Color base (HEX, RGB, HSL, OKLCH)
#4F46E5
rgb(79, 70, 229)
hsl(243, 75%, 59%)
hsv(243, 69%, 90%)
oklch(0.5106 0.2301 277)
Muestras de la paleta
8 colorsPrimary Indigo
Sky Blue
Amber Accent
Text Gray 900
Muted Gray 500
White Background
Surface Gray 100
Border Gray 200
Verificación de Contraste WCAG 2.2
WCAG 2.2 Success Criterion 1.4.3 (Contrast Minimum) & 1.4.6 (Enhanced)
Passes WCAG AA for normal & large text
Large Headline (18pt Bold / 24px)
This is regular body text preview (16px / 1rem). Ensure high readability for all users, including those with low vision or varying environmental light conditions.
Sugerencias accesibles (cambio mínimo OKLCH)
Perceptually uniform OKLCH binary search for minimal color distortion (lowest ΔE)
Preview Text
Contrast: 18.63:1
Palette Contrast Matrix
Cross-audit all foreground and background combinations across your palette. Click any cell to test.
| FG ↓ \ BG → | 4F46E5 | 0EA5E9 | F59E0B | 111827 | 6B7280 | FFFFFF | F3F4F6 | E5E7EB |
|---|---|---|---|---|---|---|---|---|
#4F46E5 | — | 2.27 | 2.93 | 2.82 | 1.3 | 6.29 | 5.71 | 5.08 |
#0EA5E9 | 2.27 | — | 1.29 | 6.4 | 1.74 | 2.77 | 2.52 | 2.24 |
#F59E0B | 2.93 | 1.29 | — | 8.26 | 2.25 | 2.15 | 1.95 | 1.73 |
#111827 | 2.82 | 6.4 | 8.26 | — | 3.67 | 17.74 | 16.12 | 14.33 |
#6B7280 | 1.3 | 1.74 | 2.25 | 3.67 | — | 4.83 | 4.39 | 3.9 |
#FFFFFF | 6.29 | 2.77 | 2.15 | 17.74 | 4.83 | — | 1.1 | 1.24 |
#F3F4F6 | 5.71 | 2.52 | 1.95 | 16.12 | 4.39 | 1.1 | — | 1.13 |
#E5E7EB | 5.08 | 2.24 | 1.73 | 14.33 | 3.9 | 1.24 | 1.13 | — |
Vista previa de componentes
Test theme colors in realistic UI layouts with WCAG SC 1.4.1 compliance
Analytics Overview
Updated 5 minutes ago
Total Users
24,592
Conversion Rate
3.48%
Error Incidents
2
Simulación de deficiencias visuales de color
Test how color vision deficiency affects your palette and chart readability
Deuteranopia (Green-blind)
Medium-wavelength (M) cone absence; difficulties distinguishing red and green.
* Simulación matemática aproximada. La percepción individual puede variar.
Palette Simulation
#4C4CC6
orig: #4F46E5
#6A60D8
orig: #0EA5E9
#DAE05B
orig: #F59E0B
#141323
orig: #111827
#6E6D7C
orig: #6B7280
#FFFFFF
orig: #FFFFFF
#F3F3F5
orig: #F3F4F6
#E6E6EA
orig: #E5E7EB
Accessible Multi-Series Chart Preview
WCAG SC 1.4.1 Compliant: Differentiating series with both color, stroke styles, and shape markers
Análisis de riesgo en degradados
Multi-point contrast risk analysis across gradient color stops
Gradient Hero Headline
Background gradients can create unexpected readability zones where contrast drops below WCAG requirements.
background: linear-gradient(135deg, #4F46E5 0%, #0EA5E9 100%);Legibilidad de texto sobre imágenes
Calibrate scrim overlay opacity to guarantee readable text over varied images
Scenic Horizon Photography
Semi-transparent scrim layers ensure dependable legibility regardless of underlying image luminance spikes.
background-color: rgba(0, 0, 0, 0.50);Exportar código y recursos
Export tokens to CSS variables, SCSS, Tailwind v3/v4, W3C JSON, SVG, PNG, or complete ZIP archive
:root {
/* Palette Tokens */
--color-primary-indigo: #4F46E5;
--color-sky-blue: #0EA5E9;
--color-amber-accent: #F59E0B;
--color-text-gray-900: #111827;
--color-muted-gray-500: #6B7280;
--color-white-background: #FFFFFF;
--color-surface-gray-100: #F3F4F6;
--color-border-gray-200: #E5E7EB;
/* Semantic Roles (Light Theme) */
--color-primary: #4F46E5;
--color-secondary: #0EA5E9;
--color-accent: #F59E0B;
--color-background: #FFFFFF;
--color-surface: #F8FAFC;
--color-text: #0F172A;
--color-mutedText: #64748B;
--color-border: #E2E8F0;
--color-focus: #4F46E5;
--color-success: #16A34A;
--color-warning: #D97706;
--color-danger: #DC2626;
--color-info: #0284C7;
/* Interactive States */
--color-primary-hover: #4433D3;
--color-primary-active: #3A1DC2;
--color-primary-focus: #4F46E5;
--color-primary-disabled: #A8ACC4;
}
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #7579FF;
--color-secondary: #0EA5E9;
--color-accent: #F59E0B;
--color-background: #0F172A;
--color-surface: #1E293B;
--color-text: #F8FAFC;
--color-mutedText: #94A3B8;
--color-border: #334155;
--color-focus: #818CF8;
--color-success: #4ADE80;
--color-warning: #FBBF24;
--color-danger: #F87171;
--color-info: #38BDF8;
--color-primary-hover: #8389FF;
--color-primary-active: #9299FF;
--color-primary-focus: #7579FF;
--color-primary-disabled: #37394A;
}
}Acerca del Estudio de Paletas y Accesibilidad de Color
El Estudio de Paletas y Accesibilidad de Solasu es una solución de diseño integral que va mucho más allá de un simple selector de color.
Permite construir armonías de color, extraer paletas de imágenes subidas, comprobar el cumplimiento de contraste de la norma WCAG 2.2 (niveles AA, AAA y controles de interfaz), generar candidatos de corrección con cambio mínimo en el espacio perceptivo OKLCH, previsualizar componentes reales en temas claro y oscuro, simular daltonismo y exportar código directamente aplicable a CSS, Tailwind, JSON, SVG, PNG y paquetes ZIP.
Todo el procesamiento se lleva a cabo estrictamente en la memoria de tu navegador, garantizando total privacidad.
Cálculo riguroso de contraste basado en el estándar W3C / WCAG 2.2
Aplica la fórmula matemática oficial de luminancia relativa con linealización gamma sRGB (L = 0.2126*R + 0.7152*G + 0.0722*B).
Evalúa de manera independiente texto normal (AA: 4.5:1, AAA: 7.0:1), texto grande (AA: 3.0:1, AAA: 4.5:1) y componentes no textuales de interfaz (3.0:1).
Corrección de color con «cambio mínimo» en espacio perceptivo OKLCH
En caso de contraste insuficiente, el algoritmo realiza una búsqueda binaria en la luminosidad de OKLCH para encontrar el tono más cercano dentro del espectro sRGB que alcance el umbral exigido.
Ofrece modos con fondo fijo, primer plano fijo o ajuste dual, midiendo objetivamente la distancia Delta E.
Extracción local de paletas desde imágenes (Median Cut)
Extrae automáticamente colores dominantes, de acento, neutros, oscuros y claros a partir de fotos JPEG, PNG o WebP, ignorando zonas transparentes (alfa < 128).
Incluye reducción de escala segura a 1000px y límite de 64MP para prevenir saturación de memoria.
Simulación de daltonismo y vistas previas de componentes
Simula protanopía, deuteranopía, tritanopía y acromatopsia en paneles, formularios, páginas de aterrizaje y gráficos.
Advierte conforme a la pauta 1.4.1 de WCAG 2.2 cuando un estado depende exclusivamente del color, promoviendo el uso combinado de texto e iconos.
Exportación lista para producción en múltiples formatos
Genera código limpio en variables CSS con estados interactivos y consultas de medios oscuros, configuraciones de Tailwind CSS v3 y v4, tokens JSON W3C, muestras SVG y archivos ZIP.
Preguntas Frecuentes (FAQ)
¿Esta herramienta es gratuita? ¿Requiere registro?
Es 100% gratuita y no requiere registro ni inicio de sesión.
¿Las imágenes o paletas se guardan en algún servidor?
No. Todo se procesa localmente en tu navegador sin enviar datos a la red.
¿Qué formatos de color son compatibles?
Admite HEX (3, 4, 6 y 8 dígitos), RGB, RGBA, HSL, HSLA, HSV y OKLCH.
¿Cómo se calcula el contraste de WCAG 2.2?
Calcula la luminancia relativa linealizada y aplica la fórmula (Mayor + 0.05) / (Menor + 0.05).
¿Qué diferencia hay entre los niveles AA y AAA?
AA requiere 4.5:1 en texto normal y 3.0:1 en grande; AAA exige 7.0:1 y 4.5:1 respectivamente.
¿Qué se considera texto grande?
Texto de al menos 18pt (24px) o 14pt (aprox. 18.66px) en negrita.
¿Qué es el contraste para objetos no textuales?
Exige que bordes de formulario, iconos y controles mantengan al menos 3.0:1 contra el fondo adyacente.
¿Cómo funciona la sugerencia de corrección?
Ajusta la luminosidad en OKLCH buscando el color más cercano que cumpla el contraste.
¿Qué significa «cambio mínimo»?
Minimiza la distancia Delta E en Oklab para conservar la estética y la identidad de marca.
¿Cómo se extraen colores de una imagen?
Utiliza el algoritmo de corte mediano (Median Cut) sobre el lienzo de la imagen.
¿Cómo se gestionan las imágenes transparentes?
Los píxeles con canal alfa inferior a 128 se descartan del cómputo cromático.
¿Puedo subir imágenes de gran tamaño?
Sí, se reducen a 1000px en el borde mayor para garantizar agilidad y estabilidad.
¿La simulación de daltonismo es exacta?
Es una aproximación matemática fiable, aunque la visión humana real varía según cada persona.
¿Qué tipos de daltonismo están disponibles?
Protanopía (rojo), deuteranopía (verde), tritanopía (azul/amarillo) y acromatopsia (monocromática).
¿Por qué los gráficos no deben basarse solo en color?
Porque personas con daltonismo no podrán distinguir series; conviene usar patrones y etiquetas.
¿Cómo se gestiona el modo oscuro?
Adapta la paleta para fondos oscuros (#0F172A) y valida nuevamente los ratios de contraste.
¿Cómo se analiza el contraste en degradados?
Evalúa 11 puntos a lo largo del degradado y alerta sobre zonas donde caiga por debajo de 4.5:1.
¿Qué pautas hay para texto sobre fotos?
Calcula la luminancia media, sugiere blanco o negro y determina la opacidad óptima de una banda difuminada.
¿Se puede exportar a Tailwind CSS?
Sí, genera tanto el bloque de configuración para Tailwind v3 como la directiva `@theme` para v4.
¿Qué incluye el archivo ZIP descargable?
Incluye palette.css, palette.scss, tailwind.config.js, tokens.json, palette.svg y palette.png.
¿Funciona en dispositivos móviles?
Sí, la interfaz se adapta fluidamente a pantallas táctiles y móviles.
¿El contraste suficiente garantiza accesibilidad completa?
No, también se deben atender la navegación con teclado, el tamaño de letra y las etiquetas semánticas.