Color Palette Generator — Complementary, Analogous and Triadic
Generate a harmonious colour palette from any base colour. Complementary, analogous, triadic, monochromatic, tints and shades. Copy HEX, RGB, HSL or CSS variables, with built-in WCAG contrast checks.
Last updated: June 2026
Base colour
Presets
Click any swatch to copy its HEX code. Each swatch shows its best contrast ratio and WCAG pass level.
About this tool
Build a colour scheme from one colour
Picking colours that work together is hard if you start from scratch. The easier way is to choose one colour you like and let colour theory do the rest. This color palette generator takes a single base colour and builds a matching scheme around it, so your design, brand or slide deck looks intentional instead of random.
Choose the harmony that fits your goal. Complementary pairs your colour with its opposite for punchy contrast. Analogous uses neighbouring hues for a calm, cohesive feel. Triadic and split-complementary give balanced, lively combinations, while monochromatic, tints and shades stay in one hue and vary the brightness. Each swatch shows its HEX, RGB and HSL values and a WCAG contrast rating, so you know which colours are safe for text.
When you have a palette you like, copy every HEX code at once, export the colours as CSS custom properties ready to paste into a stylesheet, or download the palette as a PNG strip to share. Everything runs in your browser with no account and nothing uploaded. Start from a preset like Ocean or Sunset, or hit Random until something catches your eye.
How it works
Three quick steps — no account, nothing uploaded to a server.
Pick a base colour
Use the picker, type a HEX/RGB value, or go Random.
Choose a harmony
Complementary, analogous, triadic, tints and more.
Copy or export
Copy HEX, export CSS variables, or download a PNG.
FAQ
Frequently asked questions
How does a color palette generator work?
You pick one base colour and the tool builds a matching scheme using colour theory. It converts your colour to HSL, then rotates the hue or adjusts the lightness by fixed amounts to find colours that look good together. Complementary uses the opposite hue, triadic uses three evenly spaced hues, analogous uses neighbouring hues, and monochromatic varies only the lightness.
What is the difference between complementary, analogous and triadic?
Complementary picks the colour directly opposite on the colour wheel for high contrast. Analogous picks colours next to each other for a calm, harmonious look. Triadic picks three colours evenly spaced around the wheel for a balanced but vivid scheme. Split-complementary, tints, shades and monochromatic give you even more options from the same base.
How do I copy the colors?
Click any swatch to copy its HEX code to your clipboard. Use Copy all HEX to grab every colour at once, or Copy as CSS to get ready-to-paste CSS custom properties like --color-1: #2563EB. You can also download the whole palette as a PNG strip.
What does the contrast ratio on each swatch mean?
It shows the WCAG contrast ratio of that colour against whichever of black or white reads better on it, plus whether it passes accessibility standards. AA means it is fine for normal text (4.5:1 or higher), AA Large is acceptable for large text (3:1), and Fail means avoid using it for text. It helps you build palettes that are usable, not just pretty.
Is this different from your color converter?
Yes. The color converter changes one colour between formats like HEX, RGB and HSL. The image color picker pulls colours out of a photo. This palette generator does something different: it takes one colour and creates a whole harmonious scheme of matching colours for a design or brand.
Related developer tools
You might also need these.