Use a tint or shade when white or black is the intended endpoint. Use lighten() or darken() when the goal is to change Oklch lightness while retaining the source chroma and hue coordinates.
Choose the relationship, not the familiar name
| Goal | Operation | Model |
|---|---|---|
| Blend toward white | tint() |
Oklab mix with white |
| Blend toward black | shade() |
Oklab mix with black |
| Increase perceptual lightness | lighten() |
Add to Oklch lightness |
| Decrease perceptual lightness | darken() |
Subtract from Oklch lightness |
The two models produce different color paths because endpoint mixing changes more than one perceptual coordinate.
use PhpColor\Color\Color;
$base = Color::parse('#3b82f6');
echo $base->tint(0.3)->toHex().PHP_EOL;
echo $base->shade(0.3)->toHex().PHP_EOL;
echo $base->lighten(0.08)->toHex().PHP_EOL;
The output is:
#77aafc
#214e98
#549cff
The tint and the lighter color are both brighter, but they express different relationships.
Build systems with collections
For one nearby state, a single operation can be enough. For a token scale, generate the complete ordered collection so the number of steps and endpoints remain explicit. The ratio is clamped to 0..1: zero returns the source value and one reaches white or black.
Neither approach guarantees equal contrast increments. Verify the actual token pairs and delivered output.
Continue with Generate palettes, Build color tints, Build color shades, or Create a seven-step OKLCH scale.