#692390
#5E6891
#4194F1
#DBD6FF
#B6E3FFGlacier
#478A97Slate
#2C7069Pine
#2A55A3Lapis
Frosted Lapis & Slate is a analogous color palette tagged cold, blue. Analogous neighbors on the wheel (Glacier, Slate, Pine) give it a natural, low-tension flow. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Glacier | #B6E3FF | rgb(182, 227, 255) | hsl(203, 100%, 86%) | oklch(89.3% 0.061 236) | |
| Slate | #478A97 | rgb(71, 138, 151) | hsl(190, 36%, 44%) | oklch(59.5% 0.071 212) | |
| Pine | #2C7069 | rgb(44, 112, 105) | hsl(174, 44%, 31%) | oklch(50.0% 0.069 186) | |
| Lapis | #2A55A3 | rgb(42, 85, 163) | hsl(219, 59%, 40%) | oklch(46.3% 0.135 261) |
Why it works and how to use it
It works because the lightness range is wide (31% to 86%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Glacier (#B6E3FF) is the lightest color, so it belongs on large surfaces.
- Text: Lapis (#2A55A3) on #B6E3FF gives 5.27:1, passing WCAG AA.
- Primary: Pine (#2C7069) is the most saturated mid-tone; use it for buttons and links (4.25:1 against the background, fine for UI elements).
- Accent: Slate (#478A97) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Glacier on Lapis at 5.27:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Frosted Lapis & Slate
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
#B6E3FF
#478A97
#2C7069
#2A55A3
Color-blind check: under tritanopia, Pine and Lapis 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 |
|---|---|---|---|
#B6E3FF on #2A55A3 | Aa | 5.27:1 | AA |
#B6E3FF on #2C7069 | Aa | 4.25:1 | AA large only |
#B6E3FF on #478A97 | Aa | 2.88:1 | Fail |
#478A97 on #2A55A3 | Aa | 1.83:1 | Fail |
#478A97 on #2C7069 | Aa | 1.47:1 | Fail |
#2C7069 on #2A55A3 | Aa | 1.24:1 | Fail |
Similar palettes 24 more in this mood
#68709B
#9271DA
#639EC2
#84B8FF
#0086A6
#4D9184
#37A8F6
#00CCD6
#0085AA
#6B819E
#AE8DBC
#B4B0FF
#0ACAF9
#00C5C1
#005BAE
#4C37A8
#002E6E
#1A73D4
#6D93E8
#9DC6FF
#96BAFE
#8F7CCD
#00939A
#005D7F
#436291
#6B88B0
#7CA5D5
#C3D8FF
#878DBE
#CBB8C4
#DEC3F6
#FFDBE0
#BEB6FF
#5596F8
#0099C7
#774384
#416E90
#6194C0
#9CBCD9
#96D7FF
#A3E3FF
#4EB2E1
#006DA5
#003F59
#00646F
#0080B9
#7192FF
#DFCFFF
#008083
#00A0CC
#4B95EE
#00BB90
#1045A9
#00998C
#89BBDA
#9CD4DF
#D4D2FF
#9FCBEC
#2F59BD
#006B81
#00D8D7
#6075BF
#00596C
#00436D
#2346A2
#005F8E
#7168AA
#00A9C8
#014D71
#267CB2
#5CA9E7
#B7E6FF
#4B537A
#892680
#1CA6FF
#D1B6F9
#00CBEA
#9D90C5
#005886
#2A3F95
#6C3284
#B171A2
#AD9FE1
#A8BBFF
#0B2447
#3B5C9E
#6E86D6
#A5D7E8
#0077B6
#00B4D8
#90E0EF
#CAF0F8