Skip to content

Color Palette Generator

DesignColor Palettes and Schemes

Three or six hex digits, with or without the #.

Palette —
Harmony
—
Colours
—
CSS custom properties
—

Enter a base hex colour and pick a harmony. The generator rotates the hue around the colour wheel and keeps saturation and lightness, so #3366CC (hue 220°) paired with its complement at 40° gives #CC9933. Every colour is listed as hex, RGB and HSL, plus ready-to-paste CSS custom properties.

About this tool

Designers, front-end developers and anyone choosing brand or chart colours often start from one colour they already like and need a few that sit well beside it. This generator applies the standard colour-wheel harmonies to that starting colour: it converts the hex code to HSL, turns the hue by the angles each harmony uses, and converts back. The monochromatic option keeps the hue and moves lightness instead, giving shades and tints. Each palette comes with hex, RGB and HSL strings and a line of CSS variables. One limit: the maths works in HSL, which is not perceptually even, so two colours with the same lightness value can still look noticeably brighter or darker, especially yellows against blues. Check text contrast separately before using a pair for type.

How to use it

  1. Type the base colour

    Enter a hex code such as #3366CC or the shorthand #36C; the # is optional and case does not matter.

  2. Choose a harmony

    Pick complementary, analogous, triadic, split-complementary, tetradic or monochromatic from the Harmony menu.

  3. Read the palette table

    Each row gives the colour's role, hex, RGB and HSL values; the base colour is always the first or middle swatch.

  4. Copy the CSS line

    The CSS custom properties stat numbers the colours as –color-1, –color-2 and so on for a stylesheet.

Examples

Pure red, triadic

Base colour (hex)
#FF0000
Harmony
Triadic

Result Palette: #FF0000, #00FF00, #0000FF
Harmony: Triadic
Colours: 3
CSS custom properties: –color-1: #FF0000; –color-2: #00FF00; –color-3: #0000FF;

  1. Base #FF0000 = rgb(255, 0, 0) = hue 0°, saturation 100%, lightness 50%
  2. Triadic: rotate the hue by 0°, 120°, 240° and keep saturation and lightness.
  3. Each HSL colour is converted back to RGB and rounded to whole 0–255 channels.

Rotating red by 120° and 240° lands on the other two RGB primaries, green and blue.

Mid blue and its complement

Base colour (hex)
#3366CC
Harmony
Complementary

Result Palette: #3366CC, #CC9933
Harmony: Complementary
Colours: 2
CSS custom properties: –color-1: #3366CC; –color-2: #CC9933;

  1. Base #3366CC = rgb(51, 102, 204) = hue 220°, saturation 60%, lightness 50%
  2. Complementary: rotate the hue by 0°, 180° and keep saturation and lightness.
  3. Each HSL colour is converted back to RGB and rounded to whole 0–255 channels.

The blue sits at 220° on the wheel, so its opposite at 40° is a warm ochre with the same saturation and lightness.

Shades and tints of #36C

Base colour (hex)
36c
Harmony
Monochromatic

Result Palette: #142952, #24478F, #3366CC, #7094DB, #ADC2EB
Harmony: Monochromatic
Colours: 5
CSS custom properties: –color-1: #142952; –color-2: #24478F; –color-3: #3366CC; –color-4: #7094DB; –color-5: #ADC2EB;

  1. Base #3366CC = rgb(51, 102, 204) = hue 220°, saturation 60%, lightness 50%
  2. Monochromatic: keep hue and saturation, shift lightness by −30, −15, +15 and +30 points (held between 5% and 95%).
  3. Each HSL colour is converted back to RGB and rounded to whole 0–255 channels.

Shorthand #36C expands to #3366CC; lightness steps of 15 points give two shades and two tints.

How it is calculated

H' = (H + Δ) mod 360, with S' = S and L' = L; monochromatic keeps H and S and uses L' = L ± 0.15 or ± 0.30

H, S, L
Hue in degrees, saturation and lightness of the base colour
Δ
Harmony angle: 180 complementary, ±30 analogous, 120/240 triadic, 150/210 split, 90/180/270 tetradic
H'
Hue of the generated colour

The hex code is read as three 8-bit channels and converted to HSL with the usual max/min formulas. For each harmony the hue is rotated by the listed angles and wrapped into 0–360°, while saturation and lightness are carried over unchanged. The result is converted back to RGB and each channel is rounded to a whole number from 0 to 255, then written as hex. Monochromatic lightness is held between 5% and 95% so no swatch collapses to pure black or white.

When not to use it

  • Do not rely on it to check text contrast; HSL lightness does not predict WCAG contrast ratios.
  • It is not a print colour tool; hex and RGB values do not map directly to CMYK or Pantone inks.
  • A grey base colour has no hue to rotate, so only the monochromatic option gives distinct swatches.

Common mistakes

  • Typing a colour name like blue instead of a hex code such as #0000FF.
  • Using all swatches of a tetradic palette at equal weight, which usually looks busy; let one colour dominate.
  • Assuming two swatches with the same HSL lightness will look equally bright on screen.

Frequently asked questions

Which harmony gives the strongest contrast?

Complementary pairs sit 180° apart on the wheel, so they contrast most in hue. Split-complementary softens that by using the two hues 30° either side of the complement, which is easier to balance in an interface.

Why does a grey base give the same colour twice?

Greys have zero saturation, so their hue is undefined and rotating it changes nothing. The generator warns you in that case. Choose a colour with some saturation, or switch to monochromatic to get lighter and darker greys.

Is this the same colour wheel painters use?

No. It uses the RGB wheel, where red's complement is cyan. The traditional painter's RYB wheel pairs red with green. Screens mix light, so the RGB wheel matches what a browser displays, but results will differ from art-school charts.

Can I enter a three-digit hex code?

Yes. Shorthand such as #36C is expanded by doubling each digit, giving #3366CC, before any maths is done. Codes with an alpha channel (four or eight digits) are not accepted.

How are the monochromatic shades chosen?

The hue and saturation stay fixed and lightness moves by 15 and 30 percentage points in each direction, giving two shades, the base and two tints. Lightness is kept between 5% and 95%, so a very dark base gives shades that bunch together near the bottom.

Why might a converted value differ by one from another site?

Going from hex to HSL and back involves fractions, and each channel is rounded to a whole number. Other tools may round HSL first, so a channel can end up one step away, which is invisible on screen.

Cite this tool

Using this tool in an assignment, article or report? Copy a citation, or a link for your website.

APA

Tools Directory Editorial Team. (2026, October 17). Color Palette Generator. Tools Directory. Retrieved October 26, 2026, from https://tools.milunir.com/design/color-palettes-and-schemes/color-palette-generator/

MLA

Tools Directory Editorial Team. “Color Palette Generator.” Tools Directory, 17 Oct. 2026, https://tools.milunir.com/design/color-palettes-and-schemes/color-palette-generator/. Accessed 26 Oct. 2026.

Chicago

Tools Directory Editorial Team. “Color Palette Generator.” Tools Directory. Last modified October 17, 2026. Accessed October 26, 2026. https://tools.milunir.com/design/color-palettes-and-schemes/color-palette-generator/.

Link<a href="https://tools.milunir.com/design/color-palettes-and-schemes/color-palette-generator/">Color Palette Generator – Tools Directory</a>