How to build a colour scheme
- Choose a base colour. Drag the ring on the wheel, use the colour picker, or type a code such as #1E90FF, rgb(30, 144, 255), hsl(210, 100%, 56%) or a name like tomato.
- Pick a scheme. Complementary, analogous, triadic and the others place matching colours on the wheel at fixed angles from your base colour.
- Copy what you need. Click a colour to copy its hex code, or use Copy as CSS to get the whole scheme as CSS custom properties.
Good to know
- Seven schemes. Analogous (30° either side), complementary (opposite), split complementary, double split complementary, triadic, tetradic (rectangle) and square.
- It’s a screen colour wheel. The wheel is built from hue and saturation (HSL), as used on the web. A painter’s red-yellow-blue wheel puts some colours in different places.
- The middle is grey, the edge is vivid. Moving towards the centre lowers saturation. The Brightness slider sets lightness for the whole wheel.
- Tints, shades and tones. Below the wheel, your colour is mixed with white, black and grey in ten steps. Click one to make it the new base colour.
- Works with the keyboard. Focus the ring, then use the left and right arrows to change hue and up and down to change saturation.
Your colours stay on your device
Every scheme is worked out in this browser tab, so a client’s brand colours or an unreleased product palette are never sent to a server. Nothing is saved, and there’s no account.
The page’s security policy tells your browser to block uploads, so nothing you type can leave your device even by accident. You can check: open your browser’s developer tools, watch the Network tab, and move the wheel. How InTheTab works
You’ll also see a few small requests to Google Analytics. That’s our visit counter, and it never receives your files. Privacy policy
Questions
What are complementary colours?
Colours opposite each other on the colour wheel, 180° apart, such as blue and orange. Choose Complementary in the Scheme list to see the match for any colour.
How do I use this as a colour palette generator?
Pick a base colour and a scheme, then use Copy as CSS. You get lines like --color-1: #BF7B6D; for each colour, ready to paste into a stylesheet. For lighter and darker versions of one colour, use the tints and shades rows.
Which colour formats can I type?
Hex codes with or without the #, in 3 or 6 digits, rgb() and hsl() values, and CSS colour names such as tomato or steelblue. The scheme colours are copied as hex codes.
Is it free? Do I need to sign up?
It’s free, with no sign-up and no limits. It runs in any modern browser on Windows, Mac, Linux, Android or iPhone.