Palette #5DD3B6 #6E5034 #CDB885 #EFE1B5

Curated four-color harmony tagged under mint, brown, teal, orange, peach, beige, cream. Free for personal and commercial digital design projects.

#5DD3B6 (41%)
#6E5034 (26%)
#CDB885 (18%)
#EFE1B5 (15%)

Palette Specifications & Color Values

Swatch HEX RGB Luminance Recommended Role
#5DD3B6 rgb(93, 211, 182) 0.523 41% Base Canvas / Background
#6E5034 rgb(110, 80, 52) 0.093 26% Surface / Card Container
#CDB885 rgb(205, 184, 133) 0.49 18% Muted Element / Borders
#EFE1B5 rgb(239, 225, 181) 0.755 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 (#5DD3B6) and Focal Accent (#EFE1B5) is 1.4:1, scoring Low Contrast (< 3:1) under W3C WCAG 2.1 specifications. Additionally, the contrast between Surface (#6E5034) and Accent (#EFE1B5) measures 5.6:1 (WCAG AA 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: #5DD3B6;
  --color-surface: #6E5034;
  --color-border: #CDB885;
  --color-accent: #EFE1B5;
}