Color palette generator

How to make a color palette

A color palette is the short list of colors a brand, website or project uses every time, each with a clear job. This generator builds one from wherever you are starting: a brand color you already have, a photo, or just a harmony rule. Everything runs in your browser, so no color, photo or file is sent to a server.

From one color

Type your hex code into the base color field (for example #C5A958) or pick it with the swatch. The generator reads its hue, saturation and lightness and builds the rest of the palette around it, following the harmony you chose. The base color always stays in the palette, unchanged, so the result works with the logo you already have. Press Generate, or the space bar, for more variations on the same base. Clear the field to go back to random palettes.

From a photo

From photo pulls the dominant colors out of an image: a product shot, a shop front, a campaign visual or a feed you admire. The image is scaled down and analyzed on your device with a median cut algorithm, which splits the pixels into groups until there is one group per color and returns the average of each. Photos with a few clear areas of color give the best results. A busy image gives muddier colors, because each group mixes different tones, and a small accent, like a red logo on a gray wall, can disappear into a bigger group.

By harmony

Harmonies are positions on the color wheel. Analogous uses neighbors, complementary uses opposites, triadic uses three hues 120 degrees apart, and monochromatic uses one hue at several lightness levels. Warm and cool keep to one side of the wheel; Any harmony mixes hues more freely. Lock the colors you like with the padlock and generate again: only the unlocked ones change. You can drag columns to reorder them, insert a color between two others, and remove the extras, from 2 to 10 colors. On a phone the palette is a strip you can swipe sideways, with the padlock, copy and remove buttons at the top of each color.

Share, export and check contrast

The page address changes with every palette and ends with the hex codes, so Share copies a link that shows anyone exactly the same colors. Export gives you CSS custom properties, SCSS variables, a theme.extend.colors block for Tailwind, JSON or a PNG image, with each color's name already in the variable name. Contrast opens a grid of every background and text pair with its ratio and WCAG level. For a single pair, with suggestions for the nearest color that passes, use the color contrast checker.

Which colors go well together?

There is no fixed list, but a few relationships work almost every time because they give the eye either a clear contrast or a predictable transition. The four below cover most brand and website palettes. In each one, the first decision is which color leads and which ones support it.

Complementary: strong contrast

Opposites on the wheel, such as blue and orange, green and red, or violet and yellow. Together they vibrate, so they work best when one dominates and the other appears in small doses: buttons, prices, highlights. Example: a deep teal #1F5F6B as the main color, with a terracotta #C4663F kept for calls to action.

Analogous: smooth transitions

Three to five neighboring hues, for example from green to blue. The result is calm and consistent, common for nature, health and wellness brands. The risk is weak contrast: because the hues are close, the difference has to come from lightness. Example: #0F3D3E, #2E8B7A and #9ED9C4, dark to light, with the darkest kept for text.

Triadic: balance with energy

Three hues spaced evenly around the wheel. Livelier than analogous and more balanced than complementary, but three saturated colors side by side tire the eye quickly. The usual fix is to tone two of them down, or to use one as the lead and the others sparingly. Example: #296A99, #B2387F and #739B3B.

Neutrals: what holds a palette together

White, black, grays, beige and light browns have little or no hue, so they sit well with almost anything and give strong colors room to breathe. In a brand palette they usually cover most of the surface: backgrounds, text and lines. A common rule of thumb in interiors and design is 60-30-10: about 60% for the dominant color (often a neutral), 30% for the secondary and 10% for the accent.

A palette for a brand or a website

A brand palette is not every color you like. It is a small system, with a job for each color, repeated the same way on the website, social media, stationery and signage.

How many colors

Three to five is enough for most brands: one primary, one or two supporting colors, and two neutrals for background and text. A three color palette (primary, dark neutral, light neutral) is plenty for a small business and easier to keep consistent. Past five, the extra colors tend to show up in one-off pieces and consistency slips. That is why this generator starts with five.

The job of each color

• Primary: the brand color, used in the logo and the main elements.
• Secondary: supports the primary in illustrations, sections and charts.
• Accent: the color of buttons and calls to action, used sparingly so it stands out.
• Neutrals: a dark one for text, a light one for backgrounds and, if needed, a mid gray for lines and secondary text.

Write those jobs down next to the hex codes, with the fonts and the logo rules, and the palette stops drifting from one designer to the next. The free brand guidelines template has a page for exactly that.

Text contrast and WCAG

The Web Content Accessibility Guidelines (WCAG) from the W3C ask, at level AA, for a contrast ratio of at least 4.5:1 between normal text and its background, and 3:1 for large text (24 px, or about 18.7 px bold). Level AAA raises that to 7:1 and 4.5:1. Input borders, icons and other interface parts need 3:1. In this generator each column shows the ratio of the text written on top of it, so you can see straight away which colors can carry text and which belong to surfaces and decoration. When a brand color lands just short, the contrast checker finds the nearest shade of it that passes.

Ready-made palettes

Eight combinations to start from. Each one opens in the generator, where you can lock the colors you want to keep and generate the rest.