Skip to content

Color Scheme Generator

DesignColor Palettes and Schemes

3 or 6 hex digits; the # is optional.

Scheme colours —
Scheme
—
Colours
—
Base in HSL
—

Enter a hex colour and pick a harmony. The generator turns the colour into HSL, rotates its hue by the scheme's angles and lists each result in hex, RGB and HSL. For example, #FF0000 as a triad gives #FF0000, #00FF00 and #0000FF, because red, green and blue sit 120° apart.

About this tool

Designers, front-end developers and anyone picking brand or slide colours often start from one colour they already like and need a few that sit well beside it. This generator applies the classic colour-wheel harmonies to that starting colour: complementary, analogous, triadic, split complementary, square, and a monochromatic set of lighter and darker shades. Each colour comes back as a hex code, an rgb() value and an hsl() value, ready to paste into CSS or a design file. The wheel used is the RGB/HSL wheel of screens, so the complement of red is cyan rather than the green of a painter's RYB wheel. Harmony rules do not check text contrast, so test readable pairs separately.

How to use it

  1. Type the base colour

    Enter a 3- or 6-digit hex code, with or without the # sign.

  2. Choose a scheme

    Pick one of six harmonies from the Scheme list.

  3. Read the table

    Each row shows the colour's role, hex, RGB and HSL values.

  4. Copy the codes

    Copy the result line to paste every hex code at once.

Examples

Pure red, complementary

Base colour (hex)
#FF0000
Scheme
Complementary

Result Scheme colours: #FF0000, #00FFFF
Scheme: Complementary
Colours: 2
Base in HSL: hsl(0, 100%, 50%)

  1. Base #FF0000 = RGB(255, 0, 0) = hsl(0, 100%, 50%).
  2. Each colour keeps saturation and lightness and adds the scheme angle to the hue, wrapping at 360°.
  3. Each HSL value is converted back to RGB and written as hex.

Red sits at hue 0°, so its opposite at 180° is cyan.

Short hex F00, triadic

Base colour (hex)
F00
Scheme
Triadic

Result Scheme colours: #FF0000, #00FF00, #0000FF
Scheme: Triadic
Colours: 3
Base in HSL: hsl(0, 100%, 50%)

  1. Base #FF0000 = RGB(255, 0, 0) = hsl(0, 100%, 50%).
  2. Each colour keeps saturation and lightness and adds the scheme angle to the hue, wrapping at 360°.
  3. Each HSL value is converted back to RGB and written as hex.

The three-digit code expands to #FF0000, and the triad is the three RGB primaries.

#3A7BD5, monochromatic

Base colour (hex)
#3A7BD5
Scheme
Monochromatic

Result Scheme colours: #153561, #2257A0, #3A7BD5, #79A5E2, #B8D0F0
Scheme: Monochromatic
Colours: 5
Base in HSL: hsl(215, 65%, 53%)

  1. Base #3A7BD5 = RGB(58, 123, 213) = hsl(215, 65%, 53%).
  2. Hue and saturation stay fixed; lightness moves in 15-point steps (kept between 5% and 95%).
  3. Each HSL value is converted back to RGB and written as hex.

Five shades of the same blue, from 30 points darker to 30 points lighter.

How it is calculated

hue(n) = (base hue + angle(n)) mod 360, with saturation and lightness kept

base hue
hue of the entered colour in degrees, from the RGB to HSL conversion
angle(n)
scheme offsets: 180° complementary; ±30° analogous; 120° and 240° triadic; 150° and 210° split; 90°, 180°, 270° square

The hex code is read as red, green and blue bytes and converted to hue, saturation and lightness with the standard HSL formulas used in CSS. Hue-based schemes add fixed angles to the hue and convert back to RGB, rounding each channel to a whole number. The monochromatic scheme keeps hue and saturation and moves lightness by 15 and 30 points either way, clamped to 5–95%.

When not to use it

  • For paint or pigment mixing, which follows the red-yellow-blue wheel rather than the screen wheel used here.
  • For checking accessible text contrast, which needs a WCAG contrast-ratio check instead.
  • For print work where colours must be specified in CMYK or a spot-colour system.

Common mistakes

  • Starting from a grey or near-grey colour, where hue rotation produces almost identical greys.
  • Using every scheme colour at equal weight instead of one dominant colour with accents.
  • Expecting red's complement to be green, which is the painter's wheel answer, not the RGB one.

Frequently asked questions

Why is the complement of red cyan and not green?

Screens mix light in red, green and blue, and on that wheel cyan sits directly opposite red at 180°. Red's partner green comes from the older red-yellow-blue wheel used for paints, which spaces hues differently.

What is the difference between triadic and split complementary?

A triad spaces three colours evenly at 120° steps. A split complementary scheme keeps the base and takes the two neighbours of its complement, at 150° and 210°, which gives strong contrast with less tension than a direct complement.

Can I enter a three-digit hex code?

Yes. A short code such as F80 is expanded by doubling each digit to FF8800, the same rule browsers apply in CSS. The # sign is optional.

Why does my grey colour give the same grey back?

A grey has no saturation, so its hue carries no visible colour and rotating it changes nothing. The monochromatic scheme still works, giving lighter and darker greys, or you can start from a slightly tinted colour.

Do the generated colours meet accessibility contrast rules?

Not automatically. Harmony rules are about hue relationships, while WCAG contrast depends on relative luminance. A text and background pair needs a ratio of at least 4.5:1 for normal text, so check pairs with a contrast checker.

How are the monochromatic shades chosen?

Hue and saturation stay the same as the base, and lightness moves 15 and 30 points darker and lighter. Values are kept between 5% and 95% lightness so the extremes do not collapse into pure black or white.

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 Scheme Generator. Tools Directory. Retrieved October 26, 2026, from https://tools.milunir.com/design/color-palettes-and-schemes/color-scheme-generator/

MLA

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

Chicago

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

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