ColorPaletteXYZ Logo
ColorPaletteXYZ
Palettes/Modern

Urban Light

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

#Modern#Clean#UI
Open in Generator
COLOR 1
#71165D
Boysenberry
COLOR 2
#D11B91
Medium Violet Red
COLOR 3
#D5688E
Pale Violet Red
COLOR 4
#F6F9F8
White Smoke
COLOR 5
#4C2238
Victorian Plum

Color Values & Codes

HEX · RGB · HSL
rgb(113, 22, 93)hsl(313, 67%, 26%)Color details →
rgb(209, 27, 145)hsl(321, 77%, 46%)Color details →
rgb(213, 104, 142)hsl(339, 56%, 62%)Color details →
rgb(246, 249, 248)hsl(160, 20%, 97%)Color details →
rgb(76, 34, 56)hsl(329, 38%, 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: #71165D;
  --color-2: #D11B91;
  --color-3: #D5688E;
  --color-4: #F6F9F8;
  --color-5: #4C2238;
}

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
#71165D on #F6F9F810.04:1
Normal Text AA Pass
Sample Text
#71165D on #4C22381.24:1
Large Text Only (Fail)
Sample Text
#D11B91 on #F6F9F84.64:1
Normal Text AA Pass
Sample Text
#D11B91 on #4C22382.68:1
Large Text Only (Fail)
Sample Text
#D5688E on #F6F9F83.20:1
Large Text Only (Pass)
Sample Text
#D5688E on #4C22383.89: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