Ocean Breeze Hex Codes: Color and Colour Reference

If you searched for Ocean Breeze color, Ocean Breeze colour, or Ocean Breeze hex code, you likely need copy-paste values fast. This page gives every hex and RGB code in one place, plus practical guidance for UI and brand usage.

Ocean Breeze Hex and RGB Codes (Quick Copy)

#0EA5E9 · #06B6D4 · #14B8A6 · #10B981 · #34D399

• 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 is better than split relevance.

CSS Variables (Ready to Paste)

Use one source of truth in code and map each shade to a clear role. This reduces random color drift across product screens.

:root {
  --ob-sky: #0EA5E9;
  --ob-cyan: #06B6D4;
  --ob-teal: #14B8A6;
  --ob-emerald: #10B981;
  --ob-mint: #34D399;
}

Practical UI Usage (Where teams mess up)

• Use blue/cyan for primaries: keep CTA hierarchy stable instead of switching accent hues per section.
• Use mint for surfaces, not paragraph text: mint text fails contrast on light backgrounds too easily.
• Keep neutrals for long-form readability: colors should guide attention, not replace body typography.
• Test every pair: run buttons, links, and badge text through the contrast checker.

If you want the strategic overview (psychology, brand positioning, and use cases), read the full Ocean Breeze palette guide. If you need adjacent green references, use our Forest Green hex guide.

Need more shades from these anchors? Open the palette generator and generate monochromatic or analogous variants from any Ocean Breeze hex above.