Ocean color palette
Ocean palettes narrow the cool hue range to blue-green and add a sand accent, the one warm note that keeps the set from reading as purely nautical or corporate. Deep sea anchors the dark end; sea mist anchors the light end.
Updated 2026-07-15
- Deep SeaPrimary#023E58
- LagoonAccent#0A6E8C
- AquaHighlight#4FB6C4
- SeafoamSurface#A8DEE0
- SandAccent 2#EAD9B4
- Sea MistBackground#F7FBFC
Where this palette works
Travel and coastal hospitality brands
Deep sea and seafoam are the direct visual shorthand for coastal and marine settings.
Environmental and conservation products
The blue-green range reads as natural water rather than the more technical, primary-blue tone common in SaaS.
Wellness apps with a calming register
Ocean palettes carry a slower, calmer read than a high-saturation cool palette.
Accessible pairings
Deep sea is the palette's one required text color: it clears AAA against sea mist, seafoam, and sand, so a single dark tone covers every light surface in the set without needing a separate near-black.
Use these tokens
Copy as CSS custom properties or a Tailwind v4 @theme block.
:root {
--palette-primary: #023E58; /* Deep Sea */
--palette-accent: #0A6E8C; /* Lagoon */
--palette-highlight: #4FB6C4; /* Aqua */
--palette-surface: #A8DEE0; /* Seafoam */
--palette-accent-2: #EAD9B4; /* Sand */
--palette-background: #F7FBFC; /* Sea Mist */
}Frequently asked questions
Related palettes
Cool palette
A cool color palette built from deep teal, azure, and sky blue, with hex codes, accessible text pairings, and export-ready CSS variables.
Forest green palette
A forest green color palette built from pine, spruce, and moss, with hex codes, accessible text pairings, and export-ready CSS variables.
Pastel palette
A pastel color palette built from blossom pink, lavender, and mint, with hex codes, accessible text pairings, and export-ready CSS variables.
Build on this palette
Generate a full shade scale and export to Tailwind, shadcn, or Figma Variables.
Generate a palette