Generate color palettes in seconds.

Generating color with intention

Random colors are fun. For about ten seconds.
Then the question comes: which one, and why?

A generator gives you options. Fast, and many.
The choosing is still yours. This guide is about the choosing.

✦ The three dials of color

Every color on a screen can be described with three values.

• Hue. Where the color sits on the wheel. Red, orange, blue, green. Measured in degrees, from 0 to 360.
• Saturation. How intense it is. From gray to full color.
• Lightness. How light or dark it is. From black to white.

Most people only change the hue. The real control is in the other two.
A soft, grayish blue and a bright electric blue are both blue. They tell completely different stories. One whispers. One shouts.

And lightness does something hue cannot do. It creates hierarchy. The darkest and the lightest colors on a page decide what is seen first.

✦ Harmonies, and when to use them

• Monochrome. One hue in different lightness steps. Calm, clean, very safe. Good for corporate work, reports and interfaces. The risk: it can feel flat. One small accent often helps.
• Analogous. Neighbors on the color wheel. Yellow, orange and red. Or blue, teal and green. Soft and natural, like a landscape. Good for food, wellness and nature.
• Complementary. Opposites on the wheel. Blue and orange. Purple and yellow. Strong contrast and energy. Let one color lead and use the other as a small accent.
• Triadic. Three colors evenly spaced around the wheel. Lively and playful. Needs a calm base, or it becomes a fairground.

A harmony is a starting point, not a rule. Once you have one, adjust saturation and lightness until it fits your message.

✦ How to use this generator

1. Choose a tab. Palette Generator for a full set. Random Color for a quick spark. Brand Colors for a set with a clear character.
2. Pick a base color. Start from a color you already have, like a logo or a photo.
3. Choose a color harmony: analogous, complementary, triadic or monochrome.
4. Choose a brand mood: fresh, luxury, playful or minimal.
5. Click Generate colors. Try a few rounds. Do not keep the first one just because it came first.
6. Copy the HEX, RGB or CSS values and test them in a real layout.

✦ From one color to a full palette

One color is not a palette yet. A working palette has roles.

• Main color. The one people remember.
• Tints. Lighter versions, for backgrounds and soft areas.
• Shades. Darker versions, for text and hover states.
• Neutral. A gray or off-white with a hint of your main hue.
• Accent. One color with a clear job, like a button.

An example. Start with a terracotta: hsl(14, 65%, 50%).
A soft background tint: same hue, less saturation, lightness around 95%.
A dark shade for text: same hue, lightness around 20%.
A neutral: same hue, saturation around 10%, lightness around 96%.
An accent: a deep teal on the other side of the wheel, used only for buttons.

Five colors. One family. And every color knows what it is for.

✦ Colors change their neighbors

A color never appears alone. The same gray looks warm next to blue and cool next to orange. The same red looks brighter on black than on white.

The painter and Bauhaus teacher Josef Albers made whole exercises of this. His book Interaction of Color (1963) shows how one color can look like two, and two colors like one.
The lesson for designers is simple. Never judge a color on its own. Judge it in its place.

✦ Warm, cool and meaning

Reds, oranges and yellows feel warm. They come forward. Blues and greens feel cool. They step back.
You can use that. A warm button on a cool page stands out without being bigger.

Meaning is less fixed than people think. White is purity in one culture and mourning in another. Green can mean nature, money or "go".
Ask what your audience already connects with a color. Then decide whether to follow that, or to surprise.

✦ Start from something real

The best palettes rarely start on a screen.
A market stall. A faded poster. The inside of a shell. A coat on a tram.

1. Take a photo of something that has the feeling you want.
2. Pick one color from it as your base color.
3. Generate a palette around it.
4. Put the photo next to the palette. Do they still belong together?

The palette will feel lived in, not generated.

✦ Color and accessibility

Around one in twelve men and one in two hundred women see color differently. Red and green are the most common confusion.

So never let color carry information on its own. An error needs a word or an icon, not only red. A chart needs labels or patterns, not only colored lines.
And check text colors for contrast. A palette that nobody can read is not finished.

✦ In practice

A food blog. Start from the photos: warm wood, tomatoes, basil. Pick a deep red from one of them.
Generate an analogous palette around it and add a warm off-white. The colors now match the food instead of fighting it.

A presentation for a board meeting. Monochrome. One calm blue in four lightness steps, plus one accent for the key number.
The audience looks at the data, not at the slides.

A children's workshop poster. Triadic colors, fully saturated, on a white background.
Loud on purpose. But even here: one color for the date and time, so parents find it.

A luxury brand. Low saturation, deep shades, lots of off-white. One metallic-feeling accent, used rarely.
Luxury is often about restraint. Fewer colors, more space.

✦ Four questions before you choose

1. What do you want to say? One feeling. Calm, bold, warm, fresh.
2. What must be seen first? Give that the most saturated or the darkest color.
3. What can go? The color you keep because it is pretty, not because it has a job.
4. What is the next small step? Save the palette and use it on one real design.

✦ Common mistakes

• Keeping all colors at full saturation. It gets loud very fast.
• No neutral. Every palette needs a quiet color to rest on.
• All colors at the same lightness. In grayscale they turn into one gray.
• Too many choices at once. Generate, choose, stop.
• Pure black text on pure white for long reading. A very dark tint is softer on the eyes.
• Forgetting context. The same color feels different on white, on black and on gray.

✦ A small checklist

• Three to five colors, including one neutral.
• Every color has a written role.
• Clear difference in lightness between the colors.
• Text colors pass a contrast check.
• Information is never shown by color alone.
• Codes are saved in one place for later.

✦ Try this

Remove until it hurts. Generate a palette. Remove one color. Does it get better or worse?
Keep removing until it gets worse. Then put the last one back.

The grayscale test. Turn your design black and white. Can you still see what is most important?
If not, change the lightness of your colors. Not the hue.

✦ Words worth knowing

• Tint. A color mixed with white. Lighter.
• Shade. A color mixed with black. Darker.
• Tone. A color mixed with gray. Softer.
• Harmony. A set of colors chosen by their position on the color wheel.
• Accent. A color used sparingly to draw attention.

✦ From the classroom

We sometimes give students only three colors for a whole project. It feels like a restriction.
It is the opposite. With fewer colors, every choice counts. The work becomes stronger.