CSS color palette
Build a CSS color palette in the browser: generate lockable swatches, copy :root custom properties, export PNG or JSON, and paste into your stylesheet.
Last updated:
From swatches to :root tokens
A CSS color palette is only useful if the values are easy to paste. The studio’s Copy CSS pill writes custom properties you can drop into a project, while each card still one-click copies raw HEX.
Example export shape
After Copy CSS you typically get something like:
:root { --color-1: #E879F9; … }
Rename the variables to match your design system (--brand-accent, --mint, etc.) once you settle on a set.
Suggested steps
- Generate a palette and lock the hues you want to keep.
- Click Copy CSS, then paste into your stylesheet.
- Export Palette PNG for moodboards or Slack reviews.
- Export JSON if you need to reopen the same draft later.
Also see HEX color picker and color palette generator tips.
FAQ
What does Copy CSS paste?
A :root block with --color-1 through --color-5 set to your current HEX values. Paste it into a stylesheet, design tokens file, or CodePen.
How is this different from a static CSS palette cheat sheet?
You generate and lock live swatches first, then export. The palette can also recolor the on-page word cloud so you see the CSS tokens in use.
Can I back up a CSS color palette?
Use Export JSON to save palette, lock state, and word list, or Palette PNG for a labeled swatch strip. Import JSON restores the draft later.