Lagoon Signal
ocean palette with a balanced five-color hierarchy for design use.
#Ocean#Cool#Fresh
COLOR 1
#6F181C
Pomegranate
COLOR 2
#D2481A
Tiger Lily
COLOR 3
#E3B763
Topaz
COLOR 4
#A5D3F2
Pastel Sky
COLOR 5
#F5F6FA
Slate 100
Color Values & Codes
HEX · RGB · HSLOpen In Design Tools
CSS Variables
:root {
--color-1: #6F181C;
--color-2: #D2481A;
--color-3: #E3B763;
--color-4: #A5D3F2;
--color-5: #F5F6FA;
}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
#6F181C on #A5D3F27.24:1
Normal Text AA Pass
Sample Text
#6F181C on #F5F6FA10.66:1
Normal Text AA Pass
Sample Text
#D2481A on #A5D3F22.82:1
Large Text Only (Fail)
Sample Text
#D2481A on #F5F6FA4.15:1
Large Text Only (Pass)
Sample Text
#E3B763 on #A5D3F21.18:1
Large Text Only (Fail)
Sample Text
#E3B763 on #F5F6FA1.73:1
Large Text Only (Fail)