Lightness
Adjust the lightness of any color. Positive values lighten, negative values darken. Works across all color-accepting properties and all 17 color spaces.
A source color from a CSS variable must carry the color: hint
These utilities transform the color already on the element, so that color has to reach them. bg-(color:--brand) does; bg-(--brand) does not, because Tailwind will not infer a type from inside a var(). Without the hint the class still compiles and the color still appears, but the transform runs against an unset source: bg-* washes out to near-white, the other six surfaces go fully transparent. See Colors from CSS variables need a type hint.
Quick reference
| class | styles |
|---|---|
| bg-lightness-<number> | Lighten background by n% toward white |
| -bg-lightness-<number> | Darken background by n% toward black |
| bg-lightness-<number>/<space> | Lighten in a specific color space |
| -bg-lightness-<number>/<space> | Darken in a specific color space |
| bg-lighten-<number> | Alias for bg-lightness-<number> |
| bg-darken-<number> | Alias for -bg-lightness-<number> |
| bg-lightness-[<value>] | Lighten by an arbitrary amount |
| bg-lightness-(--<var>) | Lighten by a custom property |
| text-lightness-<number> | Lighten text color |
| fill-lightness-<number> | Lighten SVG fill |
| stroke-lightness-<number> | Lighten SVG stroke |
| outline-lightness-<number> | Lighten outline color |
Amount is 0–100, a percentage of the distance to white or black. bg-lightness-50 moves halfway to white; bg-lightness-100 reaches white exactly. Every surface takes the same negative prefix and /<space> modifier.
Examples
Lighten and darken a background
Set a base color with bg-<color>, then adjust:
<div class="bg-blue-500 bg-lightness-20">lighter</div>
<div class="bg-blue-500 -bg-lightness-40">darker</div>Lighten text
Same grammar, different surface:
<span class="text-blue-400 text-lightness-20">lighter text</span>Lighten a border
<div class="border-2 border-indigo-500 border-lightness-30">lighter border</div>Animate on hover
The lightness amount is a registered @property variable, so it composes with Tailwind's hover: prefix and transitions:
<div class="bg-blue-500 hover:bg-lightness-40 transition duration-700">hover to lighten</div>Full scale
Surfaces
The same utility works across every color-accepting property. Swap the prefix:
| Surface | Lighten | Darken | Aliases |
|---|---|---|---|
| Background | bg-lightness-<number> | -bg-lightness-<number> | bg-lighten-<number> bg-darken-<number> |
| Text | text-lightness-<number> | -text-lightness-<number> | text-lighten-<number> text-darken-<number> |
| Fill | fill-lightness-<number> | -fill-lightness-<number> | fill-lighten-<number> fill-darken-<number> |
| Stroke | stroke-lightness-<number> | -stroke-lightness-<number> | stroke-lighten-<number> stroke-darken-<number> |
| Outline | outline-lightness-<number> | -outline-lightness-<number> | outline-lighten-<number> outline-darken-<number> |
| Accent | accent-lightness-<number> | -accent-lightness-<number> | accent-lighten-<number> accent-darken-<number> |
| Border | border-lightness-<number> | -border-lightness-<number> | border-lighten-<number> border-darken-<number> |
Every surface has the alias pair, and most people reach for those first: bg-darken-20 says what it does without the reader having to notice a leading minus. See Aliases.
Color space support
Append a modifier to select the interpolation space: bg-lightness-30/oklch, bg-lightness-30/hsl, etc. Default is oklch. Each column below shows base → +20 → +40 → +60 → +80.
Perceptual polar
Perceptual rectangular
Legacy
RGB family
Device-independent
Color-mix
See the Color Spaces reference for what each space is and when to choose one.
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 color started. Each color space family handles this differently:
oklch, lch, oklab, lab. Lightness interpolates toward 1 (white) or 0 (black). Chroma holds constant through most of the range, tapering above 80 where the gamut narrows.
HSL. The gamut factor ratio min(l, 100−l) / min(new_l, 100−new_l) scales S, clamped to ≤ 1, so saturation dampens as lightness moves toward the extremes.
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 toward 0 for darkening.
color-mix. Blends the color with white or black via color-mix() in oklab. It is the reference curve the other spaces calibrate against.
Aliases
<surface>-lighten-* and <surface>-darken-* are convenience aliases:
| Alias | Equivalent |
|---|---|
bg-lighten-<number> | bg-lightness-<number> |
bg-darken-<number> | -bg-lightness-<number> |
text-lighten-<number> | text-lightness-<number> |
text-darken-<number> | -text-lightness-<number> |
fill-lighten-<number> | fill-lightness-<number> |
fill-darken-<number> | -fill-lightness-<number> |
stroke-lighten-<number> | stroke-lightness-<number> |
stroke-darken-<number> | -stroke-lightness-<number> |
outline-lighten-<number> | outline-lightness-<number> |
outline-darken-<number> | -outline-lightness-<number> |
accent-lighten-<number> | accent-lightness-<number> |
accent-darken-<number> | -accent-lightness-<number> |
border-lighten-<number> | border-lightness-<number> |
border-darken-<number> | -border-lightness-<number> |
Both forms produce identical CSS, and both take the /<space> modifier: border-darken-20/lab is -border-lightness-20/lab.
<!-- equivalent -->
<div class="bg-blue-500 bg-lightness-20">...</div>
<div class="bg-blue-500 bg-lighten-20">...</div>
<!-- equivalent -->
<div class="bg-blue-500 -bg-lightness-20">...</div>
<div class="bg-blue-500 bg-darken-20">...</div>Applying conditionally
Every lightness utility works with Tailwind's variant prefixes:
<div class="bg-blue-500 hover:bg-lightness-40 transition duration-300">
<div class="bg-blue-500 dark:bg-lightness-20">
<div class="bg-blue-500 md:bg-lightness-30"></div>
</div>
</div>Browser support
Built on CSS relative color syntax, registered custom properties, color-mix() and the abs() and sign() math functions. abs() and sign() were the last of those to reach Chromium, so they are what sets the floor here. Live status for each is at the foot of this page.
Rendering paths
Lightness utilities are plain CSS relative color syntax, and every modern browser evaluates them at render time. How it works covers the mechanism.
Import
<surface>-lightness-*, <surface>-lighten-* and <surface>-darken-* all ship in the color-transforms module, alongside saturation and hue rotation. Lightness, saturation and hue are one pipeline, so they publish as one entry.
Included in @import 'tw-jib-css', or on its own:
@import 'tw-jib-css/color-transforms';Baseline status
What these utilities are built on, live from the Web Platform Dashboard.