coolmonochrome
Ocean Breeze Color Palette
Ocean Breeze is a cool and monochrome color palette of 5 colors: Navy (#03045e), Cerulean (#0077b6), Deep Sky Blue (#00b4d8), Light Blue (#90e0ef) and Pale Turquoise (#caf0f8). Its dominant hue is blue.
The darkest color, Navy, on the lightest, Pale Turquoise, gives a 14.65:1 contrast ratio — enough for body text at WCAG AAA. 3 pairs in this palette pass AA for normal text. Navy (#03045e) is its most saturated color and a natural choice for buttons and links.
Colors
- Navy
- Cerulean
- Deep Sky Blue
- Light Blue
- Pale Turquoise
CSS Output
:root {
--ocean-breeze-1: #03045e;
--ocean-breeze-2: #0077b6;
--ocean-breeze-3: #00b4d8;
--ocean-breeze-4: #90e0ef;
--ocean-breeze-5: #caf0f8;
}Ocean Breeze on a Website
A quick preview on a landing page: the most colorful colors become the primary and accent, a light one the surface. For a more realistic look across many designs, open it in the Palette Visualizer below.
See it on real designs
This is a single preview. The Palette Visualizer shows the palette on 11 designs — dashboards, mobile apps, pricing and blog pages, posters and business cards — lets you change which color plays which role, switch to dark mode and check contrast.
Accessible Color Combinations
Pairs from this palette that work as text on a background, with their WCAG contrast ratio. AA needs 4.5:1 for body text; large text needs 3:1.
- Navy on Pale Turquoise#03045e on #caf0f814.65:1AAA
- Navy on Light Blue#03045e on #90e0ef11.91:1AAA
- Navy on Deep Sky Blue#03045e on #00b4d87.20:1AAA
- Cerulean on Pale Turquoise#0077b6 on #caf0f84.01:1AA Large
- Navy on Cerulean#03045e on #0077b63.64:1AA Large
- Cerulean on Light Blue#0077b6 on #90e0ef3.26:1AA Large