Ocean Breeze

Cool blues and teals inspired by coastal waters.

Mood
Cool
Colors
6
Space
OKLCH

Ocean Breeze, color by color

Built for calm, content-heavy interfaces. The blues stay cool and low in chroma so long-form text sits easily on top, while the lone teal gives links and active states somewhere to stand out. Reach for it on dashboards and reading apps where nothing should shout.

#c7ecf3 L 0.92 · C 0.04 · H 210
#47d2e8 L 0.8 · C 0.12 · H 210
#00b3d5 L 0.68 · C 0.18 · H 210
#008f9f L 0.55 · C 0.2 · H 200
#006d71 L 0.45 · C 0.16 · H 195
#00484f L 0.35 · C 0.1 · H 200

Create Ocean Breeze in PHP

Parse the catalog values as one ordered scale. The input remains readable while PHPColor normalizes every color.

<?php

use PhpColor\Color\Palette\ColorPalette;

$palette = ColorPalette::parse([
    'oklch(0.92 0.04 210)',
    'oklch(0.80 0.12 210)',
    'oklch(0.68 0.18 210)',
    'oklch(0.55 0.20 200)',
    'oklch(0.45 0.16 195)',
    'oklch(0.35 0.10 200)',
]);
use PhpColor\Color\Palette\ColorPalette; $palette = ColorPalette::parse([ 'oklch(0.92 0.04 210)', 'oklch(0.80 0.12 210)', 'oklch(0.68 0.18 210)', 'oklch(0.55 0.20 200)', 'oklch(0.45 0.16 195)', 'oklch(0.35 0.10 200)', ]);

Inspect every palette color

Palette operations preserve order, so iteration and conversion produce values in the same visual sequence.

<?php

foreach ($palette->to('oklch') as $color) {
    echo $color->toCss().PHP_EOL;
}
foreach ($palette->to('oklch') as $color) { echo $color->toCss().PHP_EOL; }

Format Ocean Breeze for CSS

Export hexadecimal values for compact tokens or convert the full palette to perceptual CSS notation.

<?php

$hex = $palette->toHex();
$css = $palette->to('oklch')->toCss();
$hex = $palette->toHex(); $css = $palette->to('oklch')->toCss();

Keep exploring

Build on Ocean Breeze