Generate complementary, triadic, analogous, and split-complementary palettes from any base color. Click any swatch to copy its hex code.
Color harmonies are combinations of colors that look pleasing together, derived from their positions on the color wheel. Complementary colors sit opposite each other, triadic colors are evenly spaced at 120°, and analogous colors sit side by side.
Pick a base color and a harmony type. The tool rotates your color around the HSL wheel to generate the matching palette, showing each swatch with its hex code. Click any swatch to copy it to your clipboard.
Color harmony is the set of rules that tells you which colors look good together, derived from geometry on the color wheel. Every harmony is a fixed pattern of angles from a base hue: complementary sits at 180°, triadic at 120°, analogous within 30° and so on. Because the pattern is geometric, any base color produces a working palette instantly — the harmonies feel 'right' because the human eye processes hue relationships the same way regardless of the starting color.
Complementary pairs are 180° apart — red and green, blue and orange, yellow and purple — and create maximum energy and contrast. Split-complementary softens the clash: instead of the exact opposite, take the two neighbors of the opposite (base + 150° + 210°). You keep the vibrancy of the contrast pair but lose the harsh vibration, making it one of the safest choices for interfaces that still need to pop.
Analogous schemes take 3–5 hues sitting next to each other on the wheel, all within about 60° — blue, blue-green and green, for example. They feel calm, cohesive and natural because neighboring hues share pigments. Monochromatic goes further: one hue at different tints, shades and saturations. Both are nearly impossible to get wrong, which makes them the default choice for dashboards, data visualization and brands that want to feel stable and trustworthy.
Triadic harmonies space three colors evenly at 120° — the classic red/yellow/blue. They are vibrant yet balanced, perfect for playful brands, illustrations and infographics. Tetradic (or double-complementary) uses two complementary pairs forming a rectangle on the wheel — e.g. blue, orange, violet and yellow-green. It gives the richest palette of all but is the hardest to balance: let one color dominate and treat the other three as supporting accents, or the scheme collapses into noise.
Match the harmony to the job. Monochromatic and analogous fit professional products, health tech and finance — they read as calm and competent. Complementary works for marketing pages and calls to action where contrast drives attention. Triadic suits playful or educational content. Split-complementary is the best all-rounder for web apps: lively but safe. Whichever you pick, apply the 60-30-10 rule — 60% dominant, 30% secondary, 10% accent — so the palette has hierarchy instead of competition.
The web has 148 named colors built into CSS, from Coral to Goldenrod. Beyond the code, color psychology shapes how users feel about interfaces — warm tones energize, cool tones calm, and neutrals build trust. This palette mixes CSS classics with the psychology behind them.
Warm and friendly — popular for CTAs in lifestyle brands
Energetic red-orange, great for urgent accents
Earthy gold associated with quality and heritage
Balanced blue-green — calm, trustworthy, professional
Deep violet tied to wisdom and premium brands
Bold red for passion, alerts, and strong emphasis
Soft purple-blue common in SaaS dashboards
Nature and growth — the color of eco and finance brands
Playful and bold, the signature of youth-oriented design
Authority and stability — the suit-and-tie of colors