Generador de Paletas & Armonías de Color

Generador de Paletas & Armonías de Color

Genera esquemas armónicos de color al instante. Crea paletas complementarias, análogas, triádicas y adyacentes con verificación de contraste WCAG en tiempo real y exportación CSS.

Preajustes
Controles de color ancla
#0F172A
Modificador de saturación0%
Desplazamiento térmico0°
Motor cromático listo
Delta (ΔE) 0%Muestras de color 5
Ancla principal
#0F172A
RGB15, 23, 42
HSL222°, 47%, 11%
OKLCH0.208, 0.04, 266°
Luminancia0.0088
Acorde armónico 1
#C0B8DB
RGB192, 184, 219
HSL254°, 33%, 79%
OKLCH0.8, 0.05, 296°
Luminancia0.506
Acorde armónico 2
#D8B69F
RGB216, 182, 159
HSL24°, 42%, 74%
OKLCH0.8, 0.051, 56°
Luminancia0.5056
Acorde armónico 3
#BCC29E
RGB188, 194, 158
HSL70°, 23%, 69%
OKLCH0.8, 0.049, 115°
Luminancia0.5174
Acorde armónico 4
#A0C3DA
RGB160, 195, 218
HSL204°, 44%, 74%
OKLCH0.799, 0.05, 237°
Luminancia0.5157
Contraste WCAG medio4.43:1|Puntuación106
5 muestras
Regla activaSPLIT-COMPLEMENTARY
Contraste medio4.43:1
Modelo de colorOKLCH (266°)
Estado de seguridad0 B (Cero envíos)

Procesamiento en el cliente

Cálculo de alto rendimiento ejecutado íntegramente en la memoria del navegador.

Cero envíos a servidores

Todas las cargas útiles se mantienen estrictamente locales sin comunicación externa.

Exportación lista para producción

Formatos de salida limpios y optimizados para integración inmediata.

ToolsAA•Utilidades web 100% privadas en el cliente
Referencia técnica y guía de arquitectura

Generador de Paletas & Armonías de Color — Guía de referencia

Genera esquemas de armonía cromática al instante. Crea paletas complementarias, análogas, triádicas y divididas con verificación de contraste WCAG en tiempo real y exportación CSS.

Generador de Paletas & Armonías de Color — Guía de referencia — Arquitectura en memoria del lado del cliente y flujo de datos
Generador de Paletas & Armonías de Color — Guía de referencia — Arquitectura en memoria del lado del cliente y flujo de datos

Parámetros clave y controles

Ángulo de tono base (θ)Ángulo cromático CIE [0° – 360°]

Posición angular en la rueda cromática continua de 360 grados CIE/Munsell que determina la longitud de onda espectral primaria (0° Rojo, 60° Amarillo, 120° Verde, 180° Cian, 240° Azul, 300° Magenta). Evaluada en tiempo trigonométrico O(1) como la coordenada de origen para rotaciones armónicas dentro del entorno aislado V8 del navegador.

Por defecto: 240° (Azul real)
Desfase angular geométrico (Δθ)Intervalo de cuerda trigonométrica

Desplazamiento angular geométrico que define las topologías armónicas clásicas: Complementaria (180°), Triádica (120° / 240°), Análoga (±30° / ±60°), Complementaria dividida (150° / 210°) y Tetrádica (60° / 180° / 240°). Calculado módulo 360° mediante rotación matemática pura sin dependencias externas.

Por defecto: 180° (Complementaria)
Luminosidad perceptual (L*)CIE L* / OKLCH L [0.00 – 1.00]

Escala de brillo perceptualmente uniforme de 0.0 (negro por absorción absoluta) a 1.0 (blanco difuso puro). Evita los picos artificiales de luminosidad perceptual entre amarillos y azules inherentes al modelo HSL sin corregir, garantizando que los tonos con igual valor L compartan una luminosidad percibida idéntica por el ojo humano en cualquier matiz.

Por defecto: 0.55
Croma / Saturación (C*)Croma OKLCH [0.00 – 0.37] / Métrica de pureza

Distancia radial desde el eje acromático del gris neutro hacia el locus espectral. Un croma elevado (>0.20 en OKLCH, >80% en sRGB) provoca fatiga ocular y cromoestereopsis; las superficies accesibles de interfaz requieren un croma contenido (<0.08), mientras que los controles interactivos se sitúan en el rango de 0.12–0.18.

Por defecto: 75% (0.18 OKLCH)
Luminancia relativa WCAG (Y)Ratio fotométrico linealizado [0.00 – 1.00]

Brillo fotométrico linealizado calculado como Y = 0.2126R_lin + 0.7152G_lin + 0.0722B_lin según W3C WCAG 2.1 §1.4.3. Determina la relación de contraste (L1 + 0.05) / (L2 + 0.05), exigiendo ≥4.5:1 para texto normal (AA) y ≥7.0:1 para legibilidad mejorada (AAA).

