Color Scheme Generator
Turn one base color into six ready-to-use color schemes — analogous, complementary, split-complementary, triadic, tetradic and monochromatic. Free, instant and fully in your browser.
Click any swatch to copy its HEX code.
How to generate a color scheme
- Pick a base color. Use the color picker, type a HEX code such as #E0524B, or press 🎲 Random base to explore.
- Compare the six schemes. Analogous, complementary, split-complementary, triadic, tetradic and monochromatic palettes are rebuilt instantly from your base color.
- Copy or download the palette. Click any swatch to copy its HEX code, copy a whole scheme, export everything as CSS custom properties, or download a .txt palette file.
About this tool
This free color scheme generator applies classic color-wheel theory to any color you choose. It converts the base color to HSL and rotates the hue by fixed angles — ±30° for analogous, 180° for complementary, 150°/210° for split-complementary, 120° steps for triadic and a 60°/180°/240° rectangle for tetradic — while keeping your original saturation and lightness so every palette feels consistent. The monochromatic scheme instead keeps the hue and steps the lightness from a dark shade to a light tint.
It is a quick way to build a website palette, brand kit, presentation theme or room color plan without guessing. All calculations run locally in your browser — nothing is uploaded, so it is fast, private and works offline once loaded. Need just the single opposite color? The dedicated Complementary Color tool gives you a larger side-by-side view.
Frequently asked questions
Which color scheme should I choose?
Analogous and monochromatic schemes are calm and safe — great for backgrounds and content-heavy sites. Complementary and split-complementary add strong accents for buttons and highlights. Triadic and tetradic give vibrant, varied palettes for illustrations, dashboards and branding, but need careful balancing: let one color dominate and use the others sparingly.
How are the schemes calculated?
Your color is converted to HSL (hue, saturation, lightness). Each scheme rotates the hue around the 360° color wheel by standard angles while preserving saturation and lightness, then converts each result back to HEX and RGB. Monochromatic keeps the hue and varies only the lightness.
What is the difference between triadic and tetradic?
A triadic scheme uses three hues spaced evenly 120° apart, forming a triangle on the wheel. A tetradic (rectangle) scheme uses four hues forming two complementary pairs — the base, +60°, its complement at +180°, and +240°. Tetradic palettes are richer but harder to balance.
Can I export the palette to my CSS?
Yes. The "Copy as CSS variables" button copies all six schemes as ready-to-paste --custom-property declarations inside a :root block, and the download button saves a plain-text palette file with every HEX code.