Oatmeal color palette
Toasted brown on oatmeal. Minimal but warm, softer than a pure black-and-white scheme.
Best for: Lifestyle, coffee, natural products
- Background
#f6f2ea - Surface
#ebe4d8 - Text
#2b2621 - Accent
#8a6a4a - Muted text
#6f665c
Oatmeal on a real website
Colorit's example site restyled with this palette. Balanced keeps surfaces close to the background; Expressive tints cards and sections with the accent. Your own site looks different: capture it to see.
Readable by design
Colorit turns the five colors into a full theme and checks each text pair. Ratios of 4.5:1 and above meet WCAG AA for body text.
| Pair | Contrast |
|---|---|
| Text on background | 13.4:1 |
| Muted text on background | 5.0:1 |
| Button text on accent | 5.0:1 |
| Text on cards | 14.0:1 |
Use the Oatmeal palette in code
The five colors as CSS variables and as a Tailwind v4 theme. For the full semantic theme (surfaces, borders, button states) as shadcn/ui, Tailwind or CSS, open it in the free theme generator. A prompt for your coding tool, made for your own captured site, comes with Colorit Pro.
:root {
--color-1: #f6f2ea;
--color-2: #ebe4d8;
--color-3: #2b2621;
--color-4: #8a6a4a;
--color-5: #6f665c;
}
@theme {
--color-1: #f6f2ea;
--color-2: #ebe4d8;
--color-3: #2b2621;
--color-4: #8a6a4a;
--color-5: #6f665c;
}