#1E3033
#456578
#98BD9B
#F4FFE6
#F8FFFBWhite
#9BECC3Seafoam
#608A70Gray
#5E5C57Umber
Seafoam & Gray Breeze is a monochromatic color palette tagged muted, white, green. All four colors sit within 7° of hue, so the scheme reads as one color explored across light and dark. Neither washed out nor loud, it adapts to most contexts.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| White | #F8FFFB | rgb(248, 255, 251) | hsl(146, 100%, 99%) | oklch(99.4% 0.009 161) | |
| Seafoam | #9BECC3 | rgb(155, 236, 195) | hsl(150, 68%, 77%) | oklch(88.0% 0.098 161) | |
| Gray | #608A70 | rgb(96, 138, 112) | hsl(143, 18%, 46%) | oklch(59.5% 0.061 157) | |
| Umber | #5E5C57 | rgb(94, 92, 87) | hsl(43, 4%, 35%) | oklch(47.5% 0.008 89) |
Why it works and how to use it
The palette holds together thanks to its monochromatic hue relationship and a strong light-to-dark ladder (99% down to 35% lightness). A natural fit for websites, presentations and branding.
- Background: White (#F8FFFB) is the lightest color, so it belongs on large surfaces.
- Text: Umber (#5E5C57) on #F8FFFB gives 6.58:1, passing WCAG AA.
- Primary: Seafoam (#9BECC3) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Gray (#608A70) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is White on Umber at 6.58:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Seafoam & Gray Breeze
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
#F8FFFB
#9BECC3
#608A70
#5E5C57
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#F8FFFB on #5E5C57 | Aa | 6.58:1 | AA |
#9BECC3 on #5E5C57 | Aa | 4.83:1 | AA |
#F8FFFB on #608A70 | Aa | 3.85:1 | AA large only |
#9BECC3 on #608A70 | Aa | 2.83:1 | Fail |
#608A70 on #5E5C57 | Aa | 1.71:1 | Fail |
#F8FFFB on #9BECC3 | Aa | 1.36:1 | Fail |
Similar palettes 24 more in this mood
#9E9B8A
#C39F63
#ADE0C7
#FFEBE6
#F5FBF9
#D4E3DE
#374B00
#0A1100
#EDEFFF
#ADE0C7
#C39F63
#464334
#E3FCF0
#B8DBB4
#89967B
#4D4C46
#A47864
#C9A58B
#E8D9CB
#F7F3EE
#3C5148
#7A9B76
#C8D5B9
#F6F5EE
#3E2723
#6D4C41
#A1887F
#EFEBE9
#006D77
#83C5BE
#EDF6F9
#FFDDD2
#7D6E5D
#B9A990
#E7DFD3
#F9F7F3
#5D4037
#8D6E63
#BCAAA4
#EFEBE9
#4B3832
#854442
#BE9B7B
#FFF4E6
#5B7B6C
#8AA399
#C4D3CC
#EEF3F0
#EAF7EF
#BFE8D2
#F9E1C4
#4A6B5A
#FFF4F6
#FFC9D6
#FFE7A8
#7A5C6B
#F7F7EC
#D6E4B8
#A9C48A
#3F5233
#F7FBFF
#D5E2ED
#ADCAE3
#2C4A66
#5F6B3B
#8C9A5B
#D6C9A8
#F5F0E6
#5E8B86
#A7C4BC
#D9A87E
#F6F0E6
#2F5D3A
#5E8F5E
#A9C99A
#EEF4E8
#688E79
#83B9C6
#B7D3A5
#D0D1D0
#9E6B73
#C99CA2
#E9D5D3
#F7F2EF
#5B4B5E
#8A7A8C
#C9BEC6
#F2EEF0
#924A43
#5C6049
#D5D2BF
#F5F3ED