Export a colour palette to code
Build a palette, name each colour, and export the whole set to CSS variables, SCSS, Tailwind config, JSON or Figma tokens. Free, no Pro plan, copy in one click.
Export your colours in any format
Most palette tools make you sign up — or pay — to export. This one doesn't. Add your colours on the left (type a hex, use the swatch picker, or hit Random), give each a name, then pick a format on the right. The code updates live and copies in one click. There is no account, no watermark and no "upgrade to copy" wall — the full output is yours.
Which format should you use?
CSS variables output a :root block of custom properties — the most portable option, usable in any project. CSS OKLCH emits the same tokens with OKLCH values and a hex fallback, which is the modern, perceptually-consistent approach. SCSS gives you $variables for Sass codebases. Tailwind produces a colors object ready to drop into theme.extend in your tailwind.config.js, and the OKLCH variant outputs OKLCH token values. JSON and Figma tokens suit design-tool and design-system pipelines, and Hex list is a plain list for pasting anywhere.
Why naming your colours matters
A palette is far more useful when its colours have meaningful names. Instead of scattering raw hex codes through your stylesheet, semantic tokens like --primary, --accent and --surface let you change a colour in one place and have it update everywhere. Naming also makes your design system readable to teammates and to your future self. Edit the name field beside each colour and the exported tokens update instantly.
Building the palette
Not sure which colours to use? Generate them in the picker with its harmony tool, pull them from a photo with the image picker, or paste existing values — the fields accept HEX, RGB, HSL, HSV, OKLCH and named colours. For a complete numbered scale (50–950) from a single brand colour, the picker's design-token generator builds one in OKLCH and shows the WCAG contrast of every step.
A note on OKLCH exports
The OKLCH formats output colours in the modern CSS colour space, where lightness and chroma behave predictably across hues. Browsers support OKLCH today, and the export includes a hex fallback comment so older environments degrade gracefully. If you are building or maintaining a design system, OKLCH tokens make it far easier to generate consistent tints and shades later.