#436291
#6B88B0
#7CA5D5
#C3D8FF
#878DBEBlue Gray
#CBB8C4Silver
#DEC3F6Periwinkle
#FFDBE0Petal
Periwinkle & Blue Gray Field is a pastel light, split color palette tagged winter, muted, cold. The hues span about 119°, enough contrast to create a focal point without the harshness of true complements. The colors are light and airy, which suits friendly, soft-spoken brands. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Blue Gray | #878DBE | rgb(135, 141, 190) | hsl(233, 30%, 64%) | oklch(65.7% 0.073 279) | |
| Silver | #CBB8C4 | rgb(203, 184, 196) | hsl(322, 15%, 76%) | oklch(80.2% 0.027 340) | |
| Periwinkle | #DEC3F6 | rgb(222, 195, 246) | hsl(272, 74%, 86%) | oklch(85.6% 0.075 309) | |
| Petal | #FFDBE0 | rgb(255, 219, 224) | hsl(352, 100%, 93%) | oklch(92.3% 0.040 8) |
Why it works and how to use it
The palette holds together thanks to its split hue relationship and a soft light-to-dark ladder (93% down to 64% lightness). A natural fit for social media templates and gentle interfaces.
- Background: Petal (#FFDBE0) is the lightest color, so it belongs on large surfaces.
- Text: Blue Gray (#878DBE) on #FFDBE0 gives 2.5:1, so pair it with a darker neutral for body copy.
- Primary: Periwinkle (#DEC3F6) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Silver (#CBB8C4) for highlights, badges and hover states.
No pair inside the palette reaches 4.5:1, so add black or white for body text.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Periwinkle & Blue Gray Field
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
#878DBE
#CBB8C4
#DEC3F6
#FFDBE0
Color-blind check: under tritanopia, Periwinkle and Petal 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 |
|---|---|---|---|
#878DBE on #FFDBE0 | Aa | 2.5:1 | Fail |
#878DBE on #DEC3F6 | Aa | 2.01:1 | Fail |
#878DBE on #CBB8C4 | Aa | 1.7:1 | Fail |
#CBB8C4 on #FFDBE0 | Aa | 1.47:1 | Fail |
#DEC3F6 on #FFDBE0 | Aa | 1.24:1 | Fail |
#CBB8C4 on #DEC3F6 | Aa | 1.18:1 | Fail |
Similar palettes 24 more in this mood
#416E90
#6194C0
#9CBCD9
#96D7FF
#D1DBF0
#7B9CA4
#7B71A9
#507C99
#005359
#529D9F
#8ACBCC
#8DE4F3
#425355
#588DAD
#9081B1
#A8AEBB
#77DADA
#7EB3A3
#41674C
#37565E
#00727A
#667248
#869387
#68B4A1
#315E7B
#79C2EE
#BFF7F5
#F6FBFF
#2D6671
#368FA5
#A8EDFA
#F2FCFD
#1B4965
#5FA8D3
#A8E0DE
#E4F1FF
#13505B
#0C7489
#8FD3E0
#F0FAFB
#574276
#595D6D
#9E819B
#EBA3B8
#F7FBFF
#D7E6F2
#7FA7C9
#243B53
#466947
#7E8D97
#73B9C2
#BAD2CB
#4B615B
#87A489
#91ADC0
#DEF1F4
#EAF4FB
#BFDCF0
#5C93C4
#1F3F5F
#83D8E1
#FF867B
#00849B
#9D0E1E
#663537
#955558
#E2DAD5
#F5F2F1
#B6E6FF
#B82625
#197A40
#F8F5F1
#BA1200
#AAE2FE
#246C32
#F0EEEB
#2C3E50
#7F8C8D
#BDC3C7
#ECF0F1
#1E3A2F
#3E6B55
#DCE7E1
#FBFCFB
#6B7B8C
#98A6B5
#C8D1DA
#EEF2F5
#692390
#5E6891
#4194F1
#DBD6FF