The Architecture of Color: HSL and OKLCH

Kasuality combines the geometry of the HSL color space, the precision of the OKLCH engine, and the dual accessibility standard (WCAG 2.1 and APCA) for future-proof design.

The Scientific Method: Why HSL?

Many color pickers use the RGB space, which is great for screens but unintuitive for humans. Kasuality adopts the HSL (Hue, Saturation, Lightness) space as a control interface.

Hue: The pure essence of color (e.g., 0° is Red, 120° is Green).
Saturation: The intensity of the color. 100% is vivid, 0% is gray.
Lightness: The amount of light. Crucial for creating tints and calculating contrast.

Thanks to this approach, Kasuality calculates harmonies mathematically by rotating only on the H value. However, under the hood, we have integrated a fundamental innovation.

Perceptual Uniformity: The OKLCH DNA

While HSL allows us to set the creative direction, our rendering engine uses the OKLCH color space. This ensures that every shade is perceived with the same intensity by the human eye, correcting the distortions of old systems.

Native Wide Gamut (P3)

Designed for modern displays. We generate colors that old HEX/RGB systems cannot display, maintaining compatibility through Progressive Enhancement.

Perfect Gradients

The OKLCH algorithm eliminates gray "dead zones" in the middle of gradients, ensuring fluid, vibrant transitions that respect the physics of light.

Decoding Harmonies

In the "Harmony" section, our algorithm visualizes geometric relationships on the color wheel:

Complementary

Two opposite colors (180° apart). Create maximum visual contrast and energetic impact. Ideal for CTAs.

Analogous

Adjacent colors on the wheel. Share the same emotional "temperature" and are very relaxing to the eye.

Triadic

Three equidistant colors (120°). Offer vibrant balance, maintaining harmony and distinction between elements.

Golden Ratio

Harmony based on the golden number (φ) and the angle of ≈ 137.5°. Generates palettes that appear intrinsically natural and organic.

Hybrid Accessibility: WCAG 2.1 and APCA

Kasuality doesn't stop at the present but anticipates the future of the Web (WCAG 3). Our contrast engine operates on two levels simultaneously:

Level 1 - Legal Standard (WCAG 2.1): We calculate the classic mathematical ratio AA (4.5:1) and AAA (7:1). This is the current required legal standard.
Level 2 - Perceptual Science (APCA): We integrate the new Advanced Perceptual Contrast Algorithm. Unlike the old system, APCA (value $L^c$) considers how the human eye actually perceives text.
Simulation: Applies SVG filters for Protanopia, Deuteranopia, and Tritanopia, and tests rendering under direct sunlight or in night mode.

Guide to the 5 Modes

1. Origin (Zero Point)

Explore the basics. Generate perfect triads of Primary colors, Secondary combinations, and complex Tertiary shades.

2. Modifiers (Tonal Scales)

The secret of UI Design. Create Tonal Scales (tints/shades) for interfaces, pastel variants, deep versions, or neutral tones.

3. Emotion (Temperature)

The psychology behind color. Choose Warm palettes for energy, Cool for trust, Earthy for nature, or Neutral for minimalism.

4. Harmony (Geometry)

Classic algorithms for aesthetic balance. Includes Monochromatic, Analogous, Complementary, Triadic, and Golden Ratio schemes.

5. WCAG (Accessibility)

Crucial for the modern web. Calculates simultaneously the AA/AAA ratio and the APCA score (L^c). Suggests automatic fixes (FIX).

Design Tokens Architect & W3C Export (PRO)

Kasuality doesn't just generate visual color combinations; it provides a true engineering infrastructure for UI development. This mode transforms your "Seed" color into a ready-to-use Enterprise Design System.

Semantic Roles: The engine automatically calculates the perfect shades for Primary Action, Surface Background, Borders, and Success/Error states.
State Calculation (UX): Mathematical generation of Hover, Pressed, and Disabled variants by scientifically adjusting luminance and saturation in the OKLCH space.
Enterprise Integration: The JSON export complies with the global standard format of the W3C Design Tokens Community Group (using $value and $type prefixes). The infrastructure is natively compatible with Figma Tokens Studio and Style Dictionary.

Professional Workflow and Secrets

Kasuality hides advanced features designed to speed up the work of designers and developers:

Deep Linking

The browser URL updates in real-time. Copy and send it to a colleague: they will see exactly your same palette and HSL configuration.

Manual Editor Mode

You can force your creative vision by entering multiple color codes separated by a comma. In this mode, randomization is disabled.

Advanced Export

Download ready-made configurations for developers (Tailwind, JSON, SCSS). The PDF Brand Kit export now includes OKLCH Precision Data, offering a complete technical report for print and branding.

AI Color Analysis

We've powered up color extraction with hybrid analysis. AI analyzes skin pixels in the photo, while you confirm wrist vein color.

Smart Input

You can type standard color names (e.g., Tomato) or HEX/RGB values directly. The Lock function lets you freeze favorite colors.

PNG and SVG Export

Instantly generate high-resolution images (PNG) and vector files (SVG). Ideal for import into Figma or Adobe Illustrator with no quality loss.

Guide to the Perfect Selfie (Armocromia PRO)

In seasonal color analysis, photo quality is everything. Incorrect lighting can completely alter the perception of your undertone. Follow this professional standard to ensure Kasuality's AI provides an objective and flawless analysis:

1. Light and Time

Only Natural Light: The analysis must be done exclusively with indirect sunlight. Stand facing a window (not sideways, to avoid shadows). Ideal Time: Between 10:00 AM and 3:00 PM.

2. Face Preparation

Zero Makeup: Clean face. Even a thin layer of concealer hides essential color variations. Strategic Wait: Wait 15-20 minutes after washing your face to let any friction redness disappear.

3. The Outline

Hair: If your hair is dyed, tie it back or cover it with a cloth. Clothing: Wear a neutral color (white or gray) to prevent reflections from "bouncing" onto your neck.

4. Photographic Setup

Angle: Camera at eye level, about 1 meter away (use a slight zoom). No Filters: Turn off "Portrait" mode or beauty filters.

Ready to create your accessible palette?

Go back to the generator and start experimenting with the base color.

Go to Generator