#90EBAA
#40B5B3
#4183B9
#F6F9EE
#E6C2FFPeriwinkle
#52B69ACadet
#168AADSteel Blue
#F6F9EESmoke
Lush Steel Blue & Cadet is a vivid split color palette tagged cold, blue, teal. A split scheme: Periwinkle plays against Steel Blue across roughly 112° 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 |
|---|---|---|---|---|---|
| Periwinkle | #E6C2FF | rgb(230, 194, 255) | hsl(275, 100%, 88%) | oklch(86.5% 0.091 311) | |
| Cadet | #52B69A | rgb(82, 182, 154) | hsl(163, 41%, 52%) | oklch(70.9% 0.103 172) | |
| Steel Blue | #168AAD | rgb(22, 138, 173) | hsl(194, 77%, 38%) | oklch(59.0% 0.107 225) | |
| Smoke | #F6F9EE | rgb(246, 249, 238) | hsl(76, 48%, 95%) | oklch(97.7% 0.015 119) |
Why it works and how to use it
It works because the lightness range is wide (38% to 95%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Smoke (#F6F9EE) is the lightest color, so it belongs on large surfaces.
- Text: Steel Blue (#168AAD) on #F6F9EE gives 3.74:1, enough for large headings only.
- Primary: Periwinkle (#E6C2FF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Cadet (#52B69A) 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 Lush Steel Blue & Cadet
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
#E6C2FF
#52B69A
#168AAD
#F6F9EE
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#168AAD on #F6F9EE | Aa | 3.74:1 | AA large only |
#E6C2FF on #168AAD | Aa | 2.57:1 | Fail |
#52B69A on #F6F9EE | Aa | 2.31:1 | Fail |
#52B69A on #168AAD | Aa | 1.62:1 | Fail |
#E6C2FF on #52B69A | Aa | 1.59:1 | Fail |
#E6C2FF on #F6F9EE | Aa | 1.46:1 | Fail |
Similar palettes 24 more in this mood
#003C3C
#00F8D6
#A7E1FF
#FDFDFD
#1B4D3E
#2A9D8F
#99B5FF
#FDF6E3
#005479
#0081AB
#38BEE5
#E3F2FD
#B5E48C
#52B69A
#168AAD
#F6F9EE
#0F5C63
#2A8A8C
#9FD3CF
#F2F1EA
#0E3B4A
#1F7A8C
#8FD5D2
#EAF7F5
#0077B6
#00B4D8
#90E0EF
#CAF0F8
#03045E
#0077B6
#00B4D8
#90E0EF
#03256C
#2541B2
#1768AC
#06BEE1
#006D77
#83C5BE
#EDF6F9
#FFDDD2
#3A86FF
#8EC5FC
#E0C3FC
#FFFFFF
#0B3D2E
#00FF87
#60EFFF
#FFFFFF
#00A8A8
#4FD1C5
#B2F5EA
#F0FFF4
#0B132B
#3B487A
#5C7BA8
#6FFFE9
#40DADC
#00BBED
#09C393
#3A8FF6
#7071CC
#00918B
#4E91D5
#4EBBDB
#3D405B
#81B29A
#96DEFF
#F4F1DE
#5AA2D9
#8BB1FF
#00CED9
#5ED8FF
#0086A6
#4D9184
#37A8F6
#00CCD6
#A630C1
#755EF5
#7ABCFF
#80E6FF
#00C184
#64D2FC
#A9D875
#3DEEEC
#E0EFFF
#6EB2FC
#1E5B9A
#002344
#18213B
#526195
#7393C1
#ECFFFB