Ocean Breeze Hex Codes: Blue & Teal Palette
Copy-ready sky, cyan, teal, emerald, and mint hex codes—plus ten shades, UI use cases, and pairings for calm digital products.
Sky Blue
Cyan
Teal
Emerald
Mint
Ocean Breeze — core hex codes
Five anchors from sky blue to mint. Copy any value for CSS, Figma, or design tokens.
Ocean Breeze shades (lightest → darkest)
Ten stops from ice wash to ocean navy—use pale rows for backgrounds, mid rows for buttons and charts, dark rows for headers and type on light UI.
| Swatch | Shade | Hex |
|---|---|---|
| Ice wash | #F0F9FF | |
| Pale sky | #E0F2FE | |
| Sky blue | #0EA5E9 | |
| Cyan | #06B6D4 | |
| Bright aqua | #22D3EE | |
| Teal | #14B8A6 | |
| Emerald | #10B981 | |
| Mint | #34D399 | |
| Deep teal | #0F766E | |
| Ocean navy | #0C4A6E |
Ocean Breeze in UI design
Fintech and health dashboards: Use #0EA5E9 for primary actions and #10B981 for positive trends. Keep tables on white or #F8FAFC; reserve mint (#34D399) for success badges only after contrast testing in the contrast checker.
Travel and wellness apps: Hero gradients from #06B6D4 to #14B8A6 over photography feel coastal without cluttering navigation. Pair with sand neutrals (#F5E6D3) for booking flows so cool blues do not dominate every screen.
Eco and sustainability landing pages: Emerald (#10B981) and deep teal (#0F766E) signal growth and responsibility. Use ice (#F0F9FF) section backgrounds and charcoal (#111827) body copy; one coral accent (#FF6B6B) can highlight donations or CTAs if contrast passes.
Ocean Breeze palette pairings
Cool palettes fail when every element competes at full saturation. These four combinations give hierarchy, readable type, and brand flexibility.
Ocean Breeze + white (clean SaaS)
White (#FFFFFF) or off-white (#F8FAFC) content wells with #0EA5E9 primary buttons and #0C4A6E headings keep interfaces airy and trustworthy.
Ocean Breeze + sand (travel & wellness)
Warm sand (#F5E6D3) or cream (#FFFBEB) backgrounds soften cool blues for hospitality, spas, and coastal brands without losing calm.
Ocean Breeze + coral (energetic accent)
Coral #FF6B6B or salmon #FA8072 as a single warm CTA against teal navigation prevents an all-cool UI from feeling clinical.
Ocean Breeze + charcoal (data-heavy UI)
Charcoal body text (#111827) on mint-tinted stripes (#ECFDF5) with #10B981 success states reads professional for dashboards and analytics.
Ocean Breeze starts with #0EA5E9 and #06B6D4. If you searched for Ocean Breeze color, Ocean Breeze colour, or Ocean Breeze hex code, you need copy-paste values fast. This page lists every core hex and RGB code, ten named shades with swatches, and practical guidance for UI and brand systems.
Ocean Breeze hex and RGB codes (full list)
- Sky Blue: #0EA5E9 · rgb(14, 165, 233)
- Cyan: #06B6D4 · rgb(6, 182, 212)
- Teal: #14B8A6 · rgb(20, 184, 166)
- Emerald: #10B981 · rgb(16, 185, 129)
- Mint: #34D399 · rgb(52, 211, 153)
Ocean Breeze color vs colour: does spelling matter?
No. Color and colour point to the same palette values. Keep both spellings naturally in your copy, but do not duplicate pages for each variation. One strong URL with clean content outperforms split relevance for UK and US queries.
CSS variables (ready to paste)
Map each shade to a semantic role so product screens do not drift. Developers should reference tokens—not raw hex scattered in components.
:root {
--ob-sky: #0EA5E9;
--ob-cyan: #06B6D4;
--ob-teal: #14B8A6;
--ob-emerald: #10B981;
--ob-mint: #34D399;
--ob-deep: #0C4A6E;
}Accessibility and contrast
Mint and cyan text on white often fails WCAG AA at small sizes. Use Ocean Breeze for buttons, icons, chart series, and large headings; keep paragraphs in #111827 or #0C4A6E. Run every text-on-tint pair through the contrast checker before launch, including hover and focus states.
Dark mode may need desaturated teals: #14B8A6 on #111827 can glow too brightly. Test reduced-saturation variants generated from the palette generator.
FAQ
- What are the Ocean Breeze hex codes?
- The core Ocean Breeze palette uses #0EA5E9 (sky blue), #06B6D4 (cyan), #14B8A6 (teal), #10B981 (emerald), and #34D399 (mint). Extended shades run from ice #F0F9FF to deep ocean navy #0C4A6E.
- What is the main Ocean Breeze color hex?
- Most teams anchor Ocean Breeze on #0EA5E9 for primary actions and #14B8A6 for secondary accents. Pick one sky hex and one teal hex as tokens, then document tints in a style guide.
- Is Ocean Breeze color or colour?
- Both spellings describe the same blue-to-mint family. Hex and RGB values do not change by region—only copy spelling differs.
- Can I use Ocean Breeze for UI text colors?
- Use Ocean Breeze for buttons, links, charts, and highlights—not long body text on light backgrounds. Pair with charcoal or navy for paragraphs and verify every combination with a WCAG contrast checker.
Related color guides
- Forest Green Hex Code — natural green anchors that pair with Ocean Breeze mint
- Navy Blue Hex Code — deep blue structure for trust-heavy layouts
- Sage Green Hex Code — muted gray-green for wellness and lifestyle brands
- Ocean Breeze palette story — psychology, branding, and extended use cases
Want to test what colors make when mixed like paint? Use the Color Mixing Simulator to blend Ocean Breeze tones with warm or neutral accents.
Build your palette
Use our free tools to create and test your color palette.