Por defecto: 0.21
Motor de transformación de espacio de colorIEC 61966-2-1 sRGB ↔ OKLCH / Display-P3

Canalización de transformaciones matriciales en el lado del cliente que ejecuta convoluciones 3x3: expansión gamma [0, 255] ➔ sRGB lineal ➔ CIE XYZ (iluminante D65) ➔ espacio de conos LMS ➔ coordenadas polares OKLCH. Se ejecuta con complejidad temporal determinista O(1) en el entorno aislado del navegador sin telemetría de servidor.

Por defecto: OKLCH (W3C Color 4)

Consejos profesionales y mejores prácticas

Neutraliza la distorsión perceptual de Helmholtz-Kohlrausch

El cálculo clásico de HSL trata al amarillo 100% saturado (L=50%) y al azul 100% saturado (L=50%) como si tuvieran idéntica luminosidad; sin embargo, la respuesta fotópica del ojo humano percibe el amarillo considerablemente más brillante. Conmuta siempre al espacio de color perceptual OKLCH al calibrar la legibilidad tipográfica sobre muestras de fondo: valores idénticos de L en OKLCH aseguran un brillo percibido uniforme en los 360 grados de tono.

Evita la vibración cromática mediante puentes neutros

Disponer colores complementarios de alta saturación adyacentes (p. ej., rojo puro #FF0000 y cian puro #00FFFF) desencadena inhibición lateral fisiológica, acomodación ocular conflictiva y fatiga visual. Intercala un puente neutro (un matiz con Croma < 0.02 o una superficie oscura con L < 0.20, asegurando una diferencia de luminancia ΔY ≥ 0.30) entre pares complementarios saturados.

Aplica la regla de proporción 60-30-10 en diseño

Nunca distribuyas los tonos de una paleta armónica en proporciones idénticas. Asigna el 60% del lienzo al color de superficie neutro dominante, el 30% al tono secundario estructural de la marca y reserva el 10% restante de forma estricta para el color de acento o llamada a la acción (botones, insignias y estados activos).

Verifica colisiones por deficiencia visual del color (daltonismo)

Aproximadamente el 8% de los hombres y el 0.5% de las mujeres presentan deuteranopía o protanopía. Las paletas complementarias rojo-verde colapsan en tonos amarillo-amarronados indistinguibles bajo visión dicromática. Asegura siempre una diferencia mínima de luminancia de 3.0:1 entre estados de interfaz críticos, sin depender exclusivamente del tono, y refuerza la información con tipografía o iconos según WCAG 2.1 SC 1.4.1.

Extrae entropía por hardware con Web Crypto API para esquemas exploratorios

El método estándar Math.random() emplea motores PRNG pseudoaleatorios propensos a la reconstrucción de estado y a agrupaciones por módulo en cuadrantes cromáticos recurrentes. Para generar paletas exploratorias sin sesgos, extrae entropía por hardware mediante la Web Crypto API con window.crypto.getRandomValues(new Uint32Array(1)) / 4294967296 * 360, garantizando una distribución continua y uniforme a lo largo de todo el espectro CIE de 360°.

Problemas comunes y soluciones

⚠️La paleta complementaria generada no supera el contraste WCAG AA sobre fondos blancos u oscuros

Los tonos complementarios comparten tensión cromática, no compatibilidad de luminancia. Ajusta el control deslizante de luminosidad perceptual (L*) del tono de acento frontal a ≤0.35 para fondos blancos, o elévalo a ≥0.75 para fondos oscuros antracita, alcanzando así el ratio obligatorio de 4.5:1.

⚠️Los pasos intermedios de degradado y los tonos análogos se aprecian apagados, sucios o grisáceos

La interpolación lineal en RGB atraviesa el núcleo desaturado del cilindro de color. Cambia el espacio de cálculo del generador de sRGB/HSL a OKLCH; esto curva la interpolación manteniendo un croma percibido constante y elimina las zonas muertas grisáceas.

⚠️Los colores varían o se recortan al exportar CSS a gama amplia Display-P3 o imprimir en CMYK

Los valores sintéticos RGB de alto croma (como cianes y verdes neón) quedan fuera del triángulo sRGB o de la gama de impresión CMYK. Activa el selector de protección contra recorte de gama (Gamut Clipping Armor) para restringir los valores al espacio sRGB estándar [0, 255] o previsualiza los tokens CSS equivalentes para gama amplia color(display-p3 r g b).

⚠️Las paletas triádicas y tetrádicas resultan caóticas y visualmente abrumadoras en tarjetas de interfaz

Aplicar la misma saturación a 3 o 4 tonos dispares genera puntos focales en competencia visual. Conserva un único matiz dominante con saturación elevada (>70%) y desatura deliberadamente los tonos secundarios y terciarios armónicos al 20-35% de croma para que actúen como colores de soporte estructural.

Preguntas frecuentes (FAQ)

¿Cómo se calculan matemáticamente las armonías de color complementarias, triádicas y análogas?▼

Las armonías cromáticas se calculan transformando los valores sRGB en coordenadas polares (tono θ de 0° a 360°, saturación y luminosidad). La armonía complementaria suma 180° (θ + 180° mod 360°). La triádica rota en incrementos de 120° (θ + 120°, θ + 240°). La análoga evalúa tonos adyacentes a ±30° y ±60° (θ ± 30° mod 360°). La complementaria dividida toma el tono base θ y lo empareja con dos ángulos adyacentes a su opuesto directo: θ + 150° y θ + 210°. Todas las transformaciones se ejecutan con complejidad computacional O(1).

¿Cuál es la relación de contraste mínima según WCAG para texto y fondo en botones accesibles?▼

Bajo la norma WCAG 2.1 Nivel AA, el texto de cuerpo estándar y las etiquetas de botones por debajo de 18 pt regular (o menos de 14 pt en negrita) requieren una relación de contraste mínima de 4.5:1 respecto al fondo. El texto grande (≥18 pt regular o ≥14 pt negrita) y los componentes visuales esenciales de la interfaz (como bordes de botones, contornos de campos de formulario e indicadores de pestañas activas) exigen un ratio mínimo de 3.0:1. El Nivel AAA eleva estos requisitos a 7.0:1 para texto normal y a 4.5:1 para texto grande.

¿Cuál es la diferencia entre la mezcla de color HSL y la armonía perceptual OKLCH?▼

HSL (Tono, Saturación, Luminosidad) es una transformación cilíndrica directa de sRGB sin corregir que ignora la sensibilidad retiniana humana, provocando que un amarillo (50% de luminosidad) aparente ser drásticamente más brillante que un azul (50% de luminosidad). OKLCH se basa en los modelos de color perceptual CIECAM02 y CAM16 formulados por Björn Ottosson; desacopla de forma uniforme la luminosidad percibida (L), el croma (C) y el tono (h), garantizando que dos colores con idéntico valor L compartan la misma luminosidad percibida en los 360 grados del círculo cromático.

¿Por qué los colores complementarios vibran o se ven apagados al situarse juntos?▼

La vibración óptica (cromoestereopsis) ocurre cuando colores complementarios de alta saturación e idéntica luminancia activan señales opuestas en los conos retinianos contiguos sin contraste lumínico suficiente, lo que hace oscilar el contorno visual. El aspecto apagado o turbio surge durante la mezcla alfa lineal en RGB porque los valores intermedios sufren una caída de croma percibido hacia el centro oscuro del cubo RGB. Para solucionarlo, se debe añadir un diferencial de luminancia (ΔL ≥ 0.3) o una línea divisoria neutra.

¿La generación de paletas de color en esta herramienta envía códigos hexadecimales a un servidor externo?▼

No. Todas las conversiones matemáticas de espacios de color (sRGB, CIE XYZ, OKLCH, Display-P3), las fórmulas de contraste WCAG y las simulaciones de daltonismo se ejecutan 100% en el lado del cliente, dentro de la máquina virtual JavaScript V8 aislada del navegador. Ningún código hexadecimal, valor cromático ni recurso de marca cargado se transmite jamás a través de la red, garantizando cero telemetría en servidores, funcionamiento sin conexión y aislamiento total de datos bajo estándares de seguridad corporativa.

Herramientas y utilidades relacionadas

Todas las herramientas →
Generador Glassmorphism CSS & VidrioDiseño

Genera código CSS moderno de glassmorphism y vidrio esmerilado con controles interactivos de desenfoque backdrop-filter, opacidad, bordes y sombras. Copia HTML y CSS limpios al instante.

Abrir herramienta→
Comprimir Imágenes & Reducir FotosDiseño

Comprime imágenes online sin pérdida de calidad. Reduce el tamaño de JPG, PNG y WebP en tu navegador sin subir datos al servidor, con objetivo en KB y exportación en ZIP.

Abrir herramienta→
Generador Interactivo de Gradientes CSS Lineales y RadialesDiseño

Todo el procesamiento y conversión se realiza íntegramente en la memoria de su navegador sin transmisiones externas.

Abrir herramienta→
Generador de Sombras CSS Multicapa (Box Shadow)Diseño

Diseña sombras CSS multicapa realistas y naturales con elevación óptica, relieve interno, dispersión y exportación instantánea a Tailwind, CSS y React.

Abrir herramienta→
Generador de CSS Clip-Path de Polígonos y Máscaras VectorialesDiseño

Cree rutas de recorte geométricas responsivas y máscaras SVG interactivas con control visual de vértices y exportación inmediata.

Abrir herramienta→
Generador Visual de Layouts CSS GridDiseño

Constructor interactivo de CSS Grid 2D. Diseña cuadrículas responsivas con unidades fr, funciones minmax(), gaps y exporta código limpio en CSS, Tailwind o React JSX.

Abrir herramienta→