Sage & Rust Color Psychology & Meaning
Sage and rust is the palette of handmade ceramics — these muted greens and terracottas are the colors of clay before and after firing, of the studio where things are made slowly.
#C8D8B8
#8B9878
#C86040
#6B3020
Background
Primary Accent
Secondary
Body Text
Sage & Rust
earthybalancednatural autumnspring interiorbrandingwellness
AA
WCAG Grade
6.8:1
Contrast Ratio
2,200
Saves
5,800
AI Copies
Use #C8D8B8 as the background. Use #8B9878 as the primary accent. Use #C86040 as secondary. Use #6B3020 as body text/supporting color. Palette mood: Sage & Rust — earthy, balanced, natural.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Sage & Rust color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 64.9% | 200, 216, 184 | 7%, 0%, 15%, 15% | 90°, 29%, 78% | ||
| Primary Accent Luminance: 29.3% | 139, 152, 120 | 9%, 0%, 21%, 40% | 84°, 13%, 53% | ||
| Secondary Luminance: 21.0% | 200, 96, 64 | 0%, 52%, 68%, 22% | 14°, 55%, 52% | ||
| Body Text Luminance: 5.3% | 107, 48, 32 | 0%, 55%, 70%, 58% | 13°, 54%, 27% |
Color Harmony: Custom Scheme
The Sage & Rust palette is built using a custom relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A custom palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Sage and rust emerged as a dominant interior design palette in the 2020s, associated with the slow living movement, artisan goods, and the rejection of all-white minimalism.
Best Design Use Cases
Soft sage for the dominant background. Muted darker sage for secondary surfaces. Rust-orange for accent and interactive elements. Dark rust for text.
Industries This Palette Suits
Interior design, ceramics and craft brands, artisan goods, wellness, organic products.
How to Implement the Sage & Rust Color Scheme
To use this Sage & Rust color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #C8D8B8 for the main background and #8B9878 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #6B3020 and #C8D8B8 is 6.75:1 (AA). Ensure your body text remains legible.