Ocean Breeze: A Calm Blue-to-Green Palette

The Ocean Breeze color palette is a curated set of five colors that move from sky blue through cyan and teal to emerald and mint green. It is one of the most popular blue-green palettes for web design, branding, and UI because it feels calm, clear, and professional without feeling cold or corporate. In this guide we cover every hex code, where and how to use each color, how to implement the palette in code (including CSS variables and design tokens), and how to keep it accessible with proper contrast. Whether you are a designer choosing colors for a new project or a developer implementing a design system, you will have everything you need to use the Ocean Breeze palette effectively.

What Is the Ocean Breeze Color Palette?

Ocean Breeze is an analogous color palette: the five hues sit next to each other on the color wheel, from blue through blue-green (cyan, teal) to green. That proximity creates a smooth, harmonious transition that is easy on the eye and reads as a single, 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 and fitness platforms, travel and hospitality sites, and SaaS dashboards. Because the colors are mid to high saturation with good luminance spread, they work on both light and dark backgrounds when you assign roles correctly and check contrast.

The Five Colors: Hex Codes and Roles

Each color in the Ocean Breeze palette has a clear technical definition and a suggested role in your design system or style guide. Below are the exact hex and RGB values you can copy into Figma, CSS, or design tokens.

• Sky Blue (#0EA5E9, rgb(14, 165, 233)) — The primary blue. Use it for main CTAs, primary buttons, key links, and headers. It has strong presence and works well on white or very light gray backgrounds.
• Cyan (#06B6D4, rgb(6, 182, 212)) — Slightly cooler and more saturated. Ideal for secondary buttons, hover states, or as an accent alongside Sky Blue. Good for badges and tags.
• Teal (#14B8A6, rgb(20, 184, 166)) — The bridge between blue and green. Use for links, icons, or tertiary accents. Works well for success or “active” states in UI.
• Emerald (#10B981, rgb(16, 185, 129)) — Green-leaning. Suits success messages, positive feedback, and secondary highlights. Pairs well with Teal for a cohesive accent range.
• Mint (#34D399, rgb(52, 211, 153)) — The lightest tone. Best for subtle backgrounds, hover highlights, or large areas where you want a soft tint. Avoid using Mint for small text; contrast can fail on white.

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

Best Uses in Web and UI Design

In a typical web or app layout, assign one primary and one or two secondary colors from Ocean Breeze so the interface stays consistent. Use Sky Blue or Cyan for the main call-to-action button and primary navigation highlights. Reserve Teal and Emerald for secondary actions, links, and success or info states. Mint is best for background tints, cards, or large decorative areas rather than for text or small UI elements. If you support dark mode, use the darker shades (Sky Blue, Cyan, Teal) for accents on dark backgrounds and ensure body text is white or off-white; run every text-background pair through an accessibility contrast checker to meet WCAG AA or AAA where required.

For dashboards and data-heavy UIs, Ocean Breeze can drive charts and status indicators: for example, Sky Blue for primary data series, Teal for secondary, and Emerald for positive or “on” states. Keep neutrals (white, light gray, dark gray) for text and surfaces so the palette does not overwhelm the content.

Using Ocean Breeze in Code: CSS Variables and Design Tokens

As a developer, you can implement the Ocean Breeze palette with CSS custom properties so one change propagates across the app. Define the five colors as variables (e.g. on :root or in a theme object), then reference them for buttons, links, backgrounds, and borders. In a design token system, map these hex values to semantic names such as primary-500, accent-teal, and success so designers and developers share the same vocabulary. If you need more shades (e.g. lighter or darker variants for hover and disabled states), use a color palette generator with any of these hex codes as the base to create an extended scale.

Accessibility and Contrast

Not every Ocean Breeze color is safe for body text on white or black. Sky Blue (#0EA5E9) and Cyan (#06B6D4) on white often fail WCAG AA for normal text (4.5:1); they are better for large text, headings, or non-text elements. Teal and Emerald can approach or meet AA on white in large sizes; Mint on white generally fails for text. For accessible body copy, use black or dark gray text on white or light gray backgrounds, and use the Ocean Breeze colors for buttons, links, and accents. Always test your exact combinations with a contrast checker—especially if you use these colors on colored backgrounds or in dark mode—and reserve the palette for UI chrome and emphasis, not for long-form reading.

Ocean Breeze for Branding and Marketing

In branding, Ocean Breeze works well for logos, social assets, and marketing materials when you want a fresh, trustworthy, or wellness-oriented feel. Use Sky Blue or Cyan as the primary brand color and Teal or Emerald for secondary touchpoints. Document the hex codes in your brand guidelines so all teams and vendors use the same values in digital (HEX, RGB) and print (CMYK equivalents). Consistency across website, app, and print keeps the Ocean Breeze palette recognizable and on-brand.

How to Extend or Adjust the Palette

If you need more than five colors—for example, lighter or darker steps for gradients or disabled states—start from any Ocean Breeze hex in our palette generator and generate analogous or monochromatic variations. You can also combine this palette with a neutral scale (grays and white) for a full design system. When in doubt, keep the core five as your source of truth and add shades only where the UI clearly needs them; too many similar blues and greens can dilute the clarity of the palette.

Use our palette generator to extend this set or create variations from any of the five colors. Test every text and background pair with our contrast checker so your Ocean Breeze implementation stays accessible and readable for all users.