#A47864
#C9A58B
#E8D9CB
#F7F3EE
#F7F9F5Smoke
#D9E0D5Bone
#C4D3C0Fog
#5E6E5BDove Gray
Pale Sage Light is a muted light, neutral-based color palette tagged muted, white, gray. Smoke 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 |
|---|---|---|---|---|---|
| Smoke | #F7F9F5 | rgb(247, 249, 245) | hsl(90, 25%, 97%) | oklch(97.9% 0.006 129) | |
| Bone | #D9E0D5 | rgb(217, 224, 213) | hsl(98, 15%, 86%) | oklch(89.8% 0.017 134) | |
| Fog | #C4D3C0 | rgb(196, 211, 192) | hsl(107, 18%, 79%) | oklch(85.0% 0.031 139) | |
| Dove Gray | #5E6E5B | rgb(94, 110, 91) | hsl(111, 9%, 39%) | oklch(51.9% 0.035 141) |
Why it works and how to use it
It works because the lightness range is wide (39% to 97%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Smoke (#F7F9F5) is the lightest color, so it belongs on large surfaces.
- Text: Dove Gray (#5E6E5B) on #F7F9F5 gives 5.14:1, passing WCAG AA.
- Primary: Fog (#C4D3C0) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Bone (#D9E0D5) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Smoke on Dove Gray at 5.14:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Pale Sage Light
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
#F7F9F5
#D9E0D5
#C4D3C0
#5E6E5B
Color-blind check: under deuteranopia, Smoke and Bone 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 |
|---|---|---|---|
#F7F9F5 on #5E6E5B | Aa | 5.14:1 | AA |
#D9E0D5 on #5E6E5B | Aa | 4.04:1 | AA large only |
#C4D3C0 on #5E6E5B | Aa | 3.48:1 | AA large only |
#F7F9F5 on #C4D3C0 | Aa | 1.48:1 | Fail |
#F7F9F5 on #D9E0D5 | Aa | 1.27:1 | Fail |
#D9E0D5 on #C4D3C0 | Aa | 1.16:1 | Fail |
Similar palettes 24 more in this mood
#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
#F7FBFF
#D5E2ED
#ADCAE3
#2C4A66
#5E8B86
#A7C4BC
#D9A87E
#F6F0E6
#9E6B73
#C99CA2
#E9D5D3
#F7F2EF
#5B4B5E
#8A7A8C
#C9BEC6
#F2EEF0
#924A43
#5C6049
#D5D2BF
#F5F3ED
#FFE9DF
#D29E75
#AAB891
#807B73
#2C3A2F
#5B7553
#B7C4A8
#F3F1EA
#64557C
#8B83A7
#C4BCCF
#F2EFF5
#452700
#686265
#FFB9A3
#FFEAEC
#C1D7C4
#BBF0F9
#E5F1BF
#F0FBF8
#342037
#725071
#A17698
#F0EAF0
#F6F3EC
#DCE3D5
#9CAF88
#5B6B54
#FBF6F0
#F3DCD4
#E8B4B8
#B8A184
#F7F7F4
#D9E0E6
#8FA8BF
#5A6B7B