#F1EFE7
#D9D4C7
#8C8A82
#2F2F2F
#7E9A8BPewter
#B7C9BCSilver
#D2DDD4Bone
#F4F2EALinen
Sage & Cloud color palette
Sage & Cloud is a muted light, neutral-based color palette tagged 2026 trends, gray, white. Linen 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 |
|---|---|---|---|---|---|
| Pewter | #7E9A8B | rgb(126, 154, 139) | hsl(148, 12%, 55%) | oklch(66.0% 0.038 162) | |
| Silver | #B7C9BC | rgb(183, 201, 188) | hsl(137, 14%, 75%) | oklch(81.8% 0.027 154) | |
| Bone | #D2DDD4 | rgb(210, 221, 212) | hsl(131, 14%, 85%) | oklch(88.7% 0.017 151) | |
| Linen | #F4F2EA | rgb(244, 242, 234) | hsl(48, 31%, 94%) | oklch(96.0% 0.011 95) |
Why it works and how to use it
Two of the four colors are near-neutral, which leaves room for Silver to lead. Lightness runs from 55% to 94%. Well suited to websites, presentations and branding.
- Background: Linen (#F4F2EA) is the lightest color, so it belongs on large surfaces.
- Text: Pewter (#7E9A8B) on #F4F2EA gives 2.72:1, so pair it with a darker neutral for body copy.
- Primary: Silver (#B7C9BC) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Bone (#D2DDD4) 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 Sage & Cloud
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
#7E9A8B
#B7C9BC
#D2DDD4
#F4F2EA
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#7E9A8B on #F4F2EA | Aa | 2.72:1 | Fail |
#7E9A8B on #D2DDD4 | Aa | 2.18:1 | Fail |
#7E9A8B on #B7C9BC | Aa | 1.76:1 | Fail |
#B7C9BC on #F4F2EA | Aa | 1.55:1 | Fail |
#D2DDD4 on #F4F2EA | Aa | 1.25:1 | Fail |
#B7C9BC on #D2DDD4 | Aa | 1.24:1 | Fail |
Similar palettes 24 more in this mood
#A47864
#C9A58B
#E8D9CB
#F7F3EE
#1E1B18
#6B5D4F
#C9B79C
#F4EFE6
#7D93A8
#B3C3D1
#E3E9EE
#FBF8F3
#2B2A28
#8D8780
#D8D2C8
#F5F2ED
#2C2230
#836D8A
#FFC872
#F4EDF6
#F3F5F4
#AD6FDD
#4E5A58
#0F1212
#0C0F0E
#3E4542
#CDED95
#F6FDEC
#F1EFE7
#DAD7CD
#0F6E6B
#2B2B2B
#373A39
#6F7774
#DAFE9C
#EBF2DF
#92433E
#F1EDE9
#D1C4B9
#1A1A1A
#92433E
#BF6664
#F3EBEB
#1D1D1D
#363330
#7F7163
#E0CDB2
#FFF9F0
#964300
#D35A00
#F8E9E9
#1D1D1D
#0F5C63
#2A8A8C
#9FD3CF
#F2F1EA
#FFF1B8
#F5D67A
#8A7F63
#3B3A36
#B3001B
#E63946
#F8E9E9
#1D1D1D
#1B6F73
#E07A5F
#F2CC8F
#F4F1DE
#D9A48F
#EFC8B8
#F7E6DC
#FFFAF6
#266C81
#D7843C
#DED590
#F4F1DE
#0B0F0E
#3A4642
#BEF62F
#F3FFE0
#456A6B
#C38B7B
#E4CFAF
#F2F1E6
#0E3B4A
#1F7A8C
#8FD5D2
#EAF7F5
#D6373A
#FFF9F2
#EED7C1
#2D2D2D