Cool Colors & Split-Complementary Color Wheel Schemes
Master the cool colors side of the wheel (blues, emerald greens, teals, and crisp violets), calculate balanced split-complementary harmonies in real time, and see exact digital vs. painterly complements for green and red.
Interactive Split-Complementary & Cool Color Calculator
Drag the hue angle (120°–270° spans all cool colors) or pick a preset to inspect exact 180° complements and 150°/210° split complements.
What Are Cool Colors? (The 120°–270° Wheel Spectrum)
Cool colors make up the tranquil, receding half of the color wheel—ranging from lush botanical greens (120°–165°), brisk cyans and teals (170°–195°), and trusted blues (200°–240°) through imaginative lavenders and indigos (245°–275°). Because shorter light wavelengths scatter effortlessly and visually recede in perspective, cool hues communicate clarity, reliability, hygiene, calm, and deep space.
In product UI and SaaS branding, cool color systems naturally anchor 70–80% of the canvas (backgrounds, slate borders, links, and trust badges) while warm accents handle conversion actions. Ready to explore pre-built tones? Browse our full Cool Tones Color Palette or Ocean Beach Palette.
| Cool Color Family | Wheel Range | HEX Code | RGB Value | Best Design Use Case |
|---|---|---|---|---|
| 205°–215° | rgb(217, 226, 236) |
Crisp SaaS cards, cool neutral surfaces | ||
| 195°–205° | rgb(56, 189, 248) |
Interactive links, info states, dark-mode highlights | ||
| 215° | rgb(0, 71, 171) |
Fintech primary CTAs, editorial headers | ||
| 220°–235° | rgb(30, 58, 138) |
Enterprise navigation bars, high-contrast type | ||
| 155°–162° | rgb(110, 231, 183) |
Wellness UI accents, clean success badges | ||
| 130°–145° | rgb(132, 169, 140) |
Organic skincare packaging, muted interiors | ||
| 175°–182° | rgb(13, 148, 136) |
Medical apps, data dashboards, balanced primary | ||
| 160° | rgb(16, 185, 129) |
Confirmation states, growth charts, green brands | ||
| 234°–242° | rgb(129, 140, 248) |
AI tools, creative SaaS gradients, focus rings | ||
| 252°–265° | rgb(196, 181, 253) |
Soft tags, dark-theme typography, ambient glow |
Define Complementary Colors vs. Split-Complementary Colors
To define complementary colors cleanly: they are any two hues placed directly across from each other (exactly 180° apart) on a chromatic wheel—combining one cool hue with one warm hue to create peak optical contrast. For a deeper dive across all wheel rules, see our Mastering Color Harmonies Guide.
Split-complementary colors solve the #1 problem of strict complementary schemes (chromatic vibration and harsh edges when saturated opposites touch). Instead of pairing your base color H solely with its direct H + 180° opposite, you anchor the palette with H and use the two neighboring colors flanking that opposite—positioned at H + 150° and H + 210°. You retain ~85% of the visual energy while gaining a richer 3-hue palette where two tones stay harmonious and one breaks tension cleanly.
4 Ready-to-Use Cool Split-Complementary Palettes
Pairs crisp cobalt & navy with warm coral-crimson and citrus gold for conversion-driven SaaS apps.
Matches deep medical/fintech teal with warm amber highlights and coral rose alerts without neon clash.
Pairs forest & sage greens with terracotta coral and plum-violet for organic luxury & packaging.
High-energy developer dashboard scheme balancing royal indigo with chartreuse green and marigold gold.
Complementary Colors to Green & Red Complementary Colors (RYB vs. Digital RGB)
Why do search results disagree on the exact complement of green and red? Because traditional RYB painting wheels and modern digital RGB/HSL wheels position their primaries differently:
Complementary Colors to Green
In traditional pigment mixing (RYB), crimson red, terracotta, and coral sit opposite green. On backlit screens (RGB/HSL at 120°), the mathematical 180° opposite is magenta (300°), while rose pink and deep violet form a smooth split-complementary bridge.
Red Complementary Colors
To cool down saturated red (0°), digital UI systems use cyan and deep teal (180°). For editorial or seasonal contrast without harsh holiday clichés, shift red's green complement into sage, olive green, or split-comp azure blue.
Accessibility tip: Never place full-saturation red text directly on pure green backgrounds (or vice versa)—red-green color blindness affects ~8% of men, and simultaneous contrast causes haloing. Always separate complementary pairs with a neutral surface and verify 4.5:1 legibility with our WCAG Contrast Checker.
Frequently Asked Questions
What is the 60-30-10 rule for split-complementary palettes?
Use your primary cool color (or neutral tint of it) across 60% of the layout, assign 30% to a supporting tonal shade or one split-complement at muted saturation, and reserve the final 10% for your high-contrast warm split-complement accent on buttons and key indicators.
Is purple a cool color or a warm color?
Blue-leaning purples like indigo, periwinkle, and cool lavender sit firmly in the cool spectrum (245°–275°). Red-leaning purples such as plum and magenta (290°–320°) behave as warm-leaning transitional colors.
How do I soften a bold complementary green and red pair?
Desaturate one partner and shift lightness: pair deep forest green (#1B4332) with dusty terracotta (#E07A5F) or soft coral pink instead of pure #00FF00 and #FF0000. Need darks and tints? Generate a 10-step ramp with the Tint & Shade Generator.