#0E3B4A
#1F7A8C
#8FD5D2
#EAF7F5
#44546CDusk
#7D93BEBlue Gray
#B0C1F4Periwinkle
#D7F4FFFrost
Bold Periwinkle & Blue Gray is a analogous color palette tagged ocean, muted, cold. Analogous neighbors on the wheel (Dusk, Blue Gray, Periwinkle) 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 |
|---|---|---|---|---|---|
| Dusk | #44546C | rgb(68, 84, 108) | hsl(216, 23%, 35%) | oklch(44.2% 0.045 258) | |
| Blue Gray | #7D93BE | rgb(125, 147, 190) | hsl(220, 33%, 62%) | oklch(66.2% 0.069 264) | |
| Periwinkle | #B0C1F4 | rgb(176, 193, 244) | hsl(225, 76%, 82%) | oklch(81.6% 0.075 270) | |
| Frost | #D7F4FF | rgb(215, 244, 255) | hsl(196, 100%, 92%) | oklch(95.0% 0.034 223) |
Why it works and how to use it
The palette holds together thanks to its analogous hue relationship and a strong light-to-dark ladder (92% down to 35% lightness). A natural fit for websites, presentations and branding.
- Background: Frost (#D7F4FF) is the lightest color, so it belongs on large surfaces.
- Text: Dusk (#44546C) on #D7F4FF gives 6.69:1, passing WCAG AA.
- Primary: Periwinkle (#B0C1F4) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Blue Gray (#7D93BE) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Dusk on Frost at 6.69:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Bold Periwinkle & Blue Gray
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
#44546C
#7D93BE
#B0C1F4
#D7F4FF
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#44546C on #D7F4FF | Aa | 6.69:1 | AA |
#44546C on #B0C1F4 | Aa | 4.31:1 | AA large only |
#7D93BE on #D7F4FF | Aa | 2.69:1 | Fail |
#44546C on #7D93BE | Aa | 2.49:1 | Fail |
#7D93BE on #B0C1F4 | Aa | 1.74:1 | Fail |
#B0C1F4 on #D7F4FF | Aa | 1.55:1 | Fail |
Similar palettes 24 more in this mood
#006D77
#83C5BE
#EDF6F9
#FFDDD2
#0B3954
#087E8B
#BFD7EA
#FFFFFF
#497697
#6DADC0
#B0DAE2
#D8ECF1
#3596D7
#40D1F5
#AFF2FF
#F1FDFF
#224D5C
#4398AA
#ACF2EF
#F0FDFB
#0B2447
#3B5C9E
#6E86D6
#A5D7E8
#192C50
#384D87
#44688D
#74B6C9
#0077B6
#00B4D8
#90E0EF
#CAF0F8
#03256C
#2541B2
#1768AC
#06BEE1
#00A8A8
#4FD1C5
#B2F5EA
#F0FFF4
#68709B
#9271DA
#639EC2
#84B8FF
#0086A6
#4D9184
#37A8F6
#00CCD6
#023E8A
#0077B6
#00B4D8
#90E0EF
#002E6E
#1A73D4
#6D93E8
#9DC6FF
#96BAFE
#8F7CCD
#00939A
#005D7F
#007D9B
#00B8BD
#90E3DD
#CAF1EF
#BEB6FF
#5596F8
#0099C7
#774384
#A3E3FF
#4EB2E1
#006DA5
#003F59
#00646F
#0080B9
#7192FF
#DFCFFF
#D4D2FF
#9FCBEC
#2F59BD
#006B81
#00D8D7
#6075BF
#00596C
#00436D
#00304E
#00538D
#006F94
#00C2C8
#014D71
#267CB2
#5CA9E7
#B7E6FF