#A47864
#C9A58B
#E8D9CB
#F7F3EE
#B4F0FFGlacier
#E1D6C2Bone
#655F45Umber
#AECAC8Silver
Cool Glacier & Umber is a complementary color palette tagged muted, gray, brown. Near-complementary hues (about 153° 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 |
|---|---|---|---|---|---|
| Glacier | #B4F0FF | rgb(180, 240, 255) | hsl(192, 100%, 85%) | oklch(91.9% 0.064 215) | |
| Bone | #E1D6C2 | rgb(225, 214, 194) | hsl(39, 34%, 82%) | oklch(88.0% 0.029 83) | |
| Umber | #655F45 | rgb(101, 95, 69) | hsl(49, 19%, 33%) | oklch(48.4% 0.040 97) | |
| Silver | #AECAC8 | rgb(174, 202, 200) | hsl(176, 21%, 74%) | oklch(81.8% 0.030 191) |
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 (85% down to 33% lightness). A natural fit for websites, presentations and branding.
- Background: Glacier (#B4F0FF) is the lightest color, so it belongs on large surfaces.
- Text: Umber (#655F45) on #B4F0FF gives 5.14:1, passing WCAG AA.
- Primary: Bone (#E1D6C2) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Silver (#AECAC8) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Glacier on Umber at 5.14:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Cool Glacier & Umber
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
#B4F0FF
#E1D6C2
#655F45
#AECAC8
Color-blind check: under deuteranopia, Glacier and Bone 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 |
|---|---|---|---|
#B4F0FF on #655F45 | Aa | 5.14:1 | AA |
#E1D6C2 on #655F45 | Aa | 4.46:1 | AA large only |
#655F45 on #AECAC8 | Aa | 3.69:1 | AA large only |
#B4F0FF on #AECAC8 | Aa | 1.39:1 | Fail |
#E1D6C2 on #AECAC8 | Aa | 1.21:1 | Fail |
#B4F0FF on #E1D6C2 | Aa | 1.15:1 | Fail |
Similar palettes 24 more in this mood
#3E2723
#6D4C41
#A1887F
#EFEBE9
#7F5539
#B08968
#DDB892
#EDE0D4
#5D4037
#8D6E63
#BCAAA4
#EFEBE9
#4B3832
#854442
#BE9B7B
#FFF4E6
#8C6A5D
#C6A48E
#E9D8C0
#5C7A6B
#9E6B73
#C99CA2
#E9D5D3
#F7F2EF
#924A43
#5C6049
#D5D2BF
#F5F3ED
#FFE9DF
#D29E75
#AAB891
#807B73
#5A5934
#776D5C
#BE957B
#DFACA6
#916653
#D2C2B0
#E9D393
#2B201A
#452342
#845779
#C3A377
#D5CFC6
#3D272C
#9B7981
#AC9498
#E4C8CE
#3E4A3D
#7A6A55
#C9B79C
#EDE7DB
#DFCEAD
#BFA797
#96978E
#6A8667
#6B4936
#6D6541
#869884
#ADD7D2
#94875B
#C4C0BF
#FAD0AB
#FFDEE6
#B2DFD2
#859577
#776A4C
#41271C
#A1C6CA
#AC976F
#A086A3
#347175
#6D5B3A
#6F658B
#678962
#BAB3E4
#271707
#684B29
#AB8D63
#D3C9B9
#543123
#594B2C
#8F9F7D
#A6CEC0
#BEC2DE
#A2B98F
#9696AB
#927553
#452700
#686265
#FFB9A3
#FFEAEC