ColorPaletteXYZ Logo
ColorPaletteXYZ
Palettes/Dark

Shadow Stone

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

#Dark#Cinematic#Premium
Open in Generator
COLOR 1
#36210A
Coffee Bean
COLOR 2
#717015
Avocado 70s
COLOR 3
#292F99
Klein Blue
COLOR 4
#A93AD9
Dark Orchid
COLOR 5
#ADC0D5
Light Steel Blue

Color Values & Codes

HEX · RGB · HSL
rgb(54, 33, 10)hsl(31, 69%, 13%)Color details →
rgb(113, 112, 21)hsl(59, 69%, 26%)Color details →
Klein Blue
#292F99
rgb(41, 47, 153)hsl(237, 58%, 38%)Color details →
rgb(169, 58, 217)hsl(282, 68%, 54%)Color details →
rgb(173, 192, 213)hsl(212, 32%, 76%)Color details →

Open In Design Tools

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

CSS Variables

Copy & paste directly into your stylesheet
:root {
  --color-1: #36210A;
  --color-2: #717015;
  --color-3: #292F99;
  --color-4: #A93AD9;
  --color-5: #ADC0D5;
}

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
#36210A on #A93AD93.11:1
Large Text Only (Pass)
Sample Text
#36210A on #ADC0D58.18:1
Normal Text AA Pass
Sample Text
#717015 on #A93AD91.07:1
Large Text Only (Fail)
Sample Text
#717015 on #ADC0D52.80:1
Large Text Only (Fail)
Sample Text
#292F99 on #A93AD92.19:1
Large Text Only (Fail)
Sample Text
#292F99 on #ADC0D55.75:1
Normal Text AA Pass

Related Palettes in Dark

Explore Dark
#0B0B0BCopy
#1C1917Copy
#B45309Copy
#D97706Copy
#FDE68ACopy
cp-featured-06Luxury
Haute Couture Noir & Gold
LuxuryDarkFashion
#15393ECopy
#275BA6Copy
#5557E7Copy
#F8F6F6Copy
#2D7442Copy
cp-0151Luxury
Velvet Wave
LuxuryElegantPremium
#3F1530Copy
#A8253BCopy
#DD7C60Copy
#F6F8F7Copy
#532C75Copy
cp-0152Luxury
Royal Signal
LuxuryElegantPremium
#254014Copy
#23AA2DCopy
#5EDE9BCopy
#F7F6F8Copy
#6C6035Copy
cp-0153Luxury
Opal Canvas
LuxuryElegantPremium