Ocean Breeze Color Palette: Hex Codes, Shades & Pairings
Calm sky-to-teal ramp for dashboards, wellness, and travel brands—with copy-ready hex codes and UI-first guidance.
Sky Blue
Cyan
Teal
Emerald
Ocean Breeze — core hex codes
Copy the anchors you will use in CSS, Figma, or tokens. For a five-stop ramp including mint, see the hex reference or sidebar.
Ocean Breeze shades (light → dark)
Eight stops from icy tint to deep teal—use tints for backgrounds and deep tones for text on pastel cards.
| Swatch | Shade | Hex |
|---|---|---|
| Ice | #F0F9FF | |
| Aqua haze | #E0F2FE | |
| Soft sky | #7DD3FC | |
| Sky blue | #0EA5E9 | |
| Cyan | #06B6D4 | |
| Teal | #14B8A6 | |
| Deep teal | #0F766E | |
| Abyss teal | #134E4A |
Palette pairings
These combinations keep Ocean Breeze feeling calm and premium without turning into default corporate blue.
Ocean Breeze + warm white
Use near-white warm neutrals for page backgrounds so sky and cyan CTAs stay crisp. Body text stays charcoal or slate for readability.
Ocean Breeze + slate structure
Pair teal accents with #0F172A or #1E293B for navigation, type, and data tables. Reserve blues for actions and links.
Ocean Breeze + sand
Warm sand or stone (#E7E5E4, #D6D3D1) softens clinical blue UI—good for wellness, hospitality, and editorial layouts.
Ocean Breeze + deep green anchor
A deep forest accent (#166534) signals sustainability next to water tones. Keep green to supporting chips and icons so hierarchy stays blue-first.
When to use Ocean Breeze in UI
Lead with Sky Blue or Cyan for primary CTAs and key links; use Teal and Emerald for secondary actions, success, and charts. Avoid small body text in pure sky on white without testing in the contrast checker.
Extend hover, disabled, and dark-mode steps from any anchor using the palette generator—start from #0EA5E9 or #14B8A6 and generate monochromatic or analogous scales instead of guessing tints by eye.
The Ocean Breeze color palette moves from sky blue through cyan and teal into emerald—ideal when you want trust and clarity without a cold corporate default. Below, the long-form guide covers roles, code tokens, accessibility limits, and branding patterns.
Want to see what these blues and teals look like when mixed with other colors? Try our Color Mixing Simulator.
What Is the Ocean Breeze Color Palette?
Ocean Breeze is an analogous color palette: the hues sit next to each other on the color wheel, from blue through blue-green to green. That proximity creates a smooth, harmonious transition that reads as one cohesive theme. The palette is often used for brands and products that want to convey trust, clarity, wellness, or a connection to nature—think fintech apps, health platforms, travel sites, and SaaS dashboards.
The Colors: Hex Codes and Roles
Each color has a clear technical definition and a suggested role in your design system. Use the quick answer box above for one-click copy; this list explains intent.
- Sky Blue (#0EA5E9) — Primary blue for CTAs, links, and headers on light UI.
- Cyan (#06B6D4) — Secondary actions, hover, and badges beside sky blue.
- Teal (#14B8A6) — Bridge tone for icons, tertiary accents, and success-adjacent states.
- Emerald (#10B981) — Green-leaning accent for positive feedback; pair with teal for a cohesive accent range.
Best Uses in Web and UI Design
Assign one primary and one or two secondary colors so the interface stays consistent. Reserve Mint (#34D399) from the extended five-stop set for large tints if you add it—see the Ocean Breeze hex code reference for the full five. Run every text pair through the accessibility contrast checker for WCAG AA or AAA where required.
For dashboards, Ocean Breeze can drive charts: sky for primary series, teal for secondary, emerald for positive deltas. Keep neutrals for text and surfaces.
Using Ocean Breeze in Code: CSS Variables and Design Tokens
Implement with CSS custom properties on :root, then map to semantic tokens (primary-500, accent-teal). Generate extended scales with the color palette generator.
Accessibility and Contrast
Sky and cyan on white often fail WCAG AA for normal text; use them for large headings, buttons, and non-text chrome. For body copy, use dark neutrals on white or very light backgrounds.
Ocean Breeze for Branding and Marketing
Use sky or cyan as the primary brand color; document every hex in guidelines so vendors match digital and print conversions.
How to Extend or Adjust the Palette
Use our palette generator from any anchor hex, and validate pairs with our contrast checker.
Build your palette
Use our free tools to create and test your color palette.