Colour Palette Generator
Pick a colour and get several palettes of colours that go well with it — complementary, analogous, triadic, and more.
Pick a base colour and this tool builds several colour-theory-backed palettes from it — complementary, analogous, triadic, split-complementary, tetradic, and a monochromatic ramp — so you can find a set of colours that work well together without trial and error. Click any swatch to copy its hex code.
Base colour
Palettes
Runs entirely in your browser — no data is sent anywhere. Click a swatch to copy its hex code.
What makes colours "go well together"
Colour harmony schemes are just fixed relationships between hues on a 360° colour wheel, kept at a consistent saturation and lightness so the eye reads them as belonging to the same family. Rather than guessing, each palette below is generated by rotating the base colour's hue by a fixed amount — the same relationships designers and painters have used for centuries, just computed instead of eyeballed.
The palettes explained
Complementary pairs a colour with its opposite on the wheel (180° away) — maximum contrast, good for making one element pop against another. Split-complementary softens that contrast by using the two colours adjacent to the complement instead of the complement itself, giving strong contrast with less tension. Analogous uses colours next to each other on the wheel (within about 30°) — naturally harmonious since they share undertones, common for calm, cohesive UIs. Triadic picks three colours evenly spaced 120° apart, giving vibrant contrast while staying balanced. Tetradic (rectangle) uses two complementary pairs for a richer, four-colour scheme that needs one dominant colour to avoid feeling busy. Monochromatic keeps the same hue and varies only lightness — the safest way to get a cohesive palette, useful for shading a single brand colour.
Using a generated palette
A palette here is a starting point, not a rulebook — the usual approach is to pick one colour as dominant (backgrounds, large areas), one or two as secondary (supporting elements), and reserve the rest as accents for buttons, links, or alerts. Click any swatch to copy its hex code straight into your CSS or design tool.