Color Palette Generator
Generate harmonious colour palettes using real colour-theory rules β Monochromatic, Analogous, Complementary, Triadic and more. Lock the colours you like, fine-tune any swatch by hand, and export straight to CSS, SCSS, Tailwind or JSON.
:root {
--color-1: #1B2A4A;
--color-2: #3C6E71;
--color-3: #84A98C;
--color-4: #E9C46A;
--color-5: #E76F51;
}How to Generate a Color Palette
Features
Why Random Colors Rarely Look Right Together
Pick five colours off the top of your head and put them side by side, and they almost never work β not because you have bad taste, but because pleasing colour combinations follow structural rules that aren't obvious from looking at a single colour in isolation. A palette that feels cohesive usually has its hues placed at deliberate angles around the colour wheel, with saturation and lightness varied in a controlled way so nothing fights for attention. That structure is exactly what a harmony-based generator automates: instead of guessing, you pick the relationship you want and let the engine place every hue correctly relative to the others.
This tool goes further than a plain random-hex button. Every palette respects one of eight named colour-theory relationships, every swatch can be locked and rebuilt around, and every colour can be hand-adjusted afterwards without losing the harmony you started with β the kind of workflow you'd expect from a dedicated design app, not a quick utility.
Eight Ways to Build a Palette, Not Just One
Monochromatic keeps a single hue and only varies lightness, producing the safest, most cohesive result β ideal for a UI where one brand colour needs to appear at several intensities. Analogous uses hues sitting close together on the wheel, which reads as calm and natural, common in editorial and lifestyle brand palettes. Complementary alternates between two opposite hues for maximum contrast and energy, while Split-Complementary softens that same contrast by using two hues near the opposite point instead of one.
Triadic, Tetradic and Square space three or four hues evenly around the wheel β playful and balanced, frequently used in illustration and product palettes that need several distinct colours without any one dominating. Random drops the hue relationship entirely and lets every swatch roll independently, which is where genuinely unexpected combinations tend to come from. If you already know a colour you want to build around, paste it into the "Start from" field β every mode will treat it as the seed instead of picking one for you.
Lock, Fine-Tune, Regenerate β The Workflow That Actually Works
The single most useful action in this tool is the lock icon. A palette rarely arrives perfect on the first try β usually four colours are right and one is wrong. Lock the four you want, press Generate again (or just hit the Spacebar), and only the unlocked swatch gets reshuffled, using the locked hues as its seed so the replacement still belongs with the rest. Repeat that a few times and you converge on a finished palette far faster than regenerating the whole thing and hoping.
Once you're close, click directly on a swatch to open its fine-tune editor β independent Hue, Saturation and Lightness sliders, plus one-click Lighter, Darker, More Vivid and More Muted buttons for the adjustments people make most often. Editing a swatch this way locks it automatically, so a later Generate never quietly undoes a manual tweak. If you'd rather sample an exact colour from an existing logo or photo first, do that in the Color Extractor or Color Picker, then paste the result into the seed field here to build a full palette around it.
Who Reaches for a Palette Generator
UI and product designers setting up a design system who need a primary, secondary and a couple of accent colours that are guaranteed to relate to each other, exported straight into a CSS or Tailwind config rather than typed in by hand.
Front-end developers who can write the code but not necessarily pick the colours β starting from a harmony mode instead of a blank hex field removes most of the guesswork.
Indie hackers and small teams building a landing page or app who need a palette that looks intentional without hiring a designer for what is fundamentally a five-minute decision.
Students and hobbyist illustrators learning colour theory by name β seeing what "triadic" or "split-complementary" actually looks like is a faster teacher than reading the definition.
From a Landing Page to a Full Design System
Launching a new product page: start on Random until one palette feels right, lock the two colours you like most, switch to Analogous or Split-Complementary to fill in gentler supporting tones, then copy the CSS variables straight into your stylesheet.
Building out a Tailwind theme: generate a Monochromatic palette from your brand colour for a full tint/shade range, export as a Tailwind snippet, and paste it directly into theme.extend.colors β no manual hex-to-token mapping required.
Matching an existing brand asset: if you're starting from a logo rather than a colour you already know, pull its dominant tones with the Color Extractor first, then drop the strongest one into the seed field here to build a full supporting palette around it.
Handing colours to a developer: once a palette is locked in, switch to the CSS or SCSS export tab so the exact values ship as copy-pasteable code instead of a screenshot someone has to eyeball and re-enter.
Nothing Leaves Your Browser
Every hue calculation, the contrast check, the PNG export, and the palettes you save all run locally using plain JavaScript and your browser's own storage. There's no upload, no processing delay, and no account required to save a palette or come back to it later on the same device. That also means there's no server round-trip between changing a slider and seeing the result β every adjustment is instant, which matters when you're iterating quickly between a few close variations.
Getting Palettes That Actually Ship
- Start from your one non-negotiable colour. If your brand already has a fixed primary colour, paste it into the seed field first β every harmony mode will build around it instead of replacing it.
- Lock early, not late. The moment a swatch looks right, lock it before your next Generate β it's much faster to build a palette around two or three anchors than to keep re-rolling all of them at once.
- Use Monochromatic for interfaces, not illustrations. A single-hue palette gives UI elements a calm, unified feel; it usually reads as flat or dull for anything meant to look vibrant or playful.
- Check the contrast pips before finalising text colours. A palette can look great as blocks of colour and still fail as text-on-background β the ratio between adjacent swatches is a fast first check, not a substitute for testing your actual layout.
- Export early and often. Copy the CSS or Tailwind snippet the moment a palette feels right rather than leaving it in the browser tab β a closed tab with an unsaved palette is the most common way people lose one they liked.
- Building a full gradient from two palette colours? Pass the two hex codes into the CSS Gradient Generator to get a ready-to-paste CSS gradient between them.
When a Palette Looks Off
Every colour looks muddy or grey. This usually means the saturation range landed low across the board β hit Generate again, or open the fine-tune editor and use "More Vivid" on the flattest-looking swatch.
Two colours are almost identical. This can happen with Analogous or Monochromatic modes when the hue or lightness spacing lands close together by chance β lock the colours you want to keep and regenerate just the duplicate-looking one.
The palette feels harmonious but boring. Try switching from Analogous or Monochromatic to Triadic, Tetradic or Square for more hue variety, or use Random and lock only the one colour you actually need to keep.
My locked colour isn't influencing the others the way I expected. The seed hue is the average of all currently locked colours, not just the first one β if you have several locked swatches with very different hues, unlock all but the one you want to anchor around.
Where This Tool Stops
Don't rely on it as your only accessibility check β the adjacent-swatch contrast ratio is a quick sanity check, not a full audit of your finished layout with real text sizes and backgrounds. Use the Color Converter alongside a proper accessibility checklist for anything shipping to production.
Don't expect it to match an exact printed or Pantone colour β this generator works entirely in screen colour space (HSL/RGB), and print reproduction depends on ink, paper and calibration this tool has no way to account for.
Don't use it to extract colours from an existing image β that's a different job handled by the Color Extractor, which analyses actual pixel data rather than generating new colours from theory.