#14101F
#4D4365
#8E6BFF
#EEE9FF
#ECF2FFFrost
#E1D1FFPeriwinkle
#008062Pine
#171721Licorice
Pine & Periwinkle Mist is a vivid split color palette tagged cold, white, black. A split scheme: Periwinkle plays against Licorice across roughly 95° of hue. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Frost | #ECF2FF | rgb(236, 242, 255) | hsl(221, 100%, 96%) | oklch(96.0% 0.019 266) | |
| Periwinkle | #E1D1FF | rgb(225, 209, 255) | hsl(261, 100%, 91%) | oklch(88.8% 0.065 301) | |
| Pine | #008062 | rgb(0, 128, 98) | hsl(166, 100%, 25%) | oklch(53.3% 0.107 169) | |
| Licorice | #171721 | rgb(23, 23, 33) | hsl(240, 18%, 11%) | oklch(20.9% 0.020 285) |
Why it works and how to use it
It works because the lightness range is wide (11% to 96%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Frost (#ECF2FF) is the lightest color, so it belongs on large surfaces.
- Text: Licorice (#171721) on #ECF2FF gives 15.84:1, passing WCAG AAA.
- Primary: Periwinkle (#E1D1FF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Pine (#008062) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Frost on Licorice at 15.84:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Pine & Periwinkle Mist
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
#ECF2FF
#E1D1FF
#008062
#171721
Color-blind check: under tritanopia, Frost and Periwinkle 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 |
|---|---|---|---|
#ECF2FF on #171721 | Aa | 15.84:1 | AAA |
#E1D1FF on #171721 | Aa | 12.5:1 | AAA |
#ECF2FF on #008062 | Aa | 4.39:1 | AA large only |
#008062 on #171721 | Aa | 3.61:1 | AA large only |
#E1D1FF on #008062 | Aa | 3.46:1 | AA large only |
#ECF2FF on #E1D1FF | Aa | 1.27:1 | Fail |
Similar palettes 24 more in this mood
#121826
#8A2BE2
#00FFC6
#F0F0FF
#111823
#3F506C
#81BBFF
#FFFAE9
#C3D2FF
#006556
#131200
#F0F0F0
#0F5C63
#2A8A8C
#9FD3CF
#F2F1EA
#06032F
#1A39FF
#8480FF
#E9EAFF
#0E3B4A
#1F7A8C
#8FD5D2
#EAF7F5
#EEE9FF
#8F84AA
#5019B0
#14101F
#7B68EE
#A594F9
#CDC1FF
#F5EFFF
#10002B
#5A189A
#9D4EDD
#E0AAFF
#03071E
#0B525B
#1B998B
#C2F970
#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
#0B132B
#3B487A
#5C7BA8
#6FFFE9
#EEF9F7
#BCE7E0
#85CFC5
#2F5F5A
#F6F1FF
#D8CCF5
#B4A2E8
#3E3560
#0A1024
#3A456B
#5C7CFA
#DDE3FF