Brightness describes how light or dark a color appears. In CSS, it matters both when choosing a color and when preserving the light-and-dark detail of an image while changing its hue. section 11.2.2 section 13.3.1
HSL exposes lightness as its third value. In hsl(198deg 73% 46%), the 46% lightness helps produce a rich blue. Raising lightness moves the color toward white; lowering it moves toward black. The endpoints, 100% and 0%, produce white and black. section 11.2.2
For a palette of related colors, OKLCH makes lightness visible alongside chroma and hue. Colors with nearly the same hue can have different lightness values. To add a lighter green, try oklch(85% 0.12 165deg), then fine-tune it in browser DevTools. Provide an older-format fallback where target-browser support requires one. section 11.3.1
Tint an image without losing its shading
Set a blue background color behind an image and use background-blend-mode: luminosity. The result takes hue and saturation from the blue background, but luminosity—and thus brightness and contrast—from the image. Layer order matters: if a blue gradient sits in front instead, use the color blend mode to obtain the corresponding result. section 13.3.1
Listing 13.15 Blending a background image with the background color’s hue
.blend {
min-height: 70vmin;
background-image: url("images/bear.jpg");
background-color: #148; #1
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-blend-mode: luminosity; #2
}
The CSS listing places a background image over a blue background color and applies luminosity blending. section 13.3.1
