#0F5C63
#2A8A8C
#9FD3CF
#F2F1EA
#1B4965Charcoal
#B99B54Camel
#A8E0DEPowder Blue
#E4F1FFFrost
Frost Camel & Charcoal is a complementary color palette tagged muted, white. Near-complementary hues (about 161° 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 |
|---|---|---|---|---|---|
| Charcoal | #1B4965 | rgb(27, 73, 101) | hsl(203, 58%, 25%) | oklch(38.8% 0.069 239) | |
| Camel | #B99B54 | rgb(185, 155, 84) | hsl(42, 42%, 53%) | oklch(70.2% 0.097 87) | |
| Powder Blue | #A8E0DE | rgb(168, 224, 222) | hsl(178, 47%, 77%) | oklch(86.8% 0.057 193) | |
| Frost | #E4F1FF | rgb(228, 241, 255) | hsl(211, 100%, 95%) | oklch(95.3% 0.023 250) |
Why it works and how to use it
The palette holds together thanks to its complementary hue relationship and a strong light-to-dark ladder (95% down to 25% lightness). A natural fit for websites, presentations and branding.
- Background: Frost (#E4F1FF) is the lightest color, so it belongs on large surfaces.
- Text: Charcoal (#1B4965) on #E4F1FF gives 8.38:1, passing WCAG AAA.
- Primary: Powder Blue (#A8E0DE) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Camel (#B99B54) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Charcoal on Frost at 8.38:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Frost Camel & Charcoal
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
#1B4965
#B99B54
#A8E0DE
#E4F1FF
Color-blind check: under protanopia, Powder Blue and Frost 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 |
|---|---|---|---|
#1B4965 on #E4F1FF | Aa | 8.38:1 | AAA |
#1B4965 on #A8E0DE | Aa | 6.57:1 | AA |
#1B4965 on #B99B54 | Aa | 3.6:1 | AA large only |
#B99B54 on #E4F1FF | Aa | 2.33:1 | Fail |
#B99B54 on #A8E0DE | Aa | 1.83:1 | Fail |
#A8E0DE on #E4F1FF | Aa | 1.27:1 | Fail |
Similar palettes 24 more in this mood
#A47864
#C9A58B
#E8D9CB
#F7F3EE
#D9A48F
#EFC8B8
#F7E6DC
#FFFAF6
#0E3B4A
#1F7A8C
#8FD5D2
#EAF7F5
#3C5148
#7A9B76
#C8D5B9
#F6F5EE
#1A4D2E
#4F6F52
#E8DFCA
#F5EFE6
#B08968
#DDB892
#E6CCB2
#FFF6EA
#3E2723
#6D4C41
#A1887F
#EFEBE9
#006D77
#83C5BE
#EDF6F9
#FFDDD2
#3D405B
#81B29A
#F2CC8F
#F4F1DE
#7D6E5D
#B9A990
#E7DFD3
#F9F7F3
#5D4037
#8D6E63
#BCAAA4
#EFEBE9
#A8DADC
#457B9D
#1D3557
#F1FAEE
#1B4965
#5FA8D3
#A8E0DE
#E4F1FF
#4B3832
#854442
#BE9B7B
#FFF4E6
#B76E79
#E8A0A6
#F4C8C8
#FDF2F0
#1B4332
#2D6A4F
#B7B7A4
#F0EFEB
#A68A64
#C2B280
#E6DCC3
#FAF7F0
#C9A66B
#E4C590
#F1E3C8
#F9F5EC
#5B7B6C
#8AA399
#C4D3CC
#EEF3F0
#1C2541
#465D79
#5BC0BE
#FFFFFF
#FDEFF4
#F7C8D8
#CDE7F0
#5B6C8F
#EAF7EF
#BFE8D2
#F9E1C4
#4A6B5A
#F3ECFA
#D9C6F2
#FFD9C2
#5E4B7A