How deeply does Math for Web Design cover screen blend mode?

Defines the channel formula and connects it to CSS properties, without developing deeper color-perception mathematics.

Screen blend mode in Math for Web Design

The screen blend mode combines color channels using the complement of multiplying their complements, producing a result no darker than either input.

Screen lightens a backdrop by combining each source and backdrop channel with the complement of their product. The result is never darker than either input: white produces white, while black leaves the other color unchanged. section 7.6.4 section 7.8

Apply screen where a layered effect needs a brighter, unified appearance:

Use mix-blend-mode: screen when an element should blend with its parent background or overlapping content. section 7.6.3
Use background-blend-mode: screen when blending background layers inside one element. section 7.6.3
Combine screen with multiply to create a darker base followed by lighter highlights or a light color wash. section 7.6.3 section 7.6.4

Layered background

A container can blend a flamingo image with an orange color using multiply, then blend a texture above the result using screen: background-color: hsl(239 100% 50%); background-image: url("pink-flamingo.png"), url("texture.png"); background-blend-mode: screen, multiply. The calculated layering creates a nuanced composite with lighter highlights. section 7.6.3

Table 7.1 The separable blend modes

Blend mode	B(C_b, C_s)	Description
`normal`	`C`_s	The “no-blend” mode that leaves the source color as is. The result is just the source color replacing the backdrop in the overlap area.
`multiply`	`C`_b `* C`_s	Multiplies the source and backdrop channel values. Multiplying by black (0) yields black; multiplying by white (1) leaves the color unchanged. For every other value, the result is always darker than the original colors because multiplying any two values a and b in the range (0, 1) always returns a value smaller than both a and b, and with RGB colors, smaller values represent darker colors.
`screen`	`1 - (1 - C`_b`) * (1 - C`_s) `or C` _b `+` `C` _s `- (C` _b `* C` _s )	“Lights” the backdrop by blending as if projecting slides on a screen, making this blend mode essentially the opposite of multiply. Screening by white (1) produces white; screening by black (0) leaves the color unchanged. For every other value, the result is always lighter than the original colors.
`darken`	`min(C`_b`, C`_s`)`	The backdrop color is replaced with the source color wherever the source is darker; otherwise, the backdrop is left unchanged.
`lighten`	`max(C`_b`, C`_s`)`	The backdrop color is replaced with the source color wherever the source is lighter; otherwise, the backdrop is left unchanged.
`color-dodge`	`min(1, C`_b `/ (1 - C`_s`)`	Brightens the backdrop to the source color by decreasing contrast in darker areas. Returns 0 if the backdrop color is 0; returns 1 if the source color is 1.
`color-burn`	`min(1, (1 - C`_b`) / C`_s`)`	Darkens the backdrop to the source color by increasing contrast in dark areas. Returns 1 if the backdrop color is 1; returns 0 if the source color is 0.
`hard-light`	`if (C`_s `<= 0.5) C` _b `* 2C s else 2C` _b `+ 2C` _s `- 2C` _b `C` _s `- 1`	Applies a multiply or screen blend depending on the source color.
`soft-light`	`if (C`_s `<= 0.5) C` _b `- (1 - 2C` _s `) * C` _b `* (1 - 2C` _b `) else C` _b `+` `(2C` _s `- 1) * (D(C` _b ) `- C` _b `) where if (C` _b `<= 0.25)` `D(C` _b `) = ((16 - C` _b `— 12) * C` _b `+ 4)` `* C` _b `else D(C` _b `)= sqrt(C` _b `)`	A more complex, gentler version of hard-light. It also darkens or lightens based on source, but in a softer, less contrasty way.
`overlay`	`if (C`_b `<= 0.5)` `C` _s `* 2C` _b `else 2C` _s `+ 2C` _b `- 2C` _b `C` _s `- 1`	This is the inverse of the hard-light blend mode.
`difference`	`\|C`_b `- C`_s`\|`	The absolute value of the difference of the channel values, which creates high-contrast results since identical pixels become black (no difference) and very different pixels produce bright colors.
`exclusion`	`C`_b `+ C`_s `- 2C`_b`C`_s	Creates a lower contrast version of the difference mode.

Inspect the separable blend-mode table for the screen equation and its comparison with multiply. section 7.6.4

How Math for Web Design covers it

Related concepts

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