Brightness
Brightness is the perceived or measured intensity or lightness of a color, image, visual stimulus, or light source.
Everyday Data Visualization
The HSB color coordinate representing the apparent illumination of a color, with zero producing black and the maximum producing the brightest result.
- How it is used
- Supports color selection, palette construction, contrast, and visual hierarchy in data visualizations.
- How deep it goes
- Defines HSB brightness through endpoints and saturation interactions, then contrasts its behavior with HSL lightness.
- Examples
- Uses a lights-off paint-chip analogy, saturation-brightness grids, sequential gradients, and a revised sunset-derived categorical palette.
- What you can do after
- Apply it via color pickers to tune emphasis, contrast, and distinguishability in palettes and typography.
Math for Web Design
Perceived brightness is the visual intensity or lightness of a color or visual stimulus as experienced by human vision.
- How it is used
- Supports grayscale conversion, color-scale construction, dark-mode transformations, and contrast-based readability decisions.
- How deep it goes
- Defines lightness controls, derives weighted grayscale brightness, and applies lightness inversion without deriving perceptual color-space internals.
- Examples
- Uses weighted RGB grayscale conversion, HSL and OKLCH inversion, and fixed-hue OKLCH lightness scales.
- What you can do after
- Apply it via CSS and JavaScript to generate grayscale colors, controlled scales, and starting dark-mode palette transformations.
CSS in Depth, Second Edition
Luminosity is the perceived lightness or brightness component of a color.
- How it is used
- Uses brightness to choose lighter or darker CSS colors and to retain image shading when applying a tint.
- How deep it goes
- Explains HSL lightness values and works through luminosity blending, including how reversing layer order changes the required blend mode.
- Examples
- Shows a blue HSL value, a lighter OKLCH green, and a photograph tinted blue with background-blend-mode: luminosity.
- What you can do after
- Apply it via HSL or OKLCH to adjust color lightness, or via CSS blend modes to tint an image while retaining its shading.
Web Components in Action
Brightness is the color attribute describing the perceived lightness of a color.
- How it is used
- Uses vertical movement in a saturation-and-brightness picker to let users choose a color’s lightness.
- How deep it goes
- Defines perceived lightness and implements it as a normalized y-axis percentage, without discussing color-model internals.
- Examples
- Demonstrates brightness with a two-dimensional picker using gradient overlays and a red background.
- What you can do after
- Build it from scratch as the vertical control of a coordinate-picker Web Component.
Web Design Playground, Second Edition
Lightness is the degree to which a color appears light or dark, commonly expressed as a percentage.
- How it is used
- Controls how light or dark CSS colors appear when defining colors with HSL values.
- How deep it goes
- Defines lightness through its 0% black to 100% white range and demonstrates it as hsl()’s third component.
- Examples
- Uses dark purple h1 text, a lightness color-wheel figure, and a Color Chooser with vertical lightness adjustment.
- What you can do after
- Apply it via CSS hsl() or the Color Chooser to make a selected hue lighter or darker.
Read how Web Design Playground, Second Edition explains brightness →
Design for Developers
Brightness is the perceived lightness level of a color.
- How it is used
- Uses brightness to build color palettes, establish interface emphasis, and support readable contrast.
- How deep it goes
- Defines lightness, demonstrates palette adjustments, and notes perceptual differences across hues without detailing color-space internals.
- Examples
- Uses an HSB travel landing-page palette with violet-blue tones, gray values, text overlays, buttons, headlines, and checked controls.
- What you can do after
- Apply brightness through HSB or HSL controls to create shades, tints, hierarchy, and more readable interface color combinations.
Web Design Playground
A measure of the brightness of a color or light source as perceived or represented in a color model.
- How it is used
- Uses luminance to control how light or dark a color appears when specifying web colors.
- How deep it goes
- Defines luminance on a 0–100% scale and applies it in hsl(), without developing deeper color theory.
- Examples
- Uses black, white, gray, blended RGB colors, and purple hsl() values to illustrate brightness.
- What you can do after
- Apply it via CSS hsl() by choosing a luminance percentage between 0 and 100.
Related concepts
- HSL methodpart of · The HSL method represents colors using hue, saturation, and lightness within a color model or notation system.
- contrast ratiomeasured by · A contrast ratio is the numerical ratio of the higher relative luminance to the lower relative luminance of two colors.
- dimensionconfigured by · A dimension is an independent coordinate, measurable axis, or descriptive attribute used to represent, locate, or analyze something.
- LAB color spacepart of · The CIELAB color space is a device-independent, approximately perceptually uniform model representing color by lightness and opponent-color coordinates.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.