#c7ecf3
L 0.92 · C 0.04 · H 210
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.
#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();