Free should describe the whole useful workflow, not only the first swatch. The generator exposes every mode, gamut target, contrast result and export without a sign-in, trial counter or watermarked download.
What is included
A useful free-tool checklist
| Capability | Why it matters | Included here |
|---|---|---|
| Visible OKLCH coordinates | You can review the intended curve rather than trust an opaque preset. | Yes |
| sRGB and P3 checks | Wide-gamut colors need an explicit delivery decision. | Yes |
| Contrast against a chosen surface | Accessibility is pair-specific. | WCAG 2 ratio + APCA preview |
| Framework-ready output | Copying isolated HEX values loses the system. | CSS and Tailwind v4 |
| Portable design tokens | Vendor-neutral values travel between tools. | DTCG 2025.10 JSON |
| Reproducible share link | Reviewers can reopen the same controls. | Yes, except image pixels |
Exports that preserve intent
The CSS export writes an sRGB fallback first and an OKLCH value second. Browsers that understand OKLCH use the perceptual value; older handling can still fall back. The Tailwind v4 export uses an @theme block with 50–950 names when the ramp contains 11 stops. The JSON export follows the stable DTCG 2025.10 color object, preserving the OKLCH components and an optional HEX fallback.
:root {
--color-brand-500: #8450c7;
--color-brand-500: oklch(62% 0.17 305);
}
@theme {
--color-brand-500: oklch(62% 0.17 305);
}The honest limits
The tool does not save cloud projects, manage team permissions or inspect every component state. APCA is shown as a signed Lc preview, not a WCAG 3 compliance badge. WCAG 2.2 contrast thresholds still need to be applied to final text size, weight and context.
A portable workflow
- Generate the smallest set of roles your interface needs.
- Keep raw palette tokens separate from semantic tokens such as text, border and danger.
- Commit the exported values to source control with a short rationale.
- Test actual components, including disabled and focus states.
No account, no gated export.
Start from any CSS color value.
Sources and further reading
Technical claims are grounded in specifications and primary documentation. Product observations are dated snapshots from direct use.