Palette #253C6D #30497D #455B8A #F2842F

Curated four-color harmony tagged under retro, wedding, orange, blue, dark, peach. Free for personal and commercial digital design projects.

#253C6D (41%)
#30497D (26%)
#455B8A (18%)
#F2842F (15%)

Palette Specifications & Color Values

Swatch HEX RGB Luminance Recommended Role
#253C6D rgb(37, 60, 109) 0.047 41% Base Canvas / Background
#30497D rgb(48, 73, 125) 0.069 26% Surface / Card Container
#455B8A rgb(69, 91, 138) 0.106 18% Muted Element / Borders
#F2842F rgb(242, 132, 47) 0.356 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 (#253C6D) and Focal Accent (#F2842F) is 4.2:1, scoring WCAG AA Large Pass under W3C WCAG 2.1 specifications. Additionally, the contrast between Surface (#30497D) and Accent (#F2842F) measures 3.4:1 (WCAG AA Large 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: #253C6D;
  --color-surface: #30497D;
  --color-border: #455B8A;
  --color-accent: #F2842F;
}