Tide Frame
ocean palette with a balanced five-color hierarchy for design use.
#Ocean#Cool#Fresh
COLOR 1
#3A7413
Dark Green
COLOR 2
#32CB20
Lime Green
COLOR 3
#68DE8B
Emerald Green
COLOR 4
#F5A2F4
Mauve Pastel
COLOR 5
#F9F5F7
White Smoke
Color Values & Codes
HEX · RGB · HSLOpen In Design Tools
CSS Variables
:root {
--color-1: #3A7413;
--color-2: #32CB20;
--color-3: #68DE8B;
--color-4: #F5A2F4;
--color-5: #F9F5F7;
}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
#3A7413 on #F5A2F43.08:1
Large Text Only (Pass)
Sample Text
#3A7413 on #F9F5F75.27:1
Normal Text AA Pass
Sample Text
#32CB20 on #F5A2F41.17:1
Large Text Only (Fail)
Sample Text
#32CB20 on #F9F5F72.00:1
Large Text Only (Fail)
Sample Text
#68DE8B on #F5A2F41.09:1
Large Text Only (Fail)
Sample Text
#68DE8B on #F9F5F71.57:1
Large Text Only (Fail)