#3D405B
#81B29A
#96DEFF
#F4F1DE
#2E3A66Charcoal
#5C6BA6Steel Blue
#5EC4BEEucalyptus
#F5EFE4Linen
True Eucalyptus & Steel Blue is a complementary color palette tagged muted, cold, blue. Near-complementary hues (about 172° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Charcoal | #2E3A66 | rgb(46, 58, 102) | hsl(227, 38%, 29%) | oklch(36.1% 0.078 271) | |
| Steel Blue | #5C6BA6 | rgb(92, 107, 166) | hsl(228, 29%, 51%) | oklch(54.1% 0.094 272) | |
| Eucalyptus | #5EC4BE | rgb(94, 196, 190) | hsl(176, 46%, 57%) | oklch(75.8% 0.096 190) | |
| Linen | #F5EFE4 | rgb(245, 239, 228) | hsl(39, 46%, 93%) | oklch(95.4% 0.016 83) |
Why it works and how to use it
With 4 chromatic colors, Eucalyptus takes the lead while the rest support. Lightness runs from 29% to 93%. Well suited to websites, presentations and branding.
- Background: Linen (#F5EFE4) is the lightest color, so it belongs on large surfaces.
- Text: Charcoal (#2E3A66) on #F5EFE4 gives 9.59:1, passing WCAG AAA.
- Primary: Eucalyptus (#5EC4BE) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Steel Blue (#5C6BA6) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Charcoal on Linen at 9.59:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with True Eucalyptus & Steel Blue
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
#2E3A66
#5C6BA6
#5EC4BE
#F5EFE4
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#2E3A66 on #F5EFE4 | Aa | 9.59:1 | AAA |
#2E3A66 on #5EC4BE | Aa | 5.29:1 | AA |
#5C6BA6 on #F5EFE4 | Aa | 4.47:1 | AA large only |
#5C6BA6 on #5EC4BE | Aa | 2.46:1 | Fail |
#2E3A66 on #5C6BA6 | Aa | 2.15:1 | Fail |
#5EC4BE on #F5EFE4 | Aa | 1.81:1 | Fail |
Similar palettes 24 more in this mood
#18213B
#526195
#7393C1
#ECFFFB
#3D3B6B
#6D6CA6
#B9B8E3
#F2F1FB
#4F4E7F
#7E7EB9
#D1D0FC
#FAF9FF
#304D7C
#4F78A9
#89B3D6
#E9F1F7
#5B83A4
#89A7BD
#9DC3ED
#DFEEFF
#D2A9C7
#90C7F5
#D8C5EE
#EDF0FF
#44546C
#7D93BE
#B0C1F4
#D7F4FF
#E1F2FF
#A4DCFF
#74AAA9
#3B4651
#4E7E80
#9FD7FD
#F2F7FF
#30372E
#315E7B
#79C2EE
#BFF7F5
#F6FBFF
#404C60
#738DAB
#97C4F5
#E7F0F9
#445C89
#759FC9
#ACDAFF
#E4F1F9
#C3D2FF
#006556
#131200
#F0F0F0
#F2F0FA
#D6D1EE
#8F86C8
#3A3560
#0F5C63
#2A8A8C
#9FD3CF
#F2F1EA
#2D6671
#368FA5
#A8EDFA
#F2FCFD
#0E3B4A
#1F7A8C
#8FD5D2
#EAF7F5
#2A3451
#4F6E9F
#9BCDEF
#EAF7F5
#5C8D89
#A7D7C5
#F4F9F4
#87D9FF
#006D77
#83C5BE
#EDF6F9
#FFDDD2
#A8DADC
#457B9D
#1D3557
#F1FAEE
#1B4965
#5FA8D3
#A8E0DE
#E4F1FF
#1B4332
#2D6A4F
#B7B7A4
#F0EFEB