CSS variables
:root {
--c-earthy-1: #291E16;
--c-earthy-2: #403531;
--c-earthy-3: #473C36;
--c-earthy-4: #D9C1B4;
--c-earthy-5: #F0E0D6;
--c-earthy-6: #D9AC84;
--c-earthy-7: #8C593B;
--c-earthy-8: #702F3E;
}
About this palette
This 8-color earthy palette runs from Ginger Cream (#F0E0D6) as its lightest tone to Tetsu-Guro Black (#291E16) as its darkest. It blends Tetsu-Guro Black, Bloodstone, Delicioso, Regal, Ginger Cream, Porcini, Brushwood and Chestnut Red into a single set you can drop straight into a UI. Of its 28 color pairings, 13 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #291E16 on #F0E0D6 at 12.65:1.
Grounded, natural tones — suits sustainability/organic brands, coffee shops, outdoor gear, and warm editorial typography.
Color breakdown
Contrast & accessibility
13 of 28 color pairings meet the WCAG AA contrast threshold (4.5:1) for body text.