Lightness
Adjust the lightness of any background colour using CSS relative colour syntax. Use bg-lightness-{amount} to lighten and -bg-lightness-{amount} to darken. Works across 17 colour spaces with a simple slash modifier.
Import
Included in @import 'tw-jib-css'. To import individually:
@import 'tw-jib-css/lightness';Quick Reference
| Class | Styles |
|---|---|
| bg-lightness-<amount> | --tw-lightness-amount: calc(<amount> * 0.01); background-color: oklch(from var(--tw-bg-color) calc(l + var(--tw-lightness-amount)) c h / alpha) |
| -bg-lightness-<amount> | --tw-lightness-amount: calc(<amount> * -0.01); background-color: oklch(from var(--tw-bg-color) calc(l + var(--tw-lightness-amount)) c h / alpha) |
| bg-lightness-<amount>/oklch | background-color: oklch(from var(--tw-bg-color) calc(l + <amount>) c h / alpha) |
| bg-lightness-<amount>/lch | background-color: lch(from var(--tw-bg-color) calc(l + <amount>) c h / alpha) |
| bg-lightness-<amount>/lab | background-color: lab(from var(--tw-bg-color) calc(l + <amount>) a b / alpha) |
| bg-lightness-<amount>/oklab | background-color: oklab(from var(--tw-bg-color) calc(l + <amount>) a b / alpha) |
| bg-lightness-<amount>/hsl | background-color: hsl(from var(--tw-bg-color) h s calc(l + <amount>) / alpha) |
| bg-lightness-<amount>/hwb | background-color: hwb(from var(--tw-bg-color) h calc(w + <amount>) calc(b - <amount>) / alpha) |
| bg-lightness-<amount>/rgb | background-color: rgb(from var(--tw-bg-color) calc(r + <amount>) calc(g + <amount>) calc(b + <amount>) / alpha) |
| bg-lightness-<amount>/srgb | background-color: color(from var(--tw-bg-color) srgb calc(r + <amount>) ...) |
| bg-lightness-<amount>/srgb-linear | background-color: color(from var(--tw-bg-color) srgb-linear calc(r + <amount>) ...) |
| bg-lightness-<amount>/display-p3 | background-color: color(from var(--tw-bg-color) display-p3 calc(r + <amount>) ...) |
Basic Usage
Lighten
Set a base background colour with bg-{color}, then lighten it with bg-lightness-{amount}:
Darken
Use -bg-lightness-{amount} to decrease lightness:
Scale
Use increasing values to create consistent lightening and darkening scales from a single base colour:
Lighten scale
Darken scale
Colour Spaces
Use the slash modifier to select a colour space. Different spaces produce visually distinct results. For background on each colour space, see the Colour Spaces guide.
Lighten across colour spaces
Darken across colour spaces
How scaling works
Values 0–100 represent a percentage of the distance to white or black — not a fixed channel offset. bg-lightness-50 moves halfway to white; bg-lightness-100 reaches white exactly, regardless of where the colour started. Each colour space family handles this differently:
oklch, lch, oklab, lab — Lightness interpolates toward 1 (white) or 0 (black). Chroma is held constant through most of the range, tapering above 80 where the gamut narrows and high chroma would cause browser clipping artefacts.
HSL — HSL's visible saturation peaks at L=50% (that's where the RGB gamut is widest). Darkening a light shade or lightening a dark shade would push lightness toward 50%, spiking saturation. To counter this, S is scaled by the gamut factor ratio min(l, 100−l) / min(new_l, 100−new_l), clamped to ≤ 1 so it only ever dampens — never boosts — saturation.
HWB — Lightening adds whiteness and removes blackness; darkening does the reverse.
RGB-family (rgb, srgb, display-p3, etc.) — All three channels interpolate independently toward their white-point (or 0 for darkening). Chroma drops naturally as channels converge.
colour-mix — Blends the colour with white or black via color-mix() in oklab. Acts as the reference curve that other spaces are calibrated against.
Aliases
For convenience, bg-lighten-* and bg-darken-* are provided as user-friendly aliases that map to the same underlying utilities:
| Alias | Equivalent |
|---|---|
bg-lighten-{amount} | bg-lightness-{amount} |
bg-lighten-{amount}/{space} | bg-lightness-{amount}/{space} |
bg-darken-{amount} | -bg-lightness-{amount} |
bg-darken-{amount}/{space} | -bg-lightness-{amount}/{space} |
Both forms produce identical CSS output. Use whichever reads better in your markup:
<!-- These are equivalent -->
<div class="bg-blue-500 bg-lightness-20">...</div>
<div class="bg-blue-500 bg-lighten-20">...</div>
<!-- These are equivalent -->
<div class="bg-blue-500 -bg-lightness-20">...</div>
<div class="bg-blue-500 bg-darken-20">...</div>