Rust & Cream color palette
Rust #B7410E and burnt orange #CD6600 are the strong colors, softened by terracotta peach, a pale apricot and an almost-white cream, #FEF9F0. It has the warmth of fall without any browns, so it stays light and airy. Cream gives you a ready background and rust is dark enough for text. It works best for fashion boutiques and coffee shops in autumn.
Rust & Cream palette in use
Use #FEF9F0 as the background and #B7410E for text and headings. #CD6600 suits buttons, and #F5CBA7 and #E8956D work for cards, tags and illustrations.
This pair measures 5.30:1, so it works for body text too. The button uses #CD6600 with black text.
ButtonGood for
- Autumn fashion lookbook
- Ceramics shop website
- Coffee shop branding
- Recipe newsletter
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 |
|---|---|---|---|
#B7410E | #FEF9F0 | 5.30:1 | AA |
#B7410E | #F5CBA7 | 3.70:1 | AA large |
#CD6600 | #FEF9F0 | 3.64:1 | AA large |
Rust & Cream palette as code
CSS variables
:root {
--rust-and-cream-1: #B7410E;
--rust-and-cream-2: #CD6600;
--rust-and-cream-3: #E8956D;
--rust-and-cream-4: #F5CBA7;
--rust-and-cream-5: #FEF9F0;
}Tailwind v4
@theme {
--color-rust-and-cream-1: #B7410E;
--color-rust-and-cream-2: #CD6600;
--color-rust-and-cream-3: #E8956D;
--color-rust-and-cream-4: #F5CBA7;
--color-rust-and-cream-5: #FEF9F0;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'rust-and-cream': {
100: '#B7410E',
200: '#CD6600',
300: '#E8956D',
400: '#F5CBA7',
500: '#FEF9F0',
},SCSS
$rust-and-cream-1: #B7410E;
$rust-and-cream-2: #CD6600;
$rust-and-cream-3: #E8956D;
$rust-and-cream-4: #F5CBA7;
$rust-and-cream-5: #FEF9F0;JSON
["#B7410E","#CD6600","#E8956D","#F5CBA7","#FEF9F0"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.