#00CEAD
#00B856
#00A2CD
#001D21
#4A4E4DGraphite
#6887C8Blue Gray
#AAC7F2Baby Blue
#94EA9ESeafoam
Seafoam & Blue Gray Haze is a split color palette tagged cold, blue, green. The hues span about 94°, enough contrast to create a focal point without the harshness of true complements. Neither washed out nor loud, it adapts to most contexts. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Graphite | #4A4E4D | rgb(74, 78, 77) | hsl(165, 3%, 30%) | oklch(42.0% 0.005 179) | |
| Blue Gray | #6887C8 | rgb(104, 135, 200) | hsl(221, 47%, 60%) | oklch(62.7% 0.105 264) | |
| Baby Blue | #AAC7F2 | rgb(170, 199, 242) | hsl(216, 73%, 81%) | oklch(82.3% 0.069 258) | |
| Seafoam | #94EA9E | rgb(148, 234, 158) | hsl(127, 67%, 75%) | oklch(86.3% 0.134 147) |
Why it works and how to use it
It works because the lightness range is wide (30% to 81%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Seafoam (#94EA9E) is the lightest color, so it belongs on large surfaces.
- Text: Graphite (#4A4E4D) on #94EA9E gives 5.84:1, passing WCAG AA.
- Primary: Baby Blue (#AAC7F2) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Blue Gray (#6887C8) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Graphite on Seafoam at 5.84:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Seafoam & Blue Gray Haze
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
#4A4E4D
#6887C8
#AAC7F2
#94EA9E
Color-blind check: under tritanopia, Baby Blue and Seafoam 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 |
|---|---|---|---|
#4A4E4D on #94EA9E | Aa | 5.84:1 | AA |
#4A4E4D on #AAC7F2 | Aa | 4.89:1 | AA |
#6887C8 on #94EA9E | Aa | 2.47:1 | Fail |
#4A4E4D on #6887C8 | Aa | 2.37:1 | Fail |
#6887C8 on #AAC7F2 | Aa | 2.07:1 | Fail |
#AAC7F2 on #94EA9E | Aa | 1.19:1 | Fail |
Similar palettes 24 more in this mood
#00C184
#64D2FC
#A9D875
#3DEEEC
#9AD3FF
#64E1AB
#00CBC3
#008BA3
#90EBAA
#40B5B3
#4183B9
#F6F9EE
#D9ED92
#99D98C
#52B69A
#168AAD
#00C187
#00C7C5
#94C173
#9DE4FF
#63AEA6
#65CB9E
#82CEFA
#B7F3FF
#9FD1B2
#65CAE2
#4D978F
#0267A2
#8BCBFF
#00ED85
#27DEFF
#01F4DF
#2E4E28
#11769F
#6FBEC4
#61D6B4
#EFFFBE
#B4F5A7
#6ED1B4
#38A1C4
#00594C
#006D7A
#528556
#2786C2
#196178
#3396B7
#B2D884
#F7F2E4
#2D6A4F
#65A5E7
#95D5B2
#D8F3DC
#0B3D91
#1E88E5
#96C7FF
#CCFF90
#B5E48C
#52B69A
#168AAD
#F6F9EE
#E1ECFF
#94C7FF
#009E6D
#324E00
#31A3E1
#00C4AA
#00CBE0
#8DEFA2
#0B2447
#3B5C9E
#6E86D6
#A5D7E8
#000814
#1B3A69
#2A5A99
#79EB85
#A163FF
#005A89
#004556
#6BD09D
#0B3D91
#1E88E5
#00E5A0
#CCFF90
#0077B6
#00B4D8
#90E0EF
#CAF0F8
#03045E
#0077B6
#00B4D8
#90E0EF