Caribbean Reef Shallows
Tropical sea palette inspired by turquoise coral reefs, soft sandbars, and sun-drenched coastal water.
#Ocean#Fresh
COLOR 1
#005F73
Art Deco Teal
COLOR 2
#0A9396
Dark Cyan
COLOR 3
#94D2BD
Seafoam Green
COLOR 4
#E9D8A6
Sahara Sand
COLOR 5
#EE9B00
Amber 500
Suitable Design Applications
Tropical Travel BookingScuba Charter ExperiencesEco-Resort BrandingSummer Seltzer Brands
Visual Psychology & Mood
Pure vacation optimism, crystalline waters, and tropical escape.
Editorial Application Advice
Crystal turquoise shallows fading to deep sea cobalt with warm coral sand highlights. Refreshing and luminous in high sunlight.
Color Values & Codes
HEX · RGB · HSLOpen In Design Tools
CSS Variables
:root {
--color-1: #005F73;
--color-2: #0A9396;
--color-3: #94D2BD;
--color-4: #E9D8A6;
--color-5: #EE9B00;
}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
#005F73 on #E9D8A65.14:1
Normal Text AA Pass
Sample Text
#005F73 on #EE9B003.23:1
Large Text Only (Pass)
Sample Text
#0A9396 on #E9D8A62.64:1
Large Text Only (Fail)
Sample Text
#0A9396 on #EE9B001.66:1
Large Text Only (Fail)
Sample Text
#94D2BD on #E9D8A61.21:1
Large Text Only (Fail)
Sample Text
#94D2BD on #EE9B001.31:1
Large Text Only (Fail)
Related Palettes in Ocean
Explore OceanFrequently Asked Questions About Caribbean Reef Shallows
Production design guidance and accessibility rules for applying the Caribbean Reef Shallows (Ocean) color palette.
What is the recommended role hierarchy for the Caribbean Reef Shallows palette?
In digital interface design, allocate #005F73 and #EE9B00 for structural surface canvas and typography hierarchy (the 60% and 30% layers of the design), while using standout swatches like #0A9396 or #94D2BD as your 10% primary action accent for buttons, badges, and interactive highlights.
Are the colors in Caribbean Reef Shallows WCAG accessible for web body copy?
Always verify contrast ratios against WCAG 2.2 AA standards (minimum 4.5:1 for regular body copy and 3.0:1 for large text or graphical controls). Consult the Role-Based WCAG Contrast Audit section above to see exact scores for every foreground/background combination in this palette.
How can I export the Caribbean Reef Shallows palette to my frontend codebase?
You can copy CSS Custom Properties directly from the CSS Variables code block above, export Tailwind CSS configuration tokens, download a high-resolution PNG card, or open the entire palette inside the interactive Palette Generator to experiment with tints and harmonies.