#90EBAA
#40B5B3
#4183B9
#F6F9EE
#196178Peacock
#3396B7Steel Blue
#B2D884Celadon
#F7F2E4Linen
Bold Celadon & Steel Blue is a complementary color palette tagged cold, blue, green. Near-complementary hues (about 151° 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 |
|---|---|---|---|---|---|
| Peacock | #196178 | rgb(25, 97, 120) | hsl(195, 66%, 28%) | oklch(46.0% 0.077 224) | |
| Steel Blue | #3396B7 | rgb(51, 150, 183) | hsl(195, 56%, 46%) | oklch(63.0% 0.102 224) | |
| Celadon | #B2D884 | rgb(178, 216, 132) | hsl(87, 52%, 68%) | oklch(83.5% 0.117 129) | |
| Linen | #F7F2E4 | rgb(247, 242, 228) | hsl(44, 54%, 93%) | oklch(96.1% 0.019 91) |
Why it works and how to use it
It works because the lightness range is wide (28% to 93%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Linen (#F7F2E4) is the lightest color, so it belongs on large surfaces.
- Text: Peacock (#196178) on #F7F2E4 gives 6.21:1, passing WCAG AA.
- Primary: Steel Blue (#3396B7) is the most saturated mid-tone; use it for buttons and links (3.03:1 against the background, fine for UI elements).
- Accent: Celadon (#B2D884) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Peacock on Linen at 6.21:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Bold Celadon & 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
#196178
#3396B7
#B2D884
#F7F2E4
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#196178 on #F7F2E4 | Aa | 6.21:1 | AA |
#196178 on #B2D884 | Aa | 4.32:1 | AA large only |
#3396B7 on #F7F2E4 | Aa | 3.03:1 | AA large only |
#3396B7 on #B2D884 | Aa | 2.11:1 | Fail |
#196178 on #3396B7 | Aa | 2.05:1 | Fail |
#B2D884 on #F7F2E4 | Aa | 1.44:1 | Fail |
Similar palettes 24 more in this mood
#B5E48C
#52B69A
#168AAD
#F6F9EE
#E1ECFF
#94C7FF
#009E6D
#324E00
#3A86FF
#8EC5FC
#E0C3FC
#FFFFFF
#0B3D2E
#00FF87
#60EFFF
#FFFFFF
#3D405B
#81B29A
#96DEFF
#F4F1DE
#00CEAD
#00B856
#00A2CD
#001D21
#00C184
#64D2FC
#A9D875
#3DEEEC
#E0EFFF
#6EB2FC
#1E5B9A
#002344
#9AD3FF
#64E1AB
#00CBC3
#008BA3
#18213B
#526195
#7393C1
#ECFFFB
#1F4E79
#3C8DBC
#A9D6E5
#EAF6FB
#3D3B6B
#6D6CA6
#B9B8E3
#F2F1FB
#4F4E7F
#7E7EB9
#D1D0FC
#FAF9FF
#D9ED92
#99D98C
#52B69A
#168AAD
#304D7C
#4F78A9
#89B3D6
#E9F1F7
#2E3A66
#5C6BA6
#5EC4BE
#F5EFE4
#E6C2FF
#52B69A
#168AAD
#F6F9EE
#00C187
#00C7C5
#94C173
#9DE4FF
#EEF4FF
#92CEF9
#0090DA
#072E46
#003C3C
#00F8D6
#A7E1FF
#FDFDFD
#3F195F
#7F38AE
#8DC668
#F6F3EA
#63AEA6
#65CB9E
#82CEFA
#B7F3FF
#0C2654
#3C59A3
#6B7FD5
#F3E8F3