Colour palette maker
Press the space bar until something looks right. Keep the colours you like, shuffle the rest, and see the whole set on a real shop page before you commit to it.
- It all happens here
- Every part runs in your browser. Nothing you type is uploaded, and it works with the internet off.
- No account, ever
- No sign-up, no email address, no trial that turns into a bill.
- Yours to use
- Nothing watermarked, nothing limited to a preview.
or press Space
The job belongs to the position, not to the colour. Drag a swatch under a different heading to give it that job — move your pink to the front and it becomes primary, which is --color-primary in every export below. Keeping a colour pins it to the job it is doing, so shuffling leaves both alone.
Your business, wearing it
Baked before you were awake.
Collection from seven, delivery across town until two.
Sourdough loaf
Cinnamon buns, six
Rye & caraway
What can be read on what
8 of the 20 pairings are readable at any size. Down the side is the background; across the top is the text sitting on it.
Take it with you
The link carries the whole palette, locks included — it is what to send your designer, and what to keep in a note for yourself.
@plugin "@wizeworks/silicaui/theme" {
name: mybrand;
color-scheme: light;
default: true;
--color-base-100: #FFF1F3; /* The page behind everything */
--color-base-200: #F5E8EA;
--color-base-300: #E4D8DC;
--color-base-content: #2D3443; /* The writing */
--color-primary: #FF6F86; /* Buttons and links */
--color-secondary: #F3B61F; /* The supporting one */
--color-accent: #4D7C0F; /* Highlights and tags */
--color-neutral: #2D3443; /* Edges and quiet chrome */
}A whole theme. Paste it into your stylesheet and every button, badge, input and tab picks these up at once — there is nothing else to change. The readable ink on each colour is worked out for you, so only the inks you changed yourself appear here.
What this is, if you have never had to think about it
Most people arrive here having been told they need one of these, without being told what it is. Nothing below assumes you already know.
A palette is a set of jobs, not a number of colours
Five is where this starts because five jobs have to be filled: the colour that is unmistakably yours, one supporting it, one for highlights, the page everything sits on, and a quiet tone for edges. That is a starting point, not a ceiling. Each of those also needs a readable ink to go on top of it; real work needs a green for "that worked" and a red for "that did not"; and every colour needs its lighter and darker steps for backgrounds and hover states. Five names becomes several dozen actual values in anything that ships, which is exactly what the software you use every day is doing. What goes wrong is never the count — it is a colour nobody can say the job of, because then it gets used differently on every screen.
What the harmonies actually mean
Colours that sit opposite each other on the colour wheel create contrast and energy, which is why they are used for buttons you want pressed. Colours that sit beside each other feel calm and related, which is why they suit backgrounds and large areas. Three or four spread evenly around the wheel give you variety without clashing. None of this is a rule, but all of it is a reliable starting point when staring at a blank page.
Why every colour needs its lighter and darker versions
One pink is not enough to build anything. You need a pale version for backgrounds, the real one for buttons, and a darker one for the moment somebody hovers or presses. That range is what the fifty-to-nine-hundred numbers mean — one colour in eleven strengths, all of them clearly the same colour. Choosing them by eye is how you end up with a hover state that is a slightly different hue.
Questions people ask
Choosing the colours is the fun part.
My Site is the other part — it takes a palette and puts it everywhere at once, every button and every heading and every page, and changes all of them again when you change your mind. Which you will.
