#EDEEF0
#C9CCD1
#1D4ED8
#0B1220
#477DC1Steel Blue
#D9A57CLatte
#A3B18ASage
#F3EDE4Linen
Earthy Steel Blue & Latte is a complementary color palette tagged modern, blue, white. Near-complementary hues (about 177° 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 |
|---|---|---|---|---|---|
| Steel Blue | #477DC1 | rgb(71, 125, 193) | hsl(213, 50%, 52%) | oklch(58.4% 0.120 255) | |
| Latte | #D9A57C | rgb(217, 165, 124) | hsl(26, 55%, 67%) | oklch(76.1% 0.083 59) | |
| Sage | #A3B18A | rgb(163, 177, 138) | hsl(82, 20%, 62%) | oklch(73.9% 0.056 124) | |
| Linen | #F3EDE4 | rgb(243, 237, 228) | hsl(36, 38%, 92%) | oklch(94.8% 0.014 78) |
Why it works and how to use it
The palette holds together thanks to its complementary hue relationship and a soft light-to-dark ladder (92% down to 52% lightness). A natural fit for websites, presentations and branding.
- Background: Linen (#F3EDE4) is the lightest color, so it belongs on large surfaces.
- Text: Steel Blue (#477DC1) on #F3EDE4 gives 3.63:1, enough for large headings only.
- Primary: Latte (#D9A57C) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Sage (#A3B18A) 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 Earthy Steel Blue & Latte
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
#477DC1
#D9A57C
#A3B18A
#F3EDE4
Color-blind check: under protanopia and deuteranopia, Latte and Sage 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 |
|---|---|---|---|
#477DC1 on #F3EDE4 | Aa | 3.63:1 | AA large only |
#A3B18A on #F3EDE4 | Aa | 1.96:1 | Fail |
#477DC1 on #D9A57C | Aa | 1.94:1 | Fail |
#D9A57C on #F3EDE4 | Aa | 1.88:1 | Fail |
#477DC1 on #A3B18A | Aa | 1.85:1 | Fail |
#D9A57C on #A3B18A | Aa | 1.04:1 | Fail |
Similar palettes 24 more in this mood
#EA4A59
#8EC5FC
#E0C3FC
#FDFDFD
#EEF4FF
#92CEF9
#0090DA
#072E46
#4A3222
#8B5E3C
#72D1FF
#FFF8EC
#D871CA
#0582CA
#F5F0E1
#F4A261
#929100
#8EC5FC
#E0C3FC
#FDFDFD
#EEF4FF
#A9C6FF
#4C7DFF
#1B2A49
#121214
#5D6064
#B3CCFF
#E6EEFF
#3E4F93
#5467BE
#E7A03E
#F5EFE4
#6B3A1F
#4E72B5
#D4A574
#FAF0E4
#F5F7FA
#D9E1EA
#3B6EA5
#1C2733
#2469A5
#C97D5A
#E8C9A8
#F8F1E7
#F4F3F1
#B9B6B1
#5F5C58
#438CD2
#1F5A82
#0089A7
#FF8A65
#FFF3E0
#3F3E57
#4F90C2
#E9F5F2
#92DE9E
#0083AF
#FDFDFD
#F9C5D1
#2E7D5B
#EEF4FF
#BDBFFD
#7F6EFA
#272648
#0A1F73
#2A8CCD
#F1FDFF
#FFD285
#EDEEF0
#C9CCD1
#006699
#05141E
#0F5C63
#2A8A8C
#9FD3CF
#F2F1EA
#D2637C
#638CCC
#E8C582
#FDFDFD
#88A7F2
#D9C08A
#8A8B6A
#F2EEDF
#3C628E
#8CBEDC
#EDF6F9
#C5A85B
#EDEEF0
#C9CCD1
#073AFA
#48556F