Clay Haze
earthy palette with a balanced five-color hierarchy for design use.
#Earthy#Natural#Muted
COLOR 1
#5D3A2A
Cocoa Powder
COLOR 2
#B58D37
Curry
COLOR 3
#BDC775
Dark Khaki
COLOR 4
#A3D5C7
Opal
COLOR 5
#ECEDF2
Slate 100
Color Values & Codes
HEX · RGB · HSLOpen In Design Tools
CSS Variables
:root {
--color-1: #5D3A2A;
--color-2: #B58D37;
--color-3: #BDC775;
--color-4: #A3D5C7;
--color-5: #ECEDF2;
}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
#5D3A2A on #A3D5C76.13:1
Normal Text AA Pass
Sample Text
#5D3A2A on #ECEDF28.54:1
Normal Text AA Pass
Sample Text
#B58D37 on #A3D5C71.89:1
Large Text Only (Fail)
Sample Text
#B58D37 on #ECEDF22.63:1
Large Text Only (Fail)
Sample Text
#BDC775 on #A3D5C71.11:1
Large Text Only (Fail)
Sample Text
#BDC775 on #ECEDF21.55:1
Large Text Only (Fail)