ColorPaletteXYZ Logo
ColorPaletteXYZ
Palettes/App UI

Productivity Violet Focus

Calm indigo and violet productivity workspace palette designed to reduce eye strain during deep work sprints.

#App UI#Modern#UI#Clean#Creative
Open in Generator
COLOR 1
#0F172A
Slate 900
COLOR 2
#312E81
Dark Slate Blue
COLOR 3
#6366F1
Medium Slate Blue
COLOR 4
#A5B4FC
Hydrangea Blue
COLOR 5
#EEF2FF
Magnolia White

Color Values & Codes

HEX · RGB · HSL
Slate 900
#0F172A
rgb(15, 23, 42)hsl(222, 47%, 11%)Color details →
rgb(49, 46, 129)hsl(242, 47%, 34%)Color details →
rgb(99, 102, 241)hsl(239, 84%, 67%)Color details →
rgb(165, 180, 252)hsl(230, 94%, 82%)Color details →
rgb(238, 242, 255)hsl(226, 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: #0F172A;
  --color-2: #312E81;
  --color-3: #6366F1;
  --color-4: #A5B4FC;
  --color-5: #EEF2FF;
}

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
#0F172A on #A5B4FC8.96:1
Normal Text AA Pass
Sample Text
#0F172A on #EEF2FF15.97:1
Normal Text AA Pass
Sample Text
#312E81 on #A5B4FC5.73:1
Normal Text AA Pass
Sample Text
#312E81 on #EEF2FF10.22:1
Normal Text AA Pass
Sample Text
#6366F1 on #A5B4FC2.24:1
Large Text Only (Fail)
Sample Text
#6366F1 on #EEF2FF3.99:1
Large Text Only (Pass)

Related Palettes in App UI

Explore App UI
#0F172ACopy
#1E293BCopy
#2563EBCopy
#38BDF8Copy
#F8FAFCCopy
cp-featured-01Technology
SaaS Velocity Blue
TechModernCool
#2B0938Copy
#6A0572Copy
#AB2E64Copy
#D85A52Copy
#F9A03FCopy
cp-featured-02Sunset
Malibu Dusk Glow
SunsetGradientCreative
#180F33Copy
#491F79Copy
#7C3AEDCopy
#A78BFACopy
#F5F3FFCopy
cp-featured-05App UI
Fluid iOS Violet
App UICreative
#FFFFFFCopy
#F4F4F5Copy
#A1A1AACopy
#27272ACopy
#E11D48Copy
cp-featured-07Minimal
Swiss Editorial Clean
MinimalCreativeBold