Metro Canvas
modern palette with a balanced five-color hierarchy for design use.
#Modern#Clean#UI
COLOR 1
#70173F
Merlot
COLOR 2
#CF1D56
Cherry Glaze
COLOR 3
#D3696C
Indian Red
COLOR 4
#F6F8F8
White Smoke
COLOR 5
#4B232B
Pinot Noir
Color Values & Codes
HEX · RGB · HSLOpen In Design Tools
CSS Variables
:root {
--color-1: #70173F;
--color-2: #CF1D56;
--color-3: #D3696C;
--color-4: #F6F8F8;
--color-5: #4B232B;
}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
#70173F on #F6F8F810.46:1
Normal Text AA Pass
Sample Text
#70173F on #4B232B1.20:1
Large Text Only (Fail)
Sample Text
#CF1D56 on #F6F8F84.97:1
Normal Text AA Pass
Sample Text
#CF1D56 on #4B232B2.52:1
Large Text Only (Fail)
Sample Text
#D3696C on #F6F8F83.28:1
Large Text Only (Pass)
Sample Text
#D3696C on #4B232B3.82:1
Large Text Only (Pass)