Ocean Beach Palette — HEX Codes, Swatches & UI Palette
Soft trade winds over turquoise Caribbean lagoons and pristine shell-dusted sands. Fresh, invigorating, and relaxing hues for travel, swimwear, and seaside hospitality.
Color Swatches & Technical Specifications
Exact color codes, luminance values, and WCAG contrast ratings for each swatch in the Ocean Beach Palette.
UI Design & Color Hierarchy Guide
Use the deep abyss blue (#004E64) for sharp, high-contrast headings, turquoise (#25A18E) for interactive links, and sandy warm white (#F7F9F9) for page canvases.
WCAG 2.1 Accessibility & Contrast Matrix
Legibility ratings between palette elements and key backgrounds (Lightest: Sea Foam Mist | Darkest: Abyss Navy):
| Swatch | Contrast vs Light Canvas | Contrast vs Dark Canvas |
|---|---|---|
| Abyss Navy (#004E64) | 8.61:1 AAA | 1.0:1 Fail |
| Tropical Reef Teal (#25A18E) | 2.98:1 Fail | 2.89:1 Fail |
| Lagoon Aquamarine (#7AE582) | 1.47:1 Fail | 5.87:1 AA |
| Golden Dune Sand (#E5D4C0) | 1.35:1 Fail | 6.38:1 AA |
| Sea Foam Mist (#F0F8FF) | 1.0:1 Fail | 8.61:1 AAA |
CSS Custom Properties & Design Tokens
Copy and paste production-ready tokens directly into your CSS stylesheet or Tailwind CSS configuration:
:root {
--color-1: #004E64; /* Abyss Navy - Deep Sea Navy */
--color-2: #25A18E; /* Tropical Reef Teal - Vibrant Aquatic Lead */
--color-3: #7AE582; /* Lagoon Aquamarine - Shallow Water Accent */
--color-4: #E5D4C0; /* Golden Dune Sand - Warm Beach Sand */
--color-5: #F0F8FF; /* Sea Foam Mist - Clean Aerated Canvas */
}{
colors: {
'palette-1': '#004E64',
'palette-2': '#25A18E',
'palette-3': '#7AE582',
'palette-4': '#E5D4C0',
'palette-5': '#F0F8FF'
}
}Explore More Curated Color Palettes
Browse seasonal palettes, retro aesthetic color schemes, nature tones, and dark mode themes.