Color palette generator tool
Start from
Three honest ways to seed a palette pick a color, pull one from a photo, or turn a name into one.
Harmony type Colors directly opposite each other. Bold, high-contrast pairs.
Palette size: 4
Saturation: 55–85%
Lightness: 35–75%
Your palette Complementary harmony
CSS custom properties
:root {
--color-1: #28358A;
--color-1-rgb: 40, 53, 138;
--color-1-hsl: hsl(232, 55%, 35%);
--color-2: #8998F5;
--color-2-rgb: 137, 152, 245;
--color-2-hsl: hsl(232, 85%, 75%);
--color-3: #8A7D28;
--color-3-rgb: 138, 125, 40;
--color-3-hsl: hsl(52, 55%, 35%);
--color-4: #F5E789;
--color-4-rgb: 245, 231, 137;
--color-4-hsl: hsl(52, 85%, 75%);
}Live UI preview
Design with confidence
This palette applied to a real layout, so you can see how it feels before you commit.
#28358A
#8998F5
#8A7D28
WCAG accessibility summary
| Color | Hex | vs white | vs black |
|---|---|---|---|
| #28358A | AAA (10.68:1) | Fail (1.97:1) | |
| #8998F5 | Fail (2.67:1) | AAA (7.87:1) | |
| #8A7D28 | AA Large (4.16:1) | AA (5.04:1) | |
| #F5E789 | Fail (1.26:1) | AAA (16.67:1) |
AA requires a contrast ratio of 4.5:1 for normal text. AAA requires 7:1. AA Large applies to text at 18pt, or 14pt bold.
Three honest ways to start a palette
Most palette tools only do the first one. All three feed the same harmony engine below.
From a color
Pick an exact hex value or use the color picker when you already know your starting point.
From a photo
Upload a moodboard image, product photo, or any picture that captures the feeling you want, and pull real colors out of it.
From a name
Type a project or brand name for a deterministic color the same name always returns the same result, every time.
The 8 harmony types, and when to reach for each
Every harmony is a different rule for spacing hues around the color wheel. Tap one to expand it.
Two colors sitting directly opposite each other on the wheel. This is the strongest contrast relationship available, which makes each color look more vivid next to the other — a blue and orange pairing is the classic example.
Works well for: Call-to-action buttons, logos, anything that needs to pop
Colors that sit next to each other, usually within a 30–60° range. They share an undertone, so the result feels cohesive rather than jarring. Most color combinations you see in a sunset or an autumn forest are analogous.
Works well for: Nature and wellness brands, photography sites, calm interfaces
Three colors spaced exactly 120° apart. The primary triad, red, yellow, and blue, is the most recognizable example. Triadic palettes are vibrant by default and need a light hand to avoid feeling chaotic.
Works well for: Playful consumer brands, children's products, food packaging
A base color plus the two colors next to its complement, rather than the complement itself. This keeps most of the contrast of a complementary pair with less of the visual vibration.
Works well for: UI design and editorial layouts that want contrast without visual tension
Two complementary pairs, four colors total, spread across the wheel. It's the widest tonal range on this list, and it needs one dominant color with the rest as accents to stay balanced.
Works well for: Data visualization, complex interfaces, seasonal campaigns
Four evenly spaced colors. Similar range to tetradic, but more evenly balanced rather than leaning on two dominant pairs — the trade-off is it takes more discipline to keep one color from fighting another.
Works well for: Bold contemporary branding, gaming and tech products
A single hue stretched across a range of saturation and lightness. Easiest harmony to keep cohesive, hardest to make feel distinct — a wide lightness range is what gives it visual hierarchy without a second hue.
Works well for: Minimalist UI, luxury brands, elegant presentation decks
Set the hue offsets by hand. Use it when a brand guideline hands you a fixed relationship between colors that isn't one of the seven named harmonies above.
Works well for: Anyone with a specific brand requirement that doesn't fit a standard rule
Why every palette here includes a contrast score
A palette that looks good in isolation can still fail in production if the text color doesn't clear a readable contrast ratio against its background. The Web Content Accessibility Guidelines set the bar, and this tool checks it automatically for every color, against both white and black.
AA — normal text
4.5:1 minimum. The baseline most sites need to meet for body copy.
AA — large text
3:1 minimum. Applies to text at 18pt regular or 14pt bold, and to UI components like buttons.
AAA — normal text
7:1 minimum. An enhanced standard, not mandatory everywhere, but worth aiming for on government or healthcare sites.
AAA — large text
4.5:1 minimum. The enhanced standard for larger text sizes.
Building a brand palette from nothing
A repeatable process, not a list of pretty combinations to copy.
Start with one real color
Pick your primary brand color, extract one from a photo that matches the brand's mood, or type the brand name into the Name tab if nothing exists yet.
Run a harmony to find companions
Complementary gives a strong accent for buttons. Analogous gives a softer secondary palette. Triadic gives range and energy. Try more than one before deciding.
Check contrast before anything else
Look at the WCAG summary for every color. Your body text color needs to clear 4.5:1 against its background catching a failure here costs a minute, catching it after launch costs a rebuild.
Give each color a job
Primary for main brand elements, one or two secondaries for supporting content, a neutral for backgrounds and body text, an accent for calls to action. Un-assigned colors get used inconsistently.
Export as CSS variables, not hardcoded hex
Paste the CSS export into your root stylesheet and reference colors by name throughout the project. A future palette change becomes a one-file edit instead of a find-and-replace across every component.
Who this actually saves time for
UI and product designers
Get an accessibility-checked color system in under a minute instead of testing combinations by hand. The live UI preview shows the palette on real interface elements, not isolated swatches.
Frontend developers
Copy production-ready CSS custom properties directly. The WCAG table confirms compliance before a design even reaches review.
Brand and identity designers
Explore harmony relationships fast during discovery, or pull a starting color straight from a moodboard photo instead of eyeballing a hex value from a screenshot.
Marketers and non-designers
Type a campaign or product name into the Name tab for an instant, consistent placeholder color, no design background required.
Questions people ask before generating a palette
Direct answers on photo extraction, AI, accessibility, and how this compares to other tools.
Yes. No account, no signup, and no usage limit on any of the three starting modes, the harmony engine, or the exports.
Yes — the Photo tab reads the image directly in your browser and extracts its most common distinct colors using pixel sampling, not a placeholder or a guess. Tap any extracted color to run it through the harmony engine for a full palette.
Yes, in the Name tab. Typing in a project or brand name deterministically produces a color, meaning the same input always gives the same output. It's a genuinely repeatable way to get a placeholder brand color before a logo exists.
No, and we'd rather say so plainly than imply otherwise. Every palette here comes from color theory math, hue rotations, contrast ratio formulas, and a deterministic hash for the Name tab. Nothing is generated by a machine-learning model, which also means results are fully explainable and reproducible.
Adobe's color tools live inside a larger creative suite and typically expect an Adobe account. This is a single-purpose, free, browser-only tool with no account of any kind: pick a color, a photo, or a name, and get a harmony-checked, WCAG-scored palette in seconds.
Yes, this is one of the most common uses. Generate a palette, check the WCAG summary against your text and background pairings, then copy the CSS custom properties directly into your stylesheet.
Use the Photo tab and upload an image containing the tone or detail you want, a portrait, a fabric swatch, a product shot. The extraction reads actual pixels from the image, so it works for any subject, not just landscapes.
There's no dedicated game-specific mode, but the harmony engine and the photo extractor both work for any project, including pixel art and game assets. Set a small palette size and a narrower saturation range for a more limited, retro-style set of colors.
Most palettes that hold up in practice have 3 to 6 colors: one primary, one or two secondaries, a neutral for backgrounds and text, and one accent for calls to action. More than that and consistency starts to slip.
Build your first palette
A color, a photo, or a name. No signup, either way.