Grid Drift
modern palette with a balanced five-color hierarchy for design use.
#Modern#Clean#UI
COLOR 1
#6C7017
Avocado 70s
COLOR 2
#AFCF1D
Olivine Peridot
COLOR 3
#A1D369
Light Green
COLOR 4
#F8F6F8
White Smoke
COLOR 5
#3F4B23
Kelp Forest
Color Values & Codes
HEX · RGB · HSLOpen In Design Tools
CSS Variables
:root {
--color-1: #6C7017;
--color-2: #AFCF1D;
--color-3: #A1D369;
--color-4: #F8F6F8;
--color-5: #3F4B23;
}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
#6C7017 on #F8F6F84.92:1
Normal Text AA Pass
Sample Text
#6C7017 on #3F4B231.77:1
Large Text Only (Fail)
Sample Text
#AFCF1D on #F8F6F81.66:1
Large Text Only (Fail)
Sample Text
#AFCF1D on #3F4B235.25:1
Normal Text AA Pass
Sample Text
#A1D369 on #F8F6F81.62:1
Large Text Only (Fail)
Sample Text
#A1D369 on #3F4B235.37:1
Normal Text AA Pass