El método científico: ¿Por qué HSL?
Muchos selectores utilizan el espacio RGB, excelente para pantallas pero poco intuitivo para humanos. Kasuality adopta el espacio HSL (Hue, Saturation, Lightness) como interfaz de control.
- Hue (Tonalidad): La esencia pura del color (ej. 0° es Rojo, 120° es Verde).
- Saturation (Saturación): La intensidad del color. 100% es vívido, 0% es gris.
- Lightness (Luminosidad): La cantidad de luz. Fundamental para crear tintes y calcular el contraste.
Gracias a este enfoque, Kasuality calcula las armonías matemáticamente rotando solo el valor H. Sin embargo, bajo el capó, hemos integrado una novedad fundamental.
Uniformidad Perceptiva: El ADN OKLCH
Mientras que el HSL nos permite establecer la dirección creativa, nuestro motor de renderizado utiliza el espacio de color OKLCH. Esto garantiza que cada matiz sea percibido con la misma intensidad por el ojo humano, corrigiendo las distorsiones de los sistemas antiguos.
Nativo Wide Gamut (P3)
Diseñado para pantallas modernas. Generamos colores que los viejos sistemas HEX/RGB no pueden visualizar, manteniendo la compatibilidad mediante Progressive Enhancement.
Gradientes Perfectos
El algoritmo OKLCH elimina las "zonas muertas" grises en medio de los gradientes, garantizando transiciones fluidas y vibrantes que respetan la física de la luz.
Decodificando las Armonías
En la sección "Armonía", nuestro algoritmo visualiza las relaciones geométricas en la rueda cromática:
Complementarios
Dos colores opuestos (180° de distancia). Crean el máximo contraste visual y un impacto energético. Ideales para CTA.
Análogos
Colores adyacentes en la rueda. Comparten la misma "temperatura" emocional y son muy relajantes para el ojo.
Triádicos
Tres colores equidistantes (120°). Ofrecen un equilibrio vibrante, manteniendo armonía y distinción entre los elementos.
Proporción Áurea
Armonía basada en el número áureo (φ) y el ángulo de ≈ 137.5°. Genera paletas que parecen intrínsecamente naturales y orgánicas.
Accesibilidad Híbrida: WCAG 2.1 y APCA
Kasuality no se limita al presente, sino que anticipa el futuro de la Web (WCAG 3). Nuestro motor de contraste opera en dos niveles simultáneos:
- Nivel 1 - Estándar Legal (WCAG 2.1): Calculamos la clásica relación matemática AA (4.5:1) y AAA (7:1). Es el estándar legal actual.
- Nivel 2 - Ciencia Perceptual (APCA): Integramos el nuevo algoritmo Advanced Perceptual Contrast Algorithm. A diferencia del viejo sistema, APCA (valor $L^c$) considera cómo el ojo humano percibe realmente el texto.
- Simulación: Aplica filtros SVG para Protanopia, Deuteranopia y Tritanopia, y prueba el renderizado bajo luz solar directa o en modo nocturno.
Guía de los 5 Modos
Arquitecto de Design Tokens y Exportación W3C (PRO)
Kasuality no se limita a generar combinaciones de colores visuales, sino que proporciona una verdadera infraestructura de ingeniería para el desarrollo de UI. Este modo transforma tu color "Semilla" en un Design System Enterprise listo para usar.
- Roles Semánticos: El motor calcula automáticamente las tonalidades perfectas para la Acción Principal (Primary), el Fondo de Interfaz (Surface), los Bordes y los estados de Éxito/Error.
- Cálculo de Estados (UX): Generación matemática de las variantes Hover, Pressed y Disabled ajustando científicamente la luminancia y la saturación en el espacio OKLCH.
- Integración Enterprise: La exportación JSON cumple con el formato estándar global del W3C Design Tokens Community Group (utilizando los prefijos
$valuey$type). La infraestructura es nativamente compatible con Figma Tokens Studio y Style Dictionary.