earthyretro
Moss & Stone Color Palette
Moss & Stone is a earthy and retro color palette of 5 colors: Charcoal (#3d405b), Dark Sea Green (#81b29a), Apricot (#f2cc8f), Terracotta (#e07a5f) and Beige (#f4f1de). Its dominant hue is red.
The darkest color, Charcoal, on the lightest, Beige, gives a 8.87:1 contrast ratio — enough for body text at WCAG AAA. 2 pairs in this palette pass AA for normal text. Terracotta (#e07a5f) is its most saturated color and a natural choice for buttons and links.
Colors
- Charcoal
- Dark Sea Green
- Apricot
- Terracotta
- Beige
CSS Output
:root {
--moss-stone-1: #3d405b;
--moss-stone-2: #81b29a;
--moss-stone-3: #f2cc8f;
--moss-stone-4: #e07a5f;
--moss-stone-5: #f4f1de;
}Moss & Stone 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.
- Charcoal on Beige#3d405b on #f4f1de8.87:1AAA
- Charcoal on Apricot#3d405b on #f2cc8f6.62:1AA
- Charcoal on Dark Sea Green#3d405b on #81b29a4.20:1AA Large
- Charcoal on Terracotta#3d405b on #e07a5f3.41:1AA Large