An online color tool is most useful when the full decision stays visible: the source color, the lightness curve, the target gamut, the surface used for contrast, and the exact code being exported. This generator keeps those parts together and runs its color calculations in the browser.
Fast path: open the generator, paste a HEX, RGB, HSL or OKLCH value, choose 11 steps, and copy the CSS or Tailwind tab. No account is required.
What runs locally
The palette engine parses the input, converts it to OKLCH, creates the requested curve, maps each swatch to sRGB or Display P3, and calculates contrast against the selected surface. An image is decoded with the browser’s Canvas API and never sent to an upload endpoint.
| Action | Where it runs | What leaves the tab |
|---|---|---|
| Ramp and harmony generation | Your browser | Nothing |
| Image palette extraction | Your browser | No image or filename |
| CSS, Tailwind, JSON and SVG export | Your browser | Nothing unless you choose to share it |
| Anonymous page analytics | Production site only | Page and basic device data; never entered colors |
Share a reproducible state without an account
The Share control writes the non-sensitive tool state into the URL: mode, base color, step count, curve, gamut and surface. A teammate who opens it sees the same calculation. Image pixels are deliberately omitted, so an image-derived palette should be exported as tokens before handoff.
A five-minute online workflow
- Start with a role color. Use the brand or semantic color that already has product meaning.
- Choose the delivery gamut. sRGB is the conservative web default. P3 preserves more chroma on compatible displays while the export still includes a HEX fallback.
- Inspect the mapped badges. A gamut badge and ΔEOK disclose when the requested color had to move.
- Set the real surface. Contrast is a relationship between two colors; checking against white by habit can hide a failure on the actual UI surface.
- Export the system, not a screenshot. Use CSS variables, Tailwind v4 variables or DTCG JSON so the values remain reviewable.
When not to rely on a generator alone
A mathematical ramp does not understand hierarchy, focus order, error semantics or type size. Treat the first output as a controlled starting point. Check the components in context, include non-color cues, and test contrast again after transparency, blending and text weight are final.
Build the first ramp now.
All controls and exports are available on the home page.
Sources and further reading
Technical claims are grounded in specifications and primary documentation. Product observations are dated snapshots from direct use.