How to use the generator
- Press New colors, or the space bar, until you see a color you like.
- Press the lock on that color. It stays when the others change.
- Keep going until the whole palette works. Add a color with Add a color, up to six, or remove one with the cross.
- Click a code to copy it, or copy all of them at once as CSS variables.
To use a color you already have, like the one in your logo, press the pencil on a swatch and pick it. The tool locks it, so the new colors are built around it.
How the colors are picked
The generator works in OKLCH, a way to describe color that matches what the eye sees. In OKLCH, two colors with the same lightness look equally light, which is not true of the color codes you type. The hue of the new colors follows one of five classic harmonies:
- Analogous: neighbors on the color wheel, like blue, teal and green. Calm and safe.
- Complementary: two opposite colors, like blue and orange. Strong contrast.
- Triad: three colors evenly spread around the wheel. Playful.
- Split complementary: one color and the two next to its opposite. Lively, with less clash than complementary.
- Monochrome: one hue from dark to light. Quiet and tidy.
A mix of all picks a harmony at random each time. Every palette runs from a dark color to a light one, so there is always one for text and one for a background.
Share or save a palette
The palette sits in the page's address. Press Copy link and send it, or bookmark the page: the link opens the same colors with the same locks. Download PNG saves a picture of the palette with the codes on it, for a mood board or a message to a designer. Copy CSS gives you the colors as variables, ready for a website.
Use it in Postfjord's design editor
In Postfjord, add your colors once under Settings, Brand: a main color, an accent, a text color, a background and more brand colors. Every template in the design editor is then drawn in them, and Apply brand gives a design you made before your colors too. In the Color panel, Colors that match this design shows lighter and darker shades of the colors you use.
FAQ
How many colors should a brand palette have?
Most small brands do well with three to five: one dark color for text, one light color for backgrounds, one main color, and one or two accents for buttons and details.
Can I start from my logo color?
Yes. Press the pencil on a swatch and pick your color or type its code. The tool locks it, and new colors are made to go with it.
Is the palette saved?
Only in the link. The tool runs in your browser and stores nothing. Copy the link or bookmark the page to come back to the same colors.
What is OKLCH?
A way to write a color as lightness, chroma (how strong it is) and hue. Steps in OKLCH look even to the eye, so a palette made in it has a smooth spread from dark to light.
Can I use the colors for free?
Yes. Colors are not owned by anyone. Use the palette in your brand, your website or your posts.