Metro Frame
modern palette with a balanced five-color hierarchy for design use.
#Modern#Clean#UI
COLOR 1
#752712
Burnt Umber
COLOR 2
#C95C23
Chocolate
COLOR 3
#DAB062
Topaz
COLOR 4
#F7F7F8
White Smoke
COLOR 5
#4F361F
Cocoa Powder
Color Values & Codes
HEX · RGB · HSLOpen In Design Tools
CSS Variables
:root {
--color-1: #752712;
--color-2: #C95C23;
--color-3: #DAB062;
--color-4: #F7F7F8;
--color-5: #4F361F;
}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
#752712 on #F7F7F89.54:1
Normal Text AA Pass
Sample Text
#752712 on #4F361F1.09:1
Large Text Only (Fail)
Sample Text
#C95C23 on #F7F7F83.89:1
Large Text Only (Pass)
Sample Text
#C95C23 on #4F361F2.68:1
Large Text Only (Fail)
Sample Text
#DAB062 on #F7F7F81.89:1
Large Text Only (Fail)
Sample Text
#DAB062 on #4F361F5.51:1
Normal Text AA Pass