About the Color Palette Generator
This color palette generator takes a single base color and builds a harmonious scheme around it using classic color-wheel rules: complementary, analogous, triadic, split-complementary, square and rectangle (tetradic), or monochromatic. Every swatch comes with its HEX, RGB and HSL value plus ready-to-paste CSS custom properties, so you can drop the scheme straight into a stylesheet, Figma file or brand guide.
It is meant for designers starting a brand or UI theme, developers who need an accent color that "goes with" an existing one, and anyone building charts, slides or a website who wants colors that feel deliberate rather than random. Change the base color or scheme and the palette and preview update instantly.
Hues are rotated on the HSL color wheel while the base saturation and lightness are kept, which is how most design tools define these harmonies. The monochromatic scheme keeps the hue and steps lightness instead. Always check text contrast separately — two colors can be harmonious and still be unreadable together.
How to use the color palette generator
- 1Enter your base color as a HEX code, rgb()/hsl() value or color name.
- 2Pick a harmony rule — triadic and complementary are bold, analogous and monochromatic are calm.
- 3Adjust the hue spread for analogous or split-complementary schemes.
- 4Review the swatches and the suggested text color for each one.
- 5Copy the HEX list, CSS variables or JSON into your project.
Formula and method
The base color is converted to HSL (hue, saturation, lightness). Each harmony rule is a set of hue offsets: complementary adds 180°, triadic 120° and 240°, split-complementary 180° ± the spread, square 90°, 180° and 270°, rectangle 60°, 180° and 240°, and analogous steps of ± the spread on either side. Each new hue keeps the base saturation and lightness and is converted back to RGB and HEX, rounded to whole 0–255 channel values.
The monochromatic scheme keeps the hue and saturation and shifts lightness by −30, −15, +15 and +30 points, clamped between 5% and 95% so the extremes never become pure black or white. The base swatch is always the exact color you entered.
- H
- Hue angle on the color wheel, 0–360°
- S
- Saturation, 0–100%
- L
- Lightness, 0–100%
- offsetᵢ
- Hue rotation defined by the harmony rule
Worked examples
Triadic scheme from blue #2563EB
#2563EB has a hue of about 221°. Adding 120° and 240° gives hues near 341° (a raspberry pink, #EB2563) and 101° (a lime green, #63EB25), all at the same saturation and lightness. Its direct complement at 41° is the amber #EBAD25.
Complementary pair for brand orange #FF6B35
Orange #FF6B35 sits at about 16° on the wheel. Rotating 180° lands on 196°, a bright sky blue #35C9FF with the same 100% saturation and 60% lightness — a classic high-energy orange/blue pairing.
Monochromatic scale from deep teal #0F766E
#0F766E is hsl(175°, 77%, 26.1%). Lightness 26.1 − 30 would be negative, so the darkest step is clamped to 5% (#031715); −15 gives 11.1% (#06322F), +15 gives 41.1% (#18BAAD) and +30 gives 56.1% (#38E6D8) — one hue, five usable weights.
Frequently asked questions
What is a complementary color?+
It is the color directly opposite on the color wheel — 180° away in hue. Blue and orange, red and cyan, and purple and yellow-green are complementary pairs. They create maximum contrast and make each other look more vivid.
What is the difference between triadic and tetradic schemes?+
A triadic scheme uses three hues spaced 120° apart, such as red, green and blue. A tetradic scheme uses four hues forming a square (90° apart) or a rectangle (two complementary pairs, e.g. 0°, 60°, 180°, 240°). Tetradic palettes are richer but harder to balance.
How many colors should a website palette have?+
Most interfaces use one primary brand color, one or two accents and a set of neutrals for text and backgrounds. The 60-30-10 guideline — 60% dominant, 30% secondary, 10% accent — is a reliable starting point for balancing them.
Why does the generator use HSL instead of RGB?+
HSL separates hue from saturation and lightness, so rotating the hue changes the color family while keeping the same intensity. Rotating the color wheel in RGB is not straightforward and would not keep the colors visually related.
Are harmonious colors automatically accessible?+
No. Harmony is about how colors relate on the wheel, not readability. Check that text and background pairs reach at least 4.5:1 contrast (WCAG AA) with a contrast checker before using them for text.