Color palette guide
Keep your work
Everything is copied to the clipboard; the tool saves no files. The four copy buttons at the top of the panel copy all five colours, in upper case, left to right.
| Button | What you get |
|---|---|
| CSS variables | Five lines, --color-1: #FF2E63; to --color-5. Paste them inside a rule such as :root { }. See CSS variables. |
| Tailwind | A colors: { … } block whose keys are '1' to '5', ready to paste under theme or extend in a Tailwind config. See Tailwind colours. |
| JSON | A JSON list of the five hex codes, two spaces indented. See JSON palette. |
| Hex list | The five hex codes, one per line. |
To copy one colour, select its bar. You get that bar's hex code in upper case, as the bar shows it, the same as the exports.
A note at the bottom of the screen says what was copied. If the browser refuses the clipboard, the note says Copy failed instead.
There is no picture to save. To keep the colours as an image, take a screenshot of the bars.