#3C5148
#7A9B76
#C8D5B9
#F6F5EE
#F9EDEALinen
#E8C4B8Baby Pink
#3793AESteel Blue
#4A3F3CTaupe
Steel Blue & Baby Pink Trail is a complementary color palette tagged muted, minimal, white. Near-complementary hues (about 179° 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 |
|---|---|---|---|---|---|
| Linen | #F9EDEA | rgb(249, 237, 234) | hsl(12, 56%, 95%) | oklch(95.5% 0.014 34) | |
| Baby Pink | #E8C4B8 | rgb(232, 196, 184) | hsl(15, 51%, 82%) | oklch(84.8% 0.044 39) | |
| Steel Blue | #3793AE | rgb(55, 147, 174) | hsl(194, 52%, 45%) | oklch(62.0% 0.094 221) | |
| Taupe | #4A3F3C | rgb(74, 63, 60) | hsl(13, 10%, 26%) | oklch(37.8% 0.016 36) |
Why it works and how to use it
It works because the lightness range is wide (26% to 95%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Linen (#F9EDEA) is the lightest color, so it belongs on large surfaces.
- Text: Taupe (#4A3F3C) on #F9EDEA gives 8.87:1, passing WCAG AAA.
- Primary: Steel Blue (#3793AE) is the most saturated mid-tone; use it for buttons and links (3.08:1 against the background, fine for UI elements).
- Accent: Baby Pink (#E8C4B8) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Linen on Taupe at 8.87:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Steel Blue & Baby Pink Trail
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
#F9EDEA
#E8C4B8
#3793AE
#4A3F3C
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#F9EDEA on #4A3F3C | Aa | 8.87:1 | AAA |
#E8C4B8 on #4A3F3C | Aa | 6.3:1 | AA |
#F9EDEA on #3793AE | Aa | 3.08:1 | AA large only |
#3793AE on #4A3F3C | Aa | 2.88:1 | Fail |
#E8C4B8 on #3793AE | Aa | 2.19:1 | Fail |
#F9EDEA on #E8C4B8 | Aa | 1.41:1 | Fail |
Similar palettes 24 more in this mood
#FBF7EF
#EAD9B8
#C9A961
#3A3226
#142532
#528494
#DE9D89
#FAF4E9
#F9EDEA
#E8C4B8
#B76E79
#4A3F3C
#1D1900
#B0BEB3
#D5EBBA
#FFF2E0
#3E4551
#677287
#EDF3FE
#FFE2A8
#3B4A3E
#728C69
#D3E0C3
#FCFAF3
#433D37
#AE9E8D
#FFD0C3
#FFEEE7
#F3EBDD
#DCCFB8
#436449
#1C2A20
#FFF3EA
#CFB6A1
#5E7F92
#4D4E4F
#FBF7EF
#EAD9B8
#B3A1E5
#3A3226
#273754
#52719E
#F1DDBE
#FDFAF5
#FFF8F7
#FED9CD
#D88C97
#5C514E
#42352D
#7D6452
#DFBF88
#FCF8F2
#4E3B3B
#7E5E5C
#C9A19C
#F6ECEA
#353C54
#646E8E
#C6AB8C
#F3EFE9
#FCF8F4
#F0DAC0
#DE9F7B
#2D2E3A
#40495A
#7689A7
#DEC8A8
#F0EEEB
#36332D
#BCAB8C
#F8D78E
#FFF6E9
#34444B
#62958C
#EDF4F2
#DAC799
#3E2723
#6D4C41
#A1887F
#EFEBE9
#006D77
#83C5BE
#EDF6F9
#FFDDD2
#3F2B2B
#8A5F5C
#F2B8B5
#FBF4F2
#7D6E5D
#B9A990
#E7DFD3
#F9F7F3