#0F5C63
#2A8A8C
#9FD3CF
#F2F1EA
#F6F1FFSmoke
#D8CCF5Periwinkle
#ACB76BPistachio
#3E3560Charcoal
Pistachio & Charcoal Trail is a complementary color palette tagged cold, white. Near-complementary hues (about 176° 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 |
|---|---|---|---|---|---|
| Smoke | #F6F1FF | rgb(246, 241, 255) | hsl(261, 100%, 97%) | oklch(96.6% 0.019 302) | |
| Periwinkle | #D8CCF5 | rgb(216, 204, 245) | hsl(258, 67%, 88%) | oklch(86.8% 0.057 299) | |
| Pistachio | #ACB76B | rgb(172, 183, 107) | hsl(69, 35%, 57%) | oklch(75.3% 0.100 116) | |
| Charcoal | #3E3560 | rgb(62, 53, 96) | hsl(253, 29%, 29%) | oklch(35.9% 0.073 292) |
Why it works and how to use it
It works because the lightness range is wide (29% to 97%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Smoke (#F6F1FF) is the lightest color, so it belongs on large surfaces.
- Text: Charcoal (#3E3560) on #F6F1FF gives 10.06:1, passing WCAG AAA.
- Primary: Periwinkle (#D8CCF5) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Pistachio (#ACB76B) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Smoke on Charcoal at 10.06:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Pistachio & Charcoal Trail
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
#F6F1FF
#D8CCF5
#ACB76B
#3E3560
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#F6F1FF on #3E3560 | Aa | 10.06:1 | AAA |
#D8CCF5 on #3E3560 | Aa | 7.37:1 | AAA |
#ACB76B on #3E3560 | Aa | 5.17:1 | AA |
#F6F1FF on #ACB76B | Aa | 1.95:1 | Fail |
#D8CCF5 on #ACB76B | Aa | 1.42:1 | Fail |
#F6F1FF on #D8CCF5 | Aa | 1.37:1 | Fail |
Similar palettes 24 more in this mood
#0E3B4A
#1F7A8C
#8FD5D2
#EAF7F5
#7B68EE
#A594F9
#CDC1FF
#F5EFFF
#006D77
#83C5BE
#EDF6F9
#FFDDD2
#3A86FF
#8EC5FC
#E0C3FC
#FFFFFF
#A8DADC
#457B9D
#1D3557
#F1FAEE
#6A4C93
#8E7DBE
#C8B8DB
#F3EEF8
#1B4965
#5FA8D3
#A8E0DE
#E4F1FF
#0B3D2E
#00FF87
#60EFFF
#FFFFFF
#1B4332
#2D6A4F
#B7B7A4
#F0EFEB
#1C2541
#465D79
#5BC0BE
#FFFFFF
#00A8A8
#4FD1C5
#B2F5EA
#F0FFF4
#EEF9F7
#BCE7E0
#85CFC5
#2F5F5A
#F6F1FF
#D8CCF5
#B4A2E8
#3E3560
#14101F
#4D4365
#8E6BFF
#EEE9FF
#3D405B
#81B29A
#96DEFF
#F4F1DE
#DFB8FA
#B1E7E9
#AEBEE7
#FDFDFD
#121826
#8A2BE2
#00FFC6
#F0F0FF
#E0EFFF
#6EB2FC
#1E5B9A
#002344
#18213B
#526195
#7393C1
#ECFFFB
#ECFFFE
#81FEF1
#87C8BE
#89978D
#1F4E79
#3C8DBC
#A9D6E5
#EAF6FB
#13505B
#0C7489
#8FD3E0
#F0FAFB
#3D3B6B
#6D6CA6
#B9B8E3
#F2F1FB