Skip to content

Compound Colors

DesignDesign Utilities

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

How far the split and analogous hues sit from their anchor on the wheel.

Complement —
Base
—
Base HSL
—
Analogous accent
—
Split left
—
Split right
—

A compound colour scheme pairs a base hue with colours from the opposite side of the wheel plus one close neighbour. For red #FF0000 with a 30° spread, the complement is cyan #00FFFF, the split hues are #00FF80 and #0080FF, and the analogous accent is orange #FF8000. Saturation and lightness stay as in the base.

About this tool

Designers reach for a compound scheme when a plain complementary pair feels too stark but an analogous palette feels flat. This tool takes one hex colour, converts it to HSL and rotates the hue: 180° for the complement, the complement plus and minus your spread for the split pair, and the base plus the spread for an analogous accent. Each colour comes back as hex and RGB in a table you can copy into CSS or a design file. The rotation happens on the RGB-based HSL wheel used by browsers, not the painter's red-yellow-blue wheel, so the complement of red is cyan rather than green. Greys have no hue, so all five colours come out identical.

How to use it

  1. Type the base colour

    Enter a hex code such as #3366CC or the short form 36C; the # is optional.

  2. Set the spread

    Drag the slider between 10° and 60° to pull the split and analogous hues closer or further apart.

  3. Copy the palette

    Read the complement at the top and the hex and RGB values for all five roles in the table.

Examples

Pure red, 30° spread

Base colour (hex)
#FF0000
Spread
30

Result Complement: #00FFFF
Base: #FF0000
Base HSL: 0°, 100%, 50%
Analogous accent: #FF8000
Split left: #00FF80
Split right: #0080FF

  1. Base #FF0000 = RGB 255, 0, 0 = HSL 0°, 100%, 50%.
  2. Complement hue = 0° + 180° = 180°.
  3. Split hues = complement ± 30°; analogous hue = base + 30°.
  4. Saturation and lightness stay the same; each hue is converted back to RGB and hex.

Red's complement is cyan; the split pair either side of cyan is a spring green and an azure, and orange is the analogous accent.

Short hex 00f

Base colour (hex)
00f
Spread
30

Result Complement: #FFFF00
Base: #0000FF
Base HSL: 240°, 100%, 50%
Analogous accent: #8000FF
Split left: #FF8000
Split right: #80FF00

  1. Base #0000FF = RGB 0, 0, 255 = HSL 240°, 100%, 50%.
  2. Complement hue = 240° + 180° = 60°.
  3. Split hues = complement ± 30°; analogous hue = base + 30°.
  4. Saturation and lightness stay the same; each hue is converted back to RGB and hex.

Three-digit hex expands to #0000FF; its opposite on the wheel is yellow.

Brand blue #3366CC

Base colour (hex)
#3366CC
Spread
30

Result Complement: #CC9933
Base: #3366CC
Base HSL: 220°, 60%, 50%
Analogous accent: #4D33CC
Split left: #CC4C33
Split right: #B3CC33

  1. Base #3366CC = RGB 51, 102, 204 = HSL 220°, 60%, 50%.
  2. Complement hue = 220° + 180° = 40°.
  3. Split hues = complement ± 30°; analogous hue = base + 30°.
  4. Saturation and lightness stay the same; each hue is converted back to RGB and hex.

A mid blue at 60% saturation pairs with an ochre complement of the same lightness.

How it is calculated

H_c = (H + 180) mod 360; H_split = (H + 180 ± d) mod 360; H_a = (H + d) mod 360

H
hue of the base colour in degrees, from the RGB to HSL conversion
d
spread in degrees, set with the slider
H_c, H_split, H_a
hues of the complement, the split pair and the analogous accent

The hex code is read as RGB and converted to hue, saturation and lightness with the standard HSL formulas used in CSS. Only the hue is rotated; saturation and lightness are held constant, so all five colours share the same visual weight on the HSL model. Each rotated hue is converted back to RGB, rounded to whole channel values and written as hex.

When not to use it

  • Painting or print mixing that follows the red-yellow-blue wheel gives different complements than this RGB wheel.
  • Checking text contrast for accessibility needs a contrast-ratio checker, since equal HSL lightness does not mean equal perceived brightness.

Common mistakes

  • Entering a near-grey base and expecting distinct colours; with almost no saturation every hue looks the same.
  • Using all five colours at equal weight instead of letting the base dominate and the others act as accents.

Frequently asked questions

What makes a scheme compound rather than complementary?

A complementary scheme is just two opposite hues. A compound scheme adds the hues either side of the complement and often a neighbour of the base, giving more variety while keeping the contrast of opposites.

Why is the complement of red cyan and not green?

Screens mix light in red, green and blue, and the HSL wheel built on that puts cyan opposite red. Green is red's opposite only on the traditional painter's red-yellow-blue wheel.

What spread should I choose?

Around 30° gives clearly related but distinct split hues. Smaller values keep the split pair close to the complement; values near 60° push them toward a triadic look.

Can I enter RGB or a colour name?

No. The input takes a hex code of three or six digits. Convert a name or RGB triple to hex first, for example red to #FF0000.

Why does a grey give five identical colours?

Grey has zero saturation, so it has no hue to rotate. Every rotated hue converts back to the same grey, and the tool shows a note when this happens.

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 23). Compound Colors. Tools Directory. Retrieved October 26, 2026, from https://tools.milunir.com/design/design-utilities/compound-colors/

MLA

Tools Directory Editorial Team. “Compound Colors.” Tools Directory, 23 Oct. 2026, https://tools.milunir.com/design/design-utilities/compound-colors/. Accessed 26 Oct. 2026.

Chicago

Tools Directory Editorial Team. “Compound Colors.” Tools Directory. Last modified October 23, 2026. Accessed October 26, 2026. https://tools.milunir.com/design/design-utilities/compound-colors/.

Link<a href="https://tools.milunir.com/design/design-utilities/compound-colors/">Compound Colors – Tools Directory</a>