Colour theory schemes are built from relationships around the hue wheel, keeping saturation and lightness fixed while rotating hue by a fixed set of angles. A complementary pair sits directly opposite each other at 180 degrees, a triadic scheme splits the wheel into three equal 120 degree steps, and so on. These relationships have been used by designers for centuries because opposing or evenly spaced hues create colour groups that read as deliberate rather than accidental.
Nothing about the colour you start from leaves your device. The hue rotation and every export format are generated by ordinary JavaScript running in your browser tab.
The six schemes this color palette generator builds
Complementary takes the base hue and adds exactly one colour, 180 degrees opposite on the wheel, producing maximum hue contrast and a scheme well suited to a primary and accent colour pairing. Analogous takes hues that sit close together, typically 30 degrees apart on either side of the base, producing a palette that feels cohesive because the colours are visually related.
Triadic places three colours 120 degrees apart, tetradic places four colours 90 degrees apart forming two complementary pairs, and split complementary takes the base colour plus the two hues adjacent to its direct complement, which gives some of the contrast of a complementary scheme with slightly less tension. Monochromatic keeps the hue completely fixed and instead varies lightness and saturation, producing a palette that always looks harmonious because every colour is a variation of one.
- Complementary: two colours, 180 degrees apart, for strong contrast between a primary and an accent.
- Analogous: three to five colours within about 60 degrees, for a cohesive, low tension palette.
- Triadic: three colours 120 degrees apart, for a vivid, balanced scheme.
- Tetradic: four colours in two complementary pairs, 90 degrees apart.
- Split complementary: the base plus the two hues flanking its complement, softer than a direct complementary pair.
- Monochromatic: one hue at several lightness and saturation levels, for a calm, unified palette.
Building an analogous color palette or a triadic scheme
An analogous color palette works well for interfaces where you want variety without the visual jolt of high contrast hues, for example a set of category tags or chart series that should feel like a family. This tool spaces analogous hues 30 degrees apart by default, which keeps every colour clearly distinct while still reading as related.
A triadic color scheme generator, by contrast, is the right choice when you specifically want vividness and energy, since three hues spaced evenly around the wheel maximise perceived variety while still following a structured, intentional relationship rather than being picked at random. Triadic schemes are common in illustration and branding for exactly that reason.
Exporting the palette as CSS, Tailwind or JSON
Every scheme can be copied in three formats. CSS custom properties export as a block of --color-1 through --color-n declarations ready to paste inside a :root selector, which is the most portable option since any framework or plain HTML page can consume CSS variables directly.
The Tailwind export writes each colour as a key inside a colors object shaped for a Tailwind configuration file, so you can paste it straight into your theme extension without renaming anything by hand. The JSON export lists every colour as an object with its hex, RGB and HSL values together, which suits design token pipelines or any tool that reads colour data programmatically rather than as CSS.
How this color palette generator works under the hood
The base colour is first converted to HSL, since hue rotation is trivial in that model, simply adding degrees and wrapping past 360 back to 0. Each scheme applies a fixed set of hue offsets defined by classic colour theory, for example 0 and 180 for complementary, or 0, 120 and 240 for triadic, while monochromatic instead varies lightness across a fixed set of steps at constant hue and saturation.
Every generated hue is converted back to RGB using the standard HSL to RGB algorithm, then to a hex string, so all four representations, hue, HSL, RGB and hex, stay consistent for every swatch in the palette.
| Scheme | Colours | Hue offsets from base |
|---|---|---|
| Complementary | 2 | 0, 180 |
| Analogous | 5 | -60, -30, 0, 30, 60 |
| Triadic | 3 | 0, 120, 240 |
| Tetradic | 4 | 0, 90, 180, 270 |
| Split complementary | 3 | 0, 150, 210 |
| Monochromatic | 5 | 0 for all, lightness varies |
How to generate a color palette
- 1
Pick a base colour
Choose or type the hex code that will anchor every generated scheme.
- 2
Choose a scheme
Select complementary, analogous, triadic, tetradic, split complementary or monochromatic.
- 3
Review the swatches
Each swatch shows its hex code and can be copied individually with one click.
- 4
Export the palette
Copy the whole scheme as CSS custom properties, a Tailwind config snippet or JSON.
Related tools worth bookmarking
Sources and further reading
Frequently asked questions
Common questions about the color palette generator.
A complementary color scheme uses exactly one additional colour, 180 degrees opposite the base hue, which produces the strongest possible hue contrast. Split complementary uses two additional colours, positioned on either side of that same 180 degree point, which softens the contrast slightly while still reading as a clearly deliberate, high energy pairing.
Paste your existing hex code into the base colour field and the tool derives every scheme from it directly, keeping the exact same starting colour rather than approximating it. This is the fastest way to generate color palette from hex values pulled from a brand guideline or an existing design file.
Monochromatic is defined by colour theory as variations of a single hue, so changing the hue itself would produce a different scheme entirely. Varying lightness produces tints and shades, and varying saturation produces more muted or more vivid versions of the same colour, together giving a palette that is guaranteed to feel unified.
Yes. The Tailwind export writes the palette as a colors object formatted for a Tailwind configuration file, with each swatch keyed by its position in the scheme, so you can paste the result into your theme extension section without manually re-typing hex values.
Yes, the 120 degree spacing that defines a triadic scheme applies mathematically to any starting hue, including greys with very low saturation, though a nearly desaturated base colour will produce a subtler triadic result since there is less colour intensity to distribute across the three hues.
Analogous suits content heavy interfaces where you want visual calm and a sense that everything belongs together, such as editorial sites or dashboards with many data categories. Complementary suits interfaces that need one element, typically a call to action button, to stand out clearly from everything around it, since the opposing hue draws the eye immediately.