Azure

A pastel, cool cyan -- the dependable foundation of trustworthy interfaces.

Hex
#f0ffff
sRGB
rgb(240 255 255)
OKLCH
oklch(0.9890 0.0157 196.9)

Azure is a standard CSS named color with the canonical value #f0ffff.

Create Azure in PHP

Parse the catalog’s canonical value once, then keep the resulting color object throughout the rest of your code.

<?php

use PhpColor\Color\Color;

$azure = Color::parse('#F0FFFF');
use PhpColor\Color\Color; $azure = Color::parse('#F0FFFF');

ColorInterface

$azure

#f0ffff · oklch(0.9890 0.0157 196.9)

Tint Azure for a system

Azure is a neutral, so rotating its hue changes nothing. Design systems rarely ship a pure neutral either: give it a trace of chroma and it belongs to the palette around it.

<?php

$neutral = $azure->to('oklch');

foreach (['warm' => 60, 'fresh' => 150, 'cool' => 250] as $name => $hue) {
    echo $neutral->withChannel('c', 0.02)->withChannel('h', $hue)->toHex().PHP_EOL;
}
$neutral = $azure->to('oklch'); foreach (['warm' => 60, 'fresh' => 150, 'cool' => 250] as $name => $hue) { echo $neutral->withChannel('c', 0.02)->withChannel('h', $hue)->toHex().PHP_EOL; }
  1. Warm#fff9ee
  2. Fresh#f2fff4
  3. Cool#f2fdff
Azure kept at the same lightness, pulled warm, fresh and cool

Generate an Azure scale

Keep the original hue and chroma, then vary OKLCH lightness to produce perceptually ordered steps.

<?php

$oklch = $azure->to('oklch');

foreach ([0.97, 0.92, 0.84, 0.74, 0.66, 0.58, 0.48, 0.40, 0.32, 0.24, 0.16] as $lightness) {
    $step = $oklch->withChannel('l', $lightness);
}
$oklch = $azure->to('oklch'); foreach ([0.97, 0.92, 0.84, 0.74, 0.66, 0.58, 0.48, 0.40, 0.32, 0.24, 0.16] as $lightness) { $step = $oklch->withChannel('l', $lightness); }
50
100
200
300
400
500
600
700
800
900
950
Explore named color scales →

Format Azure for the web

The same object can emit a compact Hex value, an sRGB CSS function, or its perceptual OKLCH coordinates.

<?php

$hex   = $azure->toHex();
$rgb   = $azure->toCss('srgb');
$oklch = $azure->to('oklch')->toCss();
$hex = $azure->toHex(); $rgb = $azure->toCss('srgb'); $oklch = $azure->to('oklch')->toCss();
hex
#f0ffff
rgb
rgb(240 255 255)
oklch
oklch(0.988951 0.0157201 196.902)

Keep exploring

Continue from Azure