#E2D900
#6EB659
#00A381
#006C74
#2A9D8FCadet
#8AB17DSage
#E9C46ASaffron
#7CCE88Pistachio
Pistachio & Saffron Muse is a complementary color palette tagged modern, teal, green. Near-complementary hues (about 130° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Cadet | #2A9D8F | rgb(42, 157, 143) | hsl(173, 58%, 39%) | oklch(63.0% 0.101 183) | |
| Sage | #8AB17D | rgb(138, 177, 125) | hsl(105, 25%, 59%) | oklch(71.8% 0.085 138) | |
| Saffron | #E9C46A | rgb(233, 196, 106) | hsl(43, 74%, 66%) | oklch(83.4% 0.117 87) | |
| Pistachio | #7CCE88 | rgb(124, 206, 136) | hsl(129, 46%, 65%) | oklch(78.1% 0.128 148) |
Why it works and how to use it
It works because the lightness steps are gentle (39% to 66%), which keeps the mood consistent from edge to edge. Try it for websites, presentations and branding.
- Background: Saffron (#E9C46A) is the lightest color, so it belongs on large surfaces.
- Text: Cadet (#2A9D8F) on #E9C46A gives 1.99:1, so pair it with a darker neutral for body copy.
- Primary: Pistachio (#7CCE88) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Sage (#8AB17D) for highlights, badges and hover states.
No pair inside the palette reaches 4.5:1, so add black or white for body text.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Pistachio & Saffron Muse
A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.
Primary action SecondaryCard title
Card title
Card title
Roles are assigned by lightness.
Color blindness simulation
#2A9D8F
#8AB17D
#E9C46A
#7CCE88
Color-blind check: under protanopia, Saffron and Pistachio become hard to tell apart, so do not rely on that pair alone to carry meaning.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#2A9D8F on #E9C46A | Aa | 1.99:1 | Fail |
#2A9D8F on #7CCE88 | Aa | 1.75:1 | Fail |
#8AB17D on #E9C46A | Aa | 1.45:1 | Fail |
#2A9D8F on #8AB17D | Aa | 1.37:1 | Fail |
#8AB17D on #7CCE88 | Aa | 1.27:1 | Fail |
#E9C46A on #7CCE88 | Aa | 1.14:1 | Fail |
Similar palettes 24 more in this mood
#5B7F3A
#9BB868
#E9C46A
#008F7A
#037B03
#F2C14E
#2E9CA6
#F4EBD9
#8A6800
#84A347
#00C38B
#56E7F4
#00818A
#009D8C
#31CA88
#ACE496
#00616A
#4DA27C
#98AA55
#FFCA7B
#498711
#00AA6D
#00C0AE
#00DDF3
#A07200
#59964F
#8E9100
#44E9BE
#EDC27E
#B1C06C
#4A8E67
#006364
#00735C
#379879
#7DC5A6
#81E3CC
#1B6F73
#47B377
#F2CC8F
#F4F1DE
#1B4332
#52B788
#E9F5F0
#007F7E
#002124
#008375
#4FBA83
#ACE1B5
#006B75
#0F5132
#F5E6C8
#D4AF37
#264653
#2A9D8F
#26B36C
#F4A261
#00A6A6
#7DD8D8
#C0A600
#FDFDFD
#002318
#00E076
#45DAE9
#E3E3E3
#F9FFFC
#34FF8D
#5EEDFD
#343434
#00A6A6
#7DD8D8
#00C57C
#FDFDFD
#7EB921
#FFD166
#8CD790
#FDFDFD
#004F4D
#009B8A
#E7BF00
#FFE6D3
#FFFDE8
#D3C03E
#AACA8F
#435D42
#0F5C63
#2A8A8C
#9FD3CF
#F2F1EA
#9B0D22
#D4A429
#00828B
#D3CAB9