Complement of red
- Base color
- #FF0000
- Scheme
- Complementary (opposite hue)
- Palette
- #FF0000, #00FFFF
- Colors
- 2
Checked against: Colorsys and an exact fractions version of CSS Color 4 hslToRgb: hue 0° + 180° → (0, 1, 1)
Color palette generator (complementary, triadic, analogous)
Generate complementary, analogous, triadic, split-complementary, tetradic or monochromatic color palettes from one base color, with HEX codes.
By AdminDrafted with AI writing toolsUpdated Checked examples: 6
Palette
#2E86C1, #C12E86, #86C12E
Palette: #2E86C1, #C12E86, #86C12E
- Hues
- 204.1°, 324.1°, 84.1°
- Colors
- 3
A triadic palette from #2E86C1: #2E86C1, #C12E86, #86C12E. The hues sit at 204.1°, 324.1°, 84.1° on the HSL wheel with saturation and lightness unchanged.
triadic palette
#2E86C1
Base
#C12E86
+120°
#86C12E
+240°
Positions on the hue wheel
How it's calculated S
Base color in HSL
Build the triadic set
Each color keeps the base saturation 61.5% and lightness 46.9% and turns the hue by +120°, +240°.
Convert back to HEX
Base: hsl(204.1, 61.5%, 46.9%) → #2E86C1; +120°: hsl(324.1, 61.5%, 46.9%) → #C12E86; +240°: hsl(84.1, 61.5%, 46.9%) → #86C12E
Channels are rounded half up to whole 8-bit values.
About the color palette generator
Each harmony scheme turns the base color's hue around the HSL color wheel by fixed angles and keeps its saturation and lightness: 180° for complementary, ±30° for analogous, 120° and 240° for triadic, 180° ± 30° for split-complementary and 90° steps for a tetradic square. The monochromatic scheme keeps the hue and mixes the base toward black for shades and toward white for tints, in equal steps.
Designers use it to find accent colors for a brand, chart or interface. The default, #2E86C1 at hue 204.1°, gives the triadic set #2E86C1, #C12E86 and #86C12E, and its complement is #C1692E at hue 24.1°.
Equal HSL lightness does not mean equal brightness to the eye: in that triad, #86C12E has a relative luminance of 0.434 against 0.150 for #C12E86. Check text and background pairs with a contrast checker before using them.
How to make shades and tints of green
Mix each RGB channel toward black for a shade, c × (1 − t), or toward white for a tint, c + t × (255 − c), with t stepping evenly between 0 and 1. From CSS green #008000 in four steps each way, the darkest shade is #001A00 and the lightest tint #CCE6CC.
The steps stop short of pure black and white. Four steps use t = 1/5, 2/5, 3/5 and 4/5, which gives 2 × 4 + 1 = 9 colors including the base.
Nine shades and tints of green
| Palette position | HEX |
|---|---|
| Shade 4 | #001A00 |
| Shade 3 | #003300 |
| Shade 2 | #004D00 |
| Shade 1 | #006600 |
| Base | #008000 |
| Tint 1 | #339933 |
| Tint 2 | #66B366 |
| Tint 3 | #99CC99 |
| Tint 4 | #CCE6CC |
Each channel is rounded half up to a whole 8-bit value. Green's channel is 128, so Shade 4 is 128 × 1/5 = 25.6, which rounds to 26, or 1A in hex.
Tint 4 lifts red and blue from 0 to 204 (CC) and green from 128 to 229.6, which rounds to 230 (E6).
Green, lime and forest green give different ramps
CSS names several greens, and each starts its own sequence. CSS green is #008000, half strength in the green channel; lime, #00FF00, is full strength. Four steps each way give:
- Lime #00FF00: #003300, #006600, #009900, #00CC00, #00FF00, #33FF33, #66FF66, #99FF99, #CCFFCC
- Forest green #228B22: #071C07, #0E380E, #145314, #1B6F1B, #228B22, #4EA24E, #7AB97A, #A7D1A7, #D3E8D3
Lime's ramp lands on the web-safe values 00, 33, 66, 99, CC and FF, because 255 splits evenly into five steps of 51.
Which shades of green work for text?
WCAG 2.2 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Against a white background:
- The base and all four shades pass for normal text: #008000 reaches 5.13:1 and #006600 reaches 7.24:1.
- Tint 1, #339933, reaches 3.65:1, enough only for large text.
- Tints 2 to 4 fail even for large text, from 2.55:1 down to 1.33:1. Use them for backgrounds and fills.
Check any other pair with the contrast checker.
Complementary, triadic and other green harmonies
Harmony schemes keep the base color's HSL saturation and lightness and turn its hue. The complement is 180° away, a triad adds 120° and 240°, and a tetradic square uses 90° steps.
Analogous colors sit a spread, 30° here, on either side of the base. Split-complementary colors sit the same spread on either side of the complement.
| Scheme | Palette |
|---|---|
| complementary | #008000, #800080 |
| analogous | #408000, #008000, #008040 |
| triadic | #008000, #000080, #800000 |
| split | #008000, #400080, #800040 |
| tetradic | #008000, #004080, #800080, #804000 |
Green sits at hue 120°, so its complement is purple, #800080, at 300°. The triad adds navy, #000080, and maroon, #800000, which are also CSS named colors.
These angles use the RGB-based HSL wheel defined in CSS Color 4. On a painter's red-yellow-blue wheel, green's complement is red, so tools built on the two wheels disagree.
Why equal steps don't look equal
The mixing is linear in sRGB channel values, and equal steps in those values are not equal steps in how light a color looks. A ramp can bunch up at one end.
For ramps that look evenly spaced, step the lightness in OKLCH, which CSS Color 4 also defines.
Gray has no hue to turn
A gray has 0% saturation, so turning its hue changes nothing: a gray triad returns #808080 three times. Tints and shades still work. Gray #808080 in four steps runs #1A1A1A, #333333, #4D4D4D, #666666, #808080, #999999, #B3B3B3, #CCCCCC, #E6E6E6.
Base color and step settings
- The base can be a CSS name, #RRGGBB, rgb(), hsl() or oklch(), and the name green means #008000.
- Transparency is ignored, so #00800080 gives the same palette as #008000.
- Tints and shades take 1 to 10 steps each side, 3 to 21 colors in all. The spread for analogous and split schemes runs from 1° to 90°.
To see one of these codes as RGB, HSL, CMYK or OKLCH, use the color converter.
Worked examples
Triadic from red
- Base color
- red
- Scheme
- Triadic (3 hues, 120° apart)
- Palette
- #FF0000, #00FF00, #0000FF
- Hues
- 0°, 120°, 240°
Checked against: Colorsys and an exact fractions version of CSS Color 4 hslToRgb: hue rotations by 120° and 240°
Analogous from #2E86C1
- Base color
- #2E86C1
- Scheme
- Analogous (neighboring hues)
- Spread
- 30 °
- Palette
- #2EC1B3, #2E86C1, #2E3DC1
Checked against: Implementation of CSS Color 4 rgbToHsl/hslToRgb: hue 204.1° ± 30° gives (46, 193, 178.5) and (46, 60.5, 193), rounded half up
Tetradic square from red
- Base color
- #FF0000
- Scheme
- Tetradic square (4 hues, 90° apart)
- Palette
- #FF0000, #80FF00, #00FFFF, #8000FF
Checked against: Implementation of CSS Color 4 hslToRgb: hues 90° and 270° give a channel of exactly 127.5, rounded half up to 0x80 (float colorsys lands at 127.4999…)
Questions
How do I find the complementary color of a hex code?
Convert the color to HSL, add 180° to the hue, and convert back with the same saturation and lightness. #2E86C1 has hue 204.1°, so its complement has hue 24.1°, which is #C1692E. On this RGB-based wheel the complement of red #FF0000 is cyan #00FFFF; on the painter's red-yellow-blue wheel red pairs with green instead, so results differ between tools.
What is the difference between triadic and split-complementary colors?
A triadic scheme uses three hues spaced evenly, 120° apart. A split-complementary scheme keeps the base and replaces its complement with the two hues on either side of it, 150° and 210° from the base when the spread is 30°. From #2E86C1 the triad is #C12E86 and #86C12E, while the split-complementary pair is #C12E3D and #C1B32E, which spreads the hues wider than an analogous set.
What is the difference between a tint, a shade and a tone?
A tint is a color mixed with white, a shade is mixed with black, and a tone is mixed with gray. This generator makes tints and shades in equal steps: with 2 steps each, the gray #808080 gives shades #2B2B2B and #555555 and tints #AAAAAA and #D5D5D5. Mixing is done channel by channel in sRGB, so each step changes all three channels by the same fraction.
Why don't the colors in my palette look equally bright?
HSL lightness is a formula on the RGB channels, not a measure of perceived brightness, and the eye is far more sensitive to green than to blue. The triad from #2E86C1 has equal HSL lightness, but relative luminances of 0.215, 0.150 and 0.434. For steps that look even, set lightness in OKLCH instead, which CSS Color Level 4 supports.
Can I use palette colors for text?
Only after checking contrast. WCAG 2.2 asks for at least 4.5:1 between normal text and its background, and 3:1 for large text and interface parts. On white, #C12E86 reaches 5.25:1 and passes, #2E86C1 reaches 3.97:1 and suits only large text, and #86C12E reaches 2.17:1 and fails, so it cannot serve as normal or large text on white. Essential boundaries and graphics also need appropriate non-text contrast.
About this calculator
Sources
- W3C CSS Color Module Level 4 §7 — HSL and the hslToRgb / rgbToHsl algorithms
- Johannes Itten, The Art of Color (1961) — color contrasts and harmonic chords
Checked against references
This calculator includes 6 worked examples with independently sourced answers. They run in the test suite, and you can run them here too.