Color palette generator: start from one color, copy every code

A color palette is the set of 3 to 6 colors your brand uses everywhere: website, social posts, signs and invoices. This color scheme generator builds one from a single color using the rules of the color wheel. It also tells you which colors can carry text.

How to use the color palette maker

1. Pick your starting color

   Done

   Use the picker, paste a HEX, RGB or HSL code, or grab a color from your screen with the eyedropper (Chrome and Edge on desktop).

2. Choose a harmony

   Done

   Six rules, from complementary to monochromatic. The wheel shows where each color lands.

3. Lock what you like and shuffle the rest

   Done

   The padlock keeps a color in place. “Random palette” only changes the others, so it works as a random color palette generator that never tosses your favorites.

4. Copy the codes or the CSS

   Done

   Click any code to copy it, or copy the whole hex color palette at once. Below you get CSS variables and a tints and shades generator for your color.

Hex color codes: how to read them and convert them to RGB

“Hex color codes” gets about 22,200 searches a month in the US, and AI assistants add roughly 9,000 more, according to DataForSEO (October 2026). A hex code is three pairs of base-16 digits: red, green and blue. Take the coral #E4572E:

Pair	Hex	Decimal
Red	E4	228
Green	57	87
Blue	2E	46

Each pair is first digit × 16 plus the second, with E worth 14, so E4 is 14 × 16 + 4 = 228. That makes rgb(228, 87, 46), and the tool also shows it as hsl(14, 77%, 54%). Two shortcuts help: #F00 is short for #FF0000 when each pair repeats, and an eight-digit code adds transparency in the last pair, so #E4572E80 is the same coral at about 50% opacity.

Complementary colors, analogous colors and triadic colors: the math

Every harmony rotates the hue (H) of your color on the HSL wheel, the one screens use. Saturation and lightness stay put, so the new colors carry the same weight as yours.

Harmony	Rotation on the wheel	Use it for
Complementary colors	180°	A button that has to pop, no matter what
Split complementary	150° and 210°	Strong contrast that’s easier on the eyes
Analogous colors	±30° and ±60°	Calm brands: wellness, outdoors, home
Triadic colors	120° and 240°	Playful brands: kids, games, entertainment
Tetradic	90°, 180° and 270°	Lots of range: one leads, the rest support
Monochromatic color palette	0° (lightness moves in 15-point steps)	Clean websites and minimal decks

Tints and shades mix your color with white or black: tint = color + (255 − color) × t, and shade = color × (1 − t), with t in 20% steps. Use them for backgrounds, borders and button hover states.

How color contrast is calculated (WCAG)

Every swatch shows its contrast against white and black, using the formula in the W3C’s WCAG 2.2 contrast guidance, the web accessibility standard. First comes relative luminance (L = 0.2126 R + 0.7152 G + 0.0722 B, with each channel linearized). Then the ratio: (L1 + 0.05) / (L2 + 0.05).

Level	Normal text	Large text (24px, or 18.5px bold)
AA	4.5:1	3:1
AAA	7:1	4.5:1

Gray #767676 on white scores 4.54:1, so it barely passes AA. If a swatch says “Fail” with both white and black, keep it off your text.

Pastel color palette: how to make one from any color

“Pastel color palette” pulls about 12,100 searches a month in the US (DataForSEO, October 2026). A pastel is your color mixed with a lot of white, and the tool already computes that in its tints. Using the teal #2A9D8F as the example:

Tint	Code	Contrast with white	Contrast with navy #1F3A5F
60%	#AAD8D2	1.56:1	7.35:1
80%	#D4EBE9	1.24:1	9.25:1

Our own math, using the WCAG formula. The lesson: a pastel is a background, not a text color. On white it doesn’t even reach 2:1, while navy text clears even AAA (7:1) on both tints. Use 60% to 80% tints for cards, banners and section backgrounds, and keep the full-strength color for the button.

Brand color palette examples for small businesses

• Dental or physical therapy clinic: teal with its analogous colors. It feels calm, and the 80% tint makes a great section background.
• Online clothing store: a monochromatic black or sand palette, plus one complementary color only for the buy button. If everything shouts, nothing sells.
• Coffee shop or restaurant: a warm triad (terracotta, mustard and olive) with plenty of off-white.

The rule that works best for a brand color palette is 60-30-10: 60% neutral, 30% main color and 10% accent for whatever you want clicked. Put it next to your logo and tagline (these slogan examples help) and check they tell the same story. Building the site? Our guide on how to build a website with AI shows where to paste the variables. For flyers and signs, make a QR code in your brand colors.

Frequently asked questions about color palettes

01

How do you choose colors for a color palette?

Start with one color that says who you are: blues and greens tend to read as trust and health, reds and oranges as energy. Check what your three closest competitors use and pick something that sets you apart. Then build the harmony here, add one light and one dark neutral, and test it on real pieces: your homepage, a social post and a business card. If it still feels off, change the starting color, not the rule.

02

What mistakes should you avoid with a color palette generator?

The big three: using every color at the same volume, skipping the contrast check and falling for a palette that only looks good as five pretty squares. A palette lives on real layouts, so one color should lead and the rest should support. Run any color that will carry text through the contrast badges, and if one fails with both white and black, keep it for backgrounds. Finally, try it on your actual logo before you commit.

03

Can I make a color palette from a photo?

Yes. Put the photo on your screen, click the tool’s eyedropper and pick the color you like most: it becomes your starting color and the palette builds itself. The eyedropper works in Chrome and Edge on desktop. On a phone or in other browsers, grab the HEX code with the eyedropper in any photo editor and paste it into the “HEX, RGB or HSL” field. Your photo never gets uploaded anywhere.

04

What colors go well together?

Colors that have a clear relationship on the wheel: opposites, like a painter’s blue and orange; neighbors, like green, teal and blue; or evenly spaced trios, like red, yellow and blue. Neutrals such as off-white, gray, beige and navy go with almost anything. What rarely works is several highly saturated colors fighting for attention with no clear lead. Pick one hero color and use the others in smaller doses.

05

What is a complementary color?

It’s the color directly across the wheel, 180° away, which gives you the strongest hue contrast possible. Heads up: there are two wheels. On the painter’s wheel (red, yellow, blue), blue’s complement is orange; on the screen wheel (RGB, the one this tool and all digital design use), it’s yellow. For websites and social media, RGB is the one that counts. Use complements in small doses, like a button or a sale tag.