#5A5934
#776D5C
#BE957B
#DFACA6
#A1C6CAAsh
#AC976FHazelnut
#A086A3Stone
#347175Pine
Pine & Hazelnut Whisper is a complementary color palette tagged muted, vintage, gray. Near-complementary hues (about 147° 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 |
|---|---|---|---|---|---|
| Ash | #A1C6CA | rgb(161, 198, 202) | hsl(186, 28%, 71%) | oklch(80.1% 0.040 204) | |
| Hazelnut | #AC976F | rgb(172, 151, 111) | hsl(39, 27%, 55%) | oklch(68.5% 0.060 83) | |
| Stone | #A086A3 | rgb(160, 134, 163) | hsl(294, 14%, 58%) | oklch(65.4% 0.052 323) | |
| Pine | #347175 | rgb(52, 113, 117) | hsl(184, 38%, 33%) | oklch(51.0% 0.063 201) |
Why it works and how to use it
With 3 chromatic colors, Hazelnut takes the lead while the rest support. Lightness runs from 33% to 71%. Well suited to websites, presentations and branding.
- Background: Ash (#A1C6CA) is the lightest color, so it belongs on large surfaces.
- Text: Pine (#347175) on #A1C6CA gives 3.04:1, enough for large headings only.
- Primary: Hazelnut (#AC976F) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Stone (#A086A3) 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 Pine & Hazelnut Whisper
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
#A1C6CA
#AC976F
#A086A3
#347175
Color-blind check: under tritanopia, Hazelnut and Stone 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 |
|---|---|---|---|
#A1C6CA on #347175 | Aa | 3.04:1 | AA large only |
#AC976F on #347175 | Aa | 1.97:1 | Fail |
#A1C6CA on #A086A3 | Aa | 1.78:1 | Fail |
#A086A3 on #347175 | Aa | 1.71:1 | Fail |
#A1C6CA on #AC976F | Aa | 1.54:1 | Fail |
#AC976F on #A086A3 | Aa | 1.15:1 | Fail |
Similar palettes 24 more in this mood
#6D5B3A
#6F658B
#678962
#BAB3E4
#BEC2DE
#A2B98F
#9696AB
#927553
#73684C
#A38580
#829CAF
#B1C2CB
#645762
#777F9B
#888D72
#A0A793
#58737F
#9E8A87
#8EAEC2
#C6B48B
#5D4037
#8D6E63
#BCAAA4
#EFEBE9
#4B3832
#854442
#BE9B7B
#FFF4E6
#8C6A5D
#C6A48E
#E9D8C0
#5C7A6B
#9E6B73
#C99CA2
#E9D5D3
#F7F2EF
#3D272C
#9B7981
#AC9498
#E4C8CE
#DFCEAD
#BFA797
#96978E
#6A8667
#6B4936
#6D6541
#869884
#ADD7D2
#875659
#AD8A8C
#839AB9
#95A78C
#626442
#57879F
#B5889C
#9BB2C2
#475C4E
#BEA5CC
#CCC49F
#CDC3D7
#94875B
#C4C0BF
#FAD0AB
#FFDEE6
#B2DFD2
#859577
#776A4C
#41271C
#666A77
#A58265
#93A3C2
#C7D4A7
#4C5577
#628B6D
#AD8178
#BD9C99
#CAAB80
#B193A4
#A46268
#874A2D
#8A784C
#A3897C
#BFA58B
#C1C1B5
#81775C
#999997
#B5E4CC
#E5FDDE
#75837A
#A6885E
#ABACAA
#EEEABE