How deeply does Web Design Playground cover brightness?

Defines luminance on a 0–100% scale and applies it in hsl(), without developing deeper color theory.

Brightness

A measure of the brightness of a color or light source as perceived or represented in a color model.

Brightness describes how light or dark a color appears. In the HSL color model, this part is called luminance, also known as lightness or luminosity. section 17.1

Think of luminance as a dimmer switch for a color:

0% luminance produces black. section 17.1
Higher percentages make the color lighter. section 17.1
100% luminance produces white. section 17.1

Adjusting brightness in CSS

The hsl() function writes a color as hue, saturation, and luminance. For example, hsl(270, 100%, 50%) uses a purple hue at full saturation and medium brightness. Raise the final percentage to make it lighter or lower it to make it darker: hsl(270, 100%, 80%). section 17.6

Name	Red	Green	Blue	Color
Red	255	0	0
Green	0	255	0
Blue	0	0	255
Yellow	255	255	0
Magenta	255	0	255
Cyan	0	255	255
Black	0	0	0
Gray	128	128	128
White	255	255	255

Compare RGB values for black, gray, white, and blended colors to see how represented colors differ in brightness. section 17.1

How Web Design Playground covers it

liveBook manning.com

Read Web Design Playground on liveBook Get the book at manning.com

Also explained in

liveBook manning.com

Everyday Data VisualizationThe HSB color coordinate representing the apparent illumination of a color, with zero producing black and the maximum producing the brightest result.
liveBook manning.com

Math for Web DesignPerceived brightness is the visual intensity or lightness of a color or visual stimulus as experienced by human vision.
liveBook manning.com

CSS in Depth, Second EditionLuminosity is the perceived lightness or brightness component of a color.
liveBook manning.com

Web Components in ActionBrightness is the color attribute describing the perceived lightness of a color.
liveBook manning.com

Web Design Playground, Second EditionLightness is the degree to which a color appears light or dark, commonly expressed as a percentage.
liveBook manning.com

Design for DevelopersBrightness is the perceived lightness level of a color.

Compare how 7 books explain brightness →

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.

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground. The section links point to the parts of the book it draws on.