ColorPaletteXYZ Logo
ColorPaletteXYZ
Palettes/Modern

Future Dawn

modern palette with a balanced five-color hierarchy for design use.

#Modern#Clean#UI
Open in Generator
COLOR 1
#145472
Ai Japanese Indigo
COLOR 2
#277CC4
Polaroid Film Cyan
COLOR 3
#6681D6
Cornflower Blue
COLOR 4
#F9F8F6
White Smoke
COLOR 5
#21334D
Dark Blueberry

Color Values & Codes

HEX · RGB · HSL
rgb(20, 84, 114)hsl(199, 70%, 26%)Color details →
rgb(39, 124, 196)hsl(208, 67%, 46%)Color details →
rgb(102, 129, 214)hsl(226, 58%, 62%)Color details →
rgb(249, 248, 246)hsl(40, 20%, 97%)Color details →
rgb(33, 51, 77)hsl(215, 40%, 22%)Color details →

Open In Design Tools

Palette Generator
Lock & shuffle colors
Contrast Checker
Test WCAG compliance
Shades & Tints
Generate tonal steps
Modern Palettes
Explore category schemes

CSS Variables

Copy & paste directly into your stylesheet
:root {
  --color-1: #145472;
  --color-2: #277CC4;
  --color-3: #6681D6;
  --color-4: #F9F8F6;
  --color-5: #21334D;
}

Role-Based WCAG Contrast Audit

Accessibility contrast depends on assigned UI roles. Here are the contrast ratios and WCAG compliance ratings when pairing palette colors as Foreground Text against Background surfaces:

Sample Text
#145472 on #F9F8F67.79:1
Normal Text AA Pass
Sample Text
#145472 on #21334D1.54:1
Large Text Only (Fail)
Sample Text
#277CC4 on #F9F8F64.15:1
Large Text Only (Pass)
Sample Text
#277CC4 on #21334D2.90:1
Large Text Only (Fail)
Sample Text
#6681D6 on #F9F8F63.49:1
Large Text Only (Pass)
Sample Text
#6681D6 on #21334D3.45:1
Large Text Only (Pass)

Related Palettes in Modern

Explore Modern
#0F172ACopy
#1E293BCopy
#2563EBCopy
#38BDF8Copy
#F8FAFCCopy
cp-featured-01Technology
SaaS Velocity Blue
TechModernCool
#314E35Copy
#588157Copy
#A3B18ACopy
#FFE6A7Copy
#DDA15ECopy
cp-featured-18Food
Matcha Yuzu Delight
FoodCleanFresh
#FAFAFACopy
#E4E4E7Copy
#71717ACopy
#3F3F46Copy
#18181BCopy
cp-featured-22Minimal
Nordic Monolith
MinimalCleanModern
#4BE2D7Copy
#4AE8DDCopy
#329F98Copy
#6DD5CECopy
#85F4EDCopy
cp-featured-27Aesthetic
Nordic Turquoise Mirage
AestheticCleanOcean