Palette #E3F2FD #90CAF9 #2196F3 #0D47A1

Curated four-color harmony tagged under cold, gradient, sky, blue, white, light. Free for personal and commercial digital design projects.

#E3F2FD (41%)

#90CAF9 (26%)

#2196F3 (18%)

#0D47A1 (15%)

Palette Specifications & Color Values

HEX	RGB	Luminance	Recommended Role
#E3F2FD	rgb(227, 242, 253)	0.869	41% Base Canvas / Background
#90CAF9	rgb(144, 202, 249)	0.55	26% Surface / Card Container
#2196F3	rgb(33, 150, 243)	0.286	18% Muted Element / Borders
#0D47A1	rgb(13, 71, 161)	0.072	15% Focal Accent / Call to Action

Color Theory & Mood Analysis

This color collection radiates a serene, clean, and tranquil ambiance, 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 (#E3F2FD) and Focal Accent (#0D47A1) is 7.6:1, scoring WCAG AAA Pass under W3C WCAG 2.1 specifications. Additionally, the contrast between Surface (#90CAF9) and Accent (#0D47A1) measures 4.9: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: #E3F2FD;
  --color-surface: #90CAF9;
  --color-border: #2196F3;
  --color-accent: #0D47A1;
}