Palette #FFF2D8 #EAD7BB #BCA37F #113946

Curated four-color harmony tagged under coffee, white, light, peach, beige, pastel, orange, teal, mint, dark. Free for personal and commercial digital design projects.

#FFF2D8 (41%)
#EAD7BB (26%)
#BCA37F (18%)
#113946 (15%)

Palette Specifications & Color Values

Swatch HEX RGB Luminance Recommended Role
#FFF2D8 rgb(255, 242, 216) 0.897 41% Base Canvas / Background
#EAD7BB rgb(234, 215, 187) 0.697 26% Surface / Card Container
#BCA37F rgb(188, 163, 127) 0.384 18% Muted Element / Borders
#113946 rgb(17, 57, 70) 0.035 15% Focal Accent / Call to Action

Color Theory & Mood Analysis

This color collection radiates a balanced synergy of warm and cool tones, making it ideal for digital product interfaces, modern SaaS web applications, mobile user interfaces, brand style guides, and graphic illustrations. Following classical four-tier visual weight balance, the dominant primary tone establishes an expansive ground surface, the secondary hue defines cards and panels, the structural third color bounds elements cleanly, and the high-contrast accent directs user attention to interactive elements.

WCAG 2.1 Accessibility & Contrast Validation

Ensuring accessible contrast is vital for inclusive design. The linearized contrast ratio between Base Canvas (#FFF2D8) and Focal Accent (#113946) is 11.2:1, scoring WCAG AAA Pass under W3C WCAG 2.1 specifications. Additionally, the contrast between Surface (#EAD7BB) and Accent (#113946) measures 8.8:1 (WCAG AAA Pass). These metrics provide designers with mathematical certainty for legible typography and interactive accessibility.

Developer Tokens & Integration

Integrate this palette directly into your frontend build pipeline:

:root {
  --color-canvas: #FFF2D8;
  --color-surface: #EAD7BB;
  --color-border: #BCA37F;
  --color-accent: #113946;
}