Color Palette Generator

Start with one colour, perhaps your logo or a favourite shade, and get matching palettes built on classic colour-wheel harmonies: complementary, split-complementary, analogous, triadic, tetradic, square and monochromatic. Every swatch shows its HEX and RGB code, one click copies it, and the export box gives the whole palette as CSS variables, SCSS, JSON or a plain list.

Color & Palette Runs in your browser

Generate a Colour Palette

JavaScript is required. This tool runs in your browser, so please enable JavaScript to use it. The instructions below are still available.

Base colourHEX, rgb(), hsl() or a CSS colour name.

Or pick it

Harmony

Export as

How to Use the Palette Generator

Type a base colour or pick it with the colour picker.
Choose a harmony, or keep “Show all harmonies” to compare them.
Press any swatch's code to copy it.
Pick an export format and copy or download the code.

About This Tool

Designers and developers choosing brand and interface colours, artists planning a painting, and students learning colour theory.

Input: HEX / RGB / HSL colour · Output: HEX / CSS / SCSS / JSON.

Features and Limitations

Features

Seven harmony types calculated on the HSL colour wheel.
Accepts HEX, rgb(), hsl() and CSS colour names.
One-click copy of every colour; export as CSS custom properties, SCSS, JSON, HEX or RGB list.
Swatch labels use automatically chosen black or white text for readability.

Limitations

Harmonies are mathematical starting points; they do not check text contrast, so verify text/background pairs with a contrast checker.
Hues are rotated in HSL, which is not perceptually uniform, so some palettes look unevenly bright.
Results are computed in your browser; nothing you enter is sent to a server.

Example

For #1E90FF (hue 210°), the complementary colour is #FF8D1E (hue 30°) and the triadic partners are #FF1E90 and #90FF1E.

Frequently Asked Questions

What is a complementary colour?

The colour directly opposite on the colour wheel, 180° away. Complementary pairs give strong contrast and work well for calls to action.

What is the difference between triadic and tetradic?

Triadic uses three colours evenly spaced 120° apart. Tetradic (rectangle) uses two complementary pairs, here 60° apart, giving four colours.

Which harmony is best for a website?

Analogous and monochromatic palettes feel calm and are easy to use; add one complementary accent for buttons and links.

Are my colours saved?

No. Nothing is stored or sent anywhere; copy or download the export to keep it.