Palette from Base Color

What this tool does

The Palette from Base Color generator takes one colour and instantly expands it into every classic colour harmony. Instead of opening a colour wheel and measuring angles by hand, you pick a base colour and the tool lays out five complete schemes — complementary, analogous, triadic, tetradic and split-complementary — each as a labelled row of copyable swatches. It is a fast way to explore where a single brand or accent colour can go, and to compare the mood of different harmonic relationships before committing to one.

Each harmony is generated by rotating the base hue around the colour wheel in HSL space while holding saturation and lightness steady. That keeps the whole palette feeling consistent: the colours differ in hue but share the same energy and tone, which is exactly what makes a harmony work.

Use cases

In web and UI design, start from a primary brand colour and read off the complementary hue for call-to-action buttons, or use the analogous row for a calm, low-contrast section background. For branding, a triadic scheme gives you a vivid, balanced trio for a logo and its supporting marks. Illustrators and digital artists can lift a tetradic set for a scene that needs warm and cool colours in tension. When building a design system, the split-complementary row is a reliable way to find a secondary accent that contrasts with your primary without the harshness of a direct complement. Marketers and hobbyists putting together slide decks, posters or social graphics can grab a coherent set of colours in seconds.

How to use it

1. Pick your base colour with the native colour picker, or type a HEX value such as #00C8E0 into the text field — the two stay in sync.
2. Review the five harmony rows. Each is labelled and described, with the exact degree offsets noted so you can see how it was derived.
3. Click the copy icon on any swatch to copy that single HEX code.
4. Use a row’s Copy row button to grab a whole scheme, or Copy all colours to export every unique colour at once.
5. Adjust the base colour at any time — every row recalculates live.

Tips

Pick a base colour with moderate saturation and a mid-range lightness; very dark or very pale starting points produce harmonies whose members look almost identical because rotating the hue of a near-grey colour barely changes it. Complementary pairs are high-energy and best used sparingly — reserve the opposite hue for accents rather than large fills. Analogous schemes are the safest for large areas and gradients because the colours sit close together. If a triadic or tetradic set feels overwhelming, treat one colour as dominant and the others as accents rather than giving them equal space. For accessible text, always check the contrast of any two colours you pair for foreground and background — harmony does not guarantee legibility.

Related techniques

Once you have a palette, fine-tune individual colours by adjusting their lightness and saturation to build tints and shades — a monochromatic ramp from each harmony colour gives you the full set of UI states (hover, active, disabled). Convert any swatch between HEX, RGB, HSL and other formats with a colour converter when you need a specific notation for CSS or a design tool. If your project has accessibility requirements, run the foreground and background pairs through a contrast checker against WCAG AA and AAA thresholds. For a deeper look at a single relationship, the dedicated complementary, analogous, triadic, tetradic and monochromatic tools let you tweak angles and step counts beyond the fixed values used here.