#222831
#575D65
#00ADB5
#EEEEEE
#627D6FDove Gray
#99AB9ESage
#B8C3BAAsh
#DBD9D1Bone
New Season Dove Gray & Sage is a muted neutral-based color palette tagged modern, gray. Dove Gray is the only saturated color here, so it does all the talking against a neutral base. Every color is softened, so it works well as a background system for text-heavy layouts.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Dove Gray | #627D6F | rgb(98, 125, 111) | hsl(149, 12%, 44%) | oklch(56.4% 0.038 162) | |
| Sage | #99AB9E | rgb(153, 171, 158) | hsl(137, 10%, 64%) | oklch(72.3% 0.027 154) | |
| Ash | #B8C3BA | rgb(184, 195, 186) | hsl(131, 8%, 74%) | oklch(80.6% 0.017 151) | |
| Bone | #DBD9D1 | rgb(219, 217, 209) | hsl(48, 12%, 84%) | oklch(88.5% 0.011 95) |
Why it works and how to use it
The palette holds together thanks to its neutral backbone and a soft light-to-dark ladder (84% down to 44% lightness). A natural fit for websites, presentations and branding.
- Background: Bone (#DBD9D1) is the lightest color, so it belongs on large surfaces.
- Text: Dove Gray (#627D6F) on #DBD9D1 gives 3.17:1, enough for large headings only.
- Primary: Sage (#99AB9E) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Ash (#B8C3BA) 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 New Season Dove Gray & Sage
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
#627D6F
#99AB9E
#B8C3BA
#DBD9D1
Color-blind check: under protanopia, Sage and Ash 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 |
|---|---|---|---|
#627D6F on #DBD9D1 | Aa | 3.17:1 | AA large only |
#627D6F on #B8C3BA | Aa | 2.47:1 | Fail |
#627D6F on #99AB9E | Aa | 1.85:1 | Fail |
#99AB9E on #DBD9D1 | Aa | 1.71:1 | Fail |
#99AB9E on #B8C3BA | Aa | 1.33:1 | Fail |
#B8C3BA on #DBD9D1 | Aa | 1.29:1 | Fail |
Similar palettes 24 more in this mood
#5C8D89
#A7D7C5
#F4F9F4
#F2C57C
#495057
#868E96
#CED4DA
#F1F3F5
#2B2D42
#8D99AE
#EDF2F4
#EF233C
#111111
#424242
#FF3B3B
#FAFAFA
#1A1A1D
#4C4C54
#E8788A
#F4F4F6
#FFFDFC
#EDE0DB
#FF6F61
#1F2933
#FFFFFF
#E4E4E3
#F59E0B
#1C1917
#FFF7F9
#EED8E0
#E11D74
#2B1720
#EDEEF0
#C9CCD1
#1D4ED8
#0B1220
#F7F3EF
#E9DED4
#C65D3B
#2E2622
#FAFAF8
#D9D9D4
#E3B505
#1E1E1C
#F7F8F5
#DDE4D8
#7B9E82
#26302A
#0A1A1E
#648691
#EED200
#D8E2E5
#D2C4D5
#A99EB0
#817386
#413944
#FFF8F0
#FFD2CB
#FF819E
#1B3240
#211525
#634665
#886B91
#E0E1DD
#924A43
#5C6049
#D5D2BF
#F5F3ED
#DDDEE2
#00C463
#676C7C
#17191F
#3A4750
#6E7F8A
#B8C4CB
#3CFFEA
#3D272C
#9B7981
#AC9498
#E4C8CE
#EFE0D3
#AEA397
#786C5E
#625548
#ECE7E4
#00A0AE
#5F4F44
#302823
#EEABE1
#BFBAC2
#8784AB
#A96C82