Generate tints, shades, and harmony schemes from one base colour. Click any swatch to copy the hex value.
A tint is a colour mixed with white — it increases lightness while reducing saturation. A shade is mixed with black — darker and often more saturated. Most design systems define a scale of 5–10 stops from lightest tint to darkest shade so you can use the same hue at different brightness levels without jarring contrast jumps.
Colour harmonies are combinations of hues that look visually balanced together. Complementary pairs colours opposite each other on the colour wheel (maximum contrast). Analogous groups adjacent hues (harmonious, low contrast). Triadic uses three evenly spaced hues. Split-complementary takes one colour and the two adjacent to its complement — high contrast but less harsh than pure complementary.
Click any swatch to copy its hex value to your clipboard. A toast notification confirms the copy. You can then paste directly into Figma, CSS, or any design tool.
The Export .css button downloads a small CSS file with the five tint/shade values as custom properties: --color-tint, --color-light, --color-base, --color-shade, and --color-darkest. Paste them into your :root block or import the file directly.
Free, with no account and no usage limits. The tool runs entirely in your browser.