InputTestHub

Colour Palette Generator

Builds harmonious palettes from a base colour using complementary, analogous, triadic, tetradic and monochromatic rules.

Colour & Design Nothing uploaded No sign-up Free, unlimited
Colour & Design tool
Pick a colour to see every value.
In short Colour harmony rules are geometry on the colour wheel: complementary is the hue directly opposite, analogous is the neighbours either side, triadic is three evenly spaced, tetradic is two complementary pairs, and monochromatic is one hue at different lightnesses. Each rule produces colours that are demonstrably related, which is genuinely useful — but a set of related colours is not yet a palette, and this is where generated schemes usually fail. A working palette needs a hierarchy: one dominant colour that covers most of the surface, one accent used sparingly for the things you want clicked, and a set of neutrals doing most of the actual work. Five equally vivid colours from a triadic scheme have no hierarchy at all, and a page built from them looks like a sample sheet. The standard rough division is around 60% dominant, 30% secondary, 10% accent, and the accent is the one that must survive a contrast check because it will end up on buttons and links. Use the rules to find candidates, then deliberately demote most of them — desaturate, lighten, or reduce them to a border colour.

How to use the Colour Palette Generator

  1. Pick a colour with the picker or paste a HEX, RGB or HSL value.
  2. Every other format and the generated variations update instantly.
  3. Click any value or swatch to copy it.

About the Colour Palette Generator

The Colour Palette Generator builds harmonious palettes from a base colour using complementary, analogous, triadic, tetradic and monochromatic rules. It runs as plain JavaScript inside the page, which means there is no upload step, no queue and no size limit imposed by a server — the only limit is your own device.

What people use it for

  • Building a colour scheme from a brand colour.
  • Finding an accent that works with an existing palette.
  • Exporting design tokens straight into a codebase.

Frequently asked questions

Is the Colour Palette Generator free?
Free, unlimited, and no email address required. You can use it a hundred times a day and nothing changes.
Does anything I enter leave my computer?
No. The Colour Palette Generator runs entirely in your browser using JavaScript. Your input never reaches inputtesthub.com or any third party — open your browser's Network tab while you use it and you will see no request go out.
What problem does the Colour Palette Generator solve?
The jobs it is built for: building a colour scheme from a brand colour. Finding an accent that works with an existing palette. Exporting design tokens straight into a codebase. It is built for exactly those cases rather than being a general-purpose tool with this bolted on.
Will this work on a tablet?
Yes. The page is responsive and the page works in Chrome, Safari, Firefox, Edge and Samsung Internet on both Android and iOS. There is no app to install and nothing to sign into.

Related colour & design tools

All 33
01

Colour Code Converter

Converts colours between HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK, LAB and named CSS colours.

02

Colour Picker

Picks any colour and shows its HEX, RGB, HSL, HSV, CMYK and LAB values, plus tints, shades and…

03

HEX to RGB Converter

Converts HEX colour codes to RGB and RGBA values, handling 3, 4, 6 and 8 digit hex.

04

RGB to HEX Converter

Converts RGB and RGBA values into HEX colour codes, including 8-digit hex with alpha.

05

HSL Colour Converter

Converts between HSL, HEX and RGB, so you can adjust lightness and saturation predictably.

06

CMYK Colour Converter

Converts between CMYK and RGB or HEX for print work, with a note on gamut differences.

08

Colour Contrast Checker

Calculates WCAG contrast ratio between two colours and reports AA and AAA pass or fail for…

10

Tailwind Colour Converter

Finds the nearest Tailwind colour class for any hex value, and shows the hex for any Tailwind…