#3B684F
#855D7A
#B47798
#88BA9B
#A1CC93Pistachio
#AAA9C7Heather
#BA955AHazelnut
#7C7A95Slate
Faded Pistachio & Hazelnut is a complementary color palette tagged vintage, retro, muted. Near-complementary hues (about 155° 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 |
|---|---|---|---|---|---|
| Pistachio | #A1CC93 | rgb(161, 204, 147) | hsl(105, 36%, 69%) | oklch(80.0% 0.091 138) | |
| Heather | #AAA9C7 | rgb(170, 169, 199) | hsl(242, 21%, 72%) | oklch(74.6% 0.043 287) | |
| Hazelnut | #BA955A | rgb(186, 149, 90) | hsl(37, 41%, 54%) | oklch(69.1% 0.089 78) | |
| Slate | #7C7A95 | rgb(124, 122, 149) | hsl(244, 11%, 53%) | oklch(59.1% 0.041 288) |
Why it works and how to use it
It works because the lightness steps are gentle (53% to 72%), which keeps the mood consistent from edge to edge. Try it for websites, presentations and branding.
- Background: Pistachio (#A1CC93) is the lightest color, so it belongs on large surfaces.
- Text: Slate (#7C7A95) on #A1CC93 gives 2.28:1, so pair it with a darker neutral for body copy.
- Primary: Hazelnut (#BA955A) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Heather (#AAA9C7) 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 Faded Pistachio & Hazelnut
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
#A1CC93
#AAA9C7
#BA955A
#7C7A95
Color-blind check: under tritanopia, Pistachio and Heather 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 |
|---|---|---|---|
#A1CC93 on #7C7A95 | Aa | 2.28:1 | Fail |
#AAA9C7 on #7C7A95 | Aa | 1.81:1 | Fail |
#A1CC93 on #BA955A | Aa | 1.54:1 | Fail |
#BA955A on #7C7A95 | Aa | 1.48:1 | Fail |
#A1CC93 on #AAA9C7 | Aa | 1.26:1 | Fail |
#AAA9C7 on #BA955A | Aa | 1.22:1 | Fail |
Similar palettes 24 more in this mood
#9AD3FF
#64E1AB
#00CBC3
#008BA3
#A694D2
#BF768E
#6879A2
#724370
#008B6D
#6C8B38
#00CFCB
#86D894
#585881
#4F748D
#B69ED1
#8FB2F0
#C898D0
#7DA693
#636144
#664C73
#A17669
#B1809F
#BE8A57
#EEA1AD
#814160
#5C609A
#886E88
#B7ABCA
#026579
#229393
#70BEA6
#9DC2DE
#5D6038
#9D7E6C
#7590C2
#82B0E6
#BEC2DE
#A2B98F
#9696AB
#927553
#825A7D
#C27C6A
#D598A7
#CEAA85
#3B8185
#C29D9B
#57B9BF
#E5ACB2
#DA99BB
#6FBEC0
#B79281
#246D72
#0D7580
#846160
#BA8B86
#8FB5BA
#CAAB80
#B193A4
#A46268
#874A2D
#874658
#A0584E
#94856B
#DCA885
#116A7B
#CDC2AE
#ECE5C7
#C2DEDC
#3D405B
#81B29A
#F2CC8F
#F4F1DE
#5D4037
#8D6E63
#BCAAA4
#EFEBE9
#22223B
#595D79
#9A8C98
#F2E9E4
#4B3832
#854442
#BE9B7B
#FFF4E6
#B76E79
#E8A0A6
#F4C8C8
#FDF2F0
#A88577
#E4C1AB
#FFEFD7
#719080