Wabi-Sabi
Use #F5EBD8 as the background. Use #D4B88A as the primary accent. Use #9A7A50 as secondary. Use #4A3318 as body text/supporting color. Palette mood: Wabi-Sabi — warm, imperfect, contemplative.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Wabi-Sabi 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: 83.8% | 245, 235, 216 | 0%, 4%, 12%, 4% | 39°, 59%, 90% | ||
| Primary Accent Luminance: 50.1% | 212, 184, 138 | 0%, 13%, 35%, 17% | 37°, 46%, 69% | ||
| Secondary Luminance: 21.4% | 154, 122, 80 | 0%, 21%, 48%, 40% | 34°, 32%, 46% | ||
| Body Text Luminance: 3.9% | 74, 51, 24 | 0%, 31%, 68%, 71% | 32°, 51%, 19% |
Color Harmony: Analogous Scheme
The Wabi-Sabi palette is built using a analogous relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
A analogous palette is often preferred by professional designers because it creates a calm, serene atmosphere by using neighboring colors.
History & Design Context
Best Design Use Cases
Industries This Palette Suits
How to Implement the Wabi-Sabi Color Scheme
To use this Wabi-Sabi 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 #F5EBD8 for the main background and #D4B88A for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #4A3318 and #F5EBD8 is 9.99:1 (AAA). Ensure your body text remains legible.