ColorPaletteXYZ Logo
ColorPaletteXYZ
Palettes/App UI

Weather Atmospheric Sky

Dynamic meteorological forecast interface scheme with multi-tier sky blue shades for radar maps and cards.

#App UI#Ocean#UI#Fresh#Clean
Open in Generator
COLOR 1
#1E3A8A
Dark Slate Blue
COLOR 2
#2563EB
Brand Blue
COLOR 3
#60A5FA
Blue Topaz
COLOR 4
#93C5FD
Light Sky Blue
COLOR 5
#EFF6FF
Alice Blue

Color Values & Codes

HEX · RGB · HSL
rgb(30, 58, 138)hsl(224, 64%, 33%)Color details →
Brand Blue
#2563EB
rgb(37, 99, 235)hsl(221, 83%, 53%)Color details →
Blue Topaz
#60A5FA
rgb(96, 165, 250)hsl(213, 94%, 68%)Color details →
rgb(147, 197, 253)hsl(212, 96%, 78%)Color details →
Alice Blue
#EFF6FF
rgb(239, 246, 255)hsl(214, 100%, 97%)Color details →

Open In Design Tools

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

CSS Variables

Copy & paste directly into your stylesheet
:root {
  --color-1: #1E3A8A;
  --color-2: #2563EB;
  --color-3: #60A5FA;
  --color-4: #93C5FD;
  --color-5: #EFF6FF;
}

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
#1E3A8A on #93C5FD5.74:1
Normal Text AA Pass
Sample Text
#1E3A8A on #EFF6FF9.52:1
Normal Text AA Pass
Sample Text
#2563EB on #93C5FD2.87:1
Large Text Only (Fail)
Sample Text
#2563EB on #EFF6FF4.75:1
Normal Text AA Pass
Sample Text
#60A5FA on #93C5FD1.41:1
Large Text Only (Fail)
Sample Text
#60A5FA on #EFF6FF2.34:1
Large Text Only (Fail)

Related Palettes in App UI

Explore App UI
#0F172ACopy
#1E293BCopy
#2563EBCopy
#38BDF8Copy
#F8FAFCCopy
cp-featured-01Technology
SaaS Velocity Blue
TechModernCool
#180F33Copy
#491F79Copy
#7C3AEDCopy
#A78BFACopy
#F5F3FFCopy
cp-featured-05App UI
Fluid iOS Violet
App UICreative
#020B14Copy
#06283DCopy
#1363DFCopy
#47B5FFCopy
#DFF6FFCopy
cp-featured-08Ocean
Marianas Deep Sea
OceanCool
#005F73Copy
#0A9396Copy
#94D2BDCopy
#E9D8A6Copy
#EE9B00Copy
cp-featured-13Ocean
Caribbean Reef Shallows
OceanFresh