The product is intentionally a static client-side application. That architecture makes the privacy claim testable: palette generation and image analysis have no application server to call. It also makes the output reproducible in automated unit tests.
Architecture at a glance
| Layer | Implementation | Responsibility |
|---|---|---|
| Interface | Semantic HTML, CSS and canvas | Controls, swatches, wheel, preview and accessible dialogs. |
| Color math | Culori 4 | Parsing, conversion, gamut tests, mapping, HEX/P3 formatting and WCAG ratio. |
| APCA preview | apca-w3 | Signed Lc calculation, clearly separated from WCAG 2 conformance. |
| Build | Vite | Small production bundles and hashed assets. |
| Content | Generated static HTML | Canonical guides, metadata, structured data and sitemap. |
Ramp generation
The ramp holds a base hue, then samples lightness between configurable endpoints. An easing exponent shapes the spacing. Chroma follows a bell-like curve: very light and very dark colors receive less chroma because display gamuts narrow at the extremes. Presets change these parameters rather than selecting an unrelated list of colors.
lightness = maxL - (maxL - minL) × tᶜᵘʳᵛᵉ
chroma = baseC × scale × shapedSin(πt)Gamut mapping and disclosure
Each intended OKLCH color is tested against sRGB and Display P3. The selected target uses Culori’s gamut mapping utility. The app retains both the original and mapped coordinates and calculates Euclidean difference in Oklab (ΔEOK). The UI never presents a clipped fallback as though it were the original request.
Two contrast models, two labels
WCAG 2.2 defines contrast-ratio thresholds of 4.5:1 for normal text and 3:1 for qualifying large text at level AA. The app reports those familiar results. It also computes a signed APCA Lc preview with the reference package. APCA guidance depends on font size and weight, and WCAG 3 remains a Working Draft, so the interface makes no “WCAG 3 compliant” claim.
Image clustering
The image path downsamples a decoded canvas, removes transparent samples, converts pixels into Oklab, and runs bounded k-means iterations. Empty clusters are reseeded from distant samples. The resulting centroids are converted into OKLCH and passed through the same gamut pipeline as manual colors.
Exports
CSS and Tailwind output preserve OKLCH text. DTCG JSON uses the stable 2025.10 color module with colorSpace: "oklch", numeric components and an optional HEX fallback. SVG output creates a portable visual strip with embedded labels.
What automated tests cover
Current deterministic checks
The suite checks a known sRGB red conversion, an 11-stop Tailwind ramp, out-of-gamut mapping, WCAG/APCA reporting, harmony generation, export schemas and image clustering. Browser verification additionally covers keyboard interaction, mobile overflow and runtime errors.
Deliberate tradeoffs
There is no database, authentication or cloud project layer. URL state covers reproducibility for scalar controls, while exports cover durable handoff. The static architecture reduces operational surface area, but it means teams must store approved token files in their own source of truth.
Inspect the behavior directly.
Every algorithm described here feeds the production tool.
Sources and further reading
Technical claims are grounded in specifications and primary documentation. Product observations are dated snapshots from direct use.