Why hwb() Turns a Colour Gray: White and Black Normalization

Read hue, whiteness and blackness separately

HWB is a CSS color function with a hue, a whiteness percentage and a blackness percentage. Hue chooses an underlying fully saturated hue. White and black modify that basis; they are not HSL saturation and lightness under new names. [1]

Write a complete modern value such as hwb(150 20% 10%). It is opaque in this example. Use space-separated components; HWB has no legacy comma-separated form. The demonstration stays within hue 0–360 degrees and white/black 0–100%, without missing components or a general CSS parser. [1]

Calculate a colored example below the boundary

At hue 150°, the pure hue has normalized sRGB components (0, 1, 0.5). With whiteness 0.2 and blackness 0.1, the remaining hue share is 1 − 0.2 − 0.1 = 0.7. Multiply each pure-hue component by 0.7 and add 0.2 to obtain (0.2, 0.9, 0.55). [1]

These are encoded sRGB coordinates, not relative luminance. Multiplication by 255 gives nominal channels 51, 229.5 and 140.25. Keep those calculated coordinates beside the declaration and actual returned browser string instead of assuming serialization must retain fractional bytes.

background-color: hwb(150 20% 10%);

Normalize white and black at or above 100%

If whiteness plus blackness is at least 1, all three color components become whiteness / (whiteness + blackness). Hue is powerless: changing it cannot affect this achromatic result. [1]

On a phone, scroll within the table. Focus its region and use arrow keys for keyboard reading.

A 60% white and 60% black input does not give a 60% gray. Normalize against 120%: 60/120 = 0.5. That complete calculation explains why the hue control can work correctly while the patch remains gray.

Try the boundary and a complete repair

Choose the 60/60 preset, then change hue. All nominal RGB components remain equal. To restore a hue contribution, reduce whiteness and/or blackness so the sum is below 100%. Restore the colored preset to inspect that other branch.

The example reports the requested declaration, nominal coordinates, whether this browser accepts the value, and its computed background. An input outside this demo’s supported range clears the patch and labels the limitation; it does not guess which input was intended.

Keep whiteness separate from alpha and readability

Whiteness is not alpha. An opaque gray HWB result still paints an opaque color; it does not reveal a white page underneath. Adding alpha in real CSS introduces a separate component and backdrop. The group-opacity guide handles a different layer operation.

The encoded gray coordinate is also not a contrast ratio. Check the actual adjacent colors with a supported calculation. Valid syntax can still be inappropriate for a text or component role.

When a hue slider appears broken, inspect white plus black before changing the hue again. Adjust the coordinate that removed the hue contribution. Then review the resulting color on its actual reading surface and meaningful states.

Try two complete HWB cases

These are constructed input cases, not measured palette preferences.