coolearthymonochrome
Sage & Linen Color Palette
Sage & Linen is a cool, earthy and monochrome color palette of 5 colors: Light Gray (#cad2c5), Dark Sea Green (#84a98c), Teal (#52796f), Dark Slate Gray (#354f52) and Onyx (#2f3e46). Its dominant hue is green.
The darkest color, Onyx, on the lightest, Light Gray, gives a 7.13:1 contrast ratio — enough for body text at WCAG AAA. 2 pairs in this palette pass AA for normal text. Dark Sea Green (#84a98c) is its most saturated color and a natural choice for buttons and links.
Colors
- Light Gray
- Dark Sea Green
- Teal
- Dark Slate Gray
- Onyx
CSS Output
:root {
--sage-linen-1: #cad2c5;
--sage-linen-2: #84a98c;
--sage-linen-3: #52796f;
--sage-linen-4: #354f52;
--sage-linen-5: #2f3e46;
}Sage & Linen on a Website
A quick preview on a landing page: the most colorful colors become the primary and accent, a light one the surface. For a more realistic look across many designs, open it in the Palette Visualizer below.
See it on real designs
This is a single preview. The Palette Visualizer shows the palette on 11 designs — dashboards, mobile apps, pricing and blog pages, posters and business cards — lets you change which color plays which role, switch to dark mode and check contrast.
Accessible Color Combinations
Pairs from this palette that work as text on a background, with their WCAG contrast ratio. AA needs 4.5:1 for body text; large text needs 3:1.
- Onyx on Light Gray#2f3e46 on #cad2c57.13:1AAA
- Dark Slate Gray on Light Gray#354f52 on #cad2c55.65:1AA
- Onyx on Dark Sea Green#2f3e46 on #84a98c4.23:1AA Large
- Dark Slate Gray on Dark Sea Green#354f52 on #84a98c3.35:1AA Large
- Teal on Light Gray#52796f on #cad2c53.13:1AA Large