Prairie color palette
Tall grass in late summer and the dirt road through it. Wheat gold #D4A96A and straw #C49A4A are the fields, and three browns, from weathered taupe #8B7355 to dark earth #4A3728, are the fences and soil. The set is warm and dusty, with nothing bright. Ranches and Western wear shops can build a whole look on it.
Prairie palette in use
Use a cream page or #D4A96A panels with #4A3728 for text. #6B5B45 suits buttons and footers, #8B7355 borders and secondary text, and #C49A4A icons and highlights.
This pair measures 5.18:1, so it works for body text too. The button uses #C49A4A with black text.
ButtonGood for
- Ranch website
- Western wear shop
- Country music venue
- Rural tourism brochure
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#4A3728 | #D4A96A | 5.18:1 | AA |
#4A3728 | #C49A4A | 4.31:1 | AA large |
#6B5B45 | #D4A96A | 3.01:1 | AA large |
Prairie palette as code
CSS variables
:root {
--prairie-1: #D4A96A;
--prairie-2: #C49A4A;
--prairie-3: #8B7355;
--prairie-4: #6B5B45;
--prairie-5: #4A3728;
}Tailwind v4
@theme {
--color-prairie-1: #D4A96A;
--color-prairie-2: #C49A4A;
--color-prairie-3: #8B7355;
--color-prairie-4: #6B5B45;
--color-prairie-5: #4A3728;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'prairie': {
100: '#D4A96A',
200: '#C49A4A',
300: '#8B7355',
400: '#6B5B45',
500: '#4A3728',
},SCSS
$prairie-1: #D4A96A;
$prairie-2: #C49A4A;
$prairie-3: #8B7355;
$prairie-4: #6B5B45;
$prairie-5: #4A3728;JSON
["#D4A96A","#C49A4A","#8B7355","#6B5B45","#4A3728"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.