Metro Canvas
modern palette with a balanced five-color hierarchy for design use.
#Modern#Clean#UI
COLOR 1
#715116
Sepia Tone
COLOR 2
#D1A91B
Yellow Ochre
COLOR 3
#CCD568
Khaki
COLOR 4
#F7F6F9
Slate 50
COLOR 5
#4C4922
Kelp Forest
Color Values & Codes
HEX · RGB · HSLOpen In Design Tools
CSS Variables
:root {
--color-1: #715116;
--color-2: #D1A91B;
--color-3: #CCD568;
--color-4: #F7F6F9;
--color-5: #4C4922;
}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
#715116 on #F7F6F96.75:1
Normal Text AA Pass
Sample Text
#715116 on #4C49221.27:1
Large Text Only (Fail)
Sample Text
#D1A91B on #F7F6F92.07:1
Large Text Only (Fail)
Sample Text
#D1A91B on #4C49224.12:1
Large Text Only (Pass)
Sample Text
#CCD568 on #F7F6F91.47:1
Large Text Only (Fail)
Sample Text
#CCD568 on #4C49225.82:1
Normal Text AA Pass