Four blue swatches on the same gray: A light, B dark, C muted, D higher chroma.

--- title: Hue, Lightness, and Chroma url: https://doc.liz6.com/en/general-education/visual-foundations/05-hue-value-and-chroma locale: en area: general-education tags: - General Education - Visual Foundations - General education - Visual foundations date: 2026-09-10 modified: 2026-09-10 description: “Make it bluer,” “the color is too heavy,” and “something softer” are familiar requests, but they are ambiguous. You may want a darker color while someone else increases its vividness. --- # Hue, Lightness, and Chroma “Make it bluer,” “the color is too heavy,” and “something softer” are familiar requests, but they are ambiguous. You may want a darker color while someone else increases its vividness. **Separate hue, lightness and chroma before deciding how to change a color.** This lesson explores those directions individually. The aim is accurate description, not memorizing a color wheel. ## What differs between four blues? Imagine a pale blue shirt, a dark blue book cover, vivid blue plastic and a muted blue wall. They can all belong near blue while looking quite different. The four swatches share a background. A and B mainly demonstrate a lightness change; C and D mainly demonstrate a change from muted to more colorful. Calling them “different blues” is valid, but you can be more specific. | Attribute | An everyday starting point | A possible confusion | | --- | --- | --- | | Hue | What kind of color: for example, blue leaning toward cyan or purple | “More blue” might mean a hue change or a chroma change | | Lightness | How light or dark a color appears | Pale blue need not be more vivid than dark blue | | Chroma | Departure from a neutral at the same lightness | More colorful does not necessarily mean lighter | These terms belong within specified color systems. Chroma and saturation are not interchangeable quantities in every system. ## Change one direction at a time The experiment uses OKLCH: L for lightness, C for chroma and H for hue. This is a representation that supports description and calculation. We use only a limited, displayable region around blue. **Separate three kinds of color change** The swatch uses OKLCH hue H, lightness L and chroma C. Move one slider at a time. Controls stay in a displayable region around blue. The neutral comparison retains L and sets C to zero; it is not a grayscale conversion of a screenshot. Raise L alone. Restore it, then raise C alone. Compare the different changes before adjusting H toward neighboring hues. The neutral comparison sets C to zero while retaining L. It illustrates lightness within this representation. **It is neither a physical measurement of screen luminance nor proof that every observer will see two colors as equally light.** At C = 0, changing H has no effect because the result is neutral. ## Why not just use a color picker's “brightness”? Color pickers may use HSL, HSV or other representations. HSL L, HSV V and OKLCH L are different coordinates. Similar names do not make their values interchangeable. Setting two different hues to 50% HSL lightness, for example, does not guarantee that they look equally light. Identify the system before interpreting the number. You do not need to memorize conversion formulas here; the experiment converts its OKLCH values to sRGB for display. ## Worked example: “this blue feels too heavy”—what should change? Suppose you are choosing a cup color. “Too heavy” may mean too dark, too vivid, or simply too large in the composition. Separate these possibilities before moving three sliders at once. Only the cup body and handle change color. Background, leaf, shapes and positions stay fixed. The colors come from one OKLCH conversion: A uses L=0.53, C=0.07, H=240°; B changes only L to 0.75; C changes only C to 0.018; D changes only H to 185°. The coordinates isolate directions; memorizing them is unnecessary. **A to B: if the problem is darkness, try raising lightness.** The cup becomes lighter and its value difference from the pale background decreases. It may feel lighter in weight, but its boundary can become less distinct. Check the whole picture, not only the isolated picker swatch. **A to C: if it is too insistent, try reducing chroma.** The blue moves toward gray without raising its lightness coordinate. Gray-blue is not the same as pale blue. Reducing every color's chroma does not automatically produce hierarchy. **A to D: “a little greener” asks for hue change.** This changes color-family direction. If the actual problem is unreadable type, moving around a hue circle while preserving similar values may leave that problem intact. There is no universal ranking of these cups. A pale product image might use B, a more restrained illustration might try C, and a palette related to foliage might try D. Attach an intention and a surrounding context to each judgment. ## Make warm, cool and neutral descriptions concrete Red, orange and yellow are commonly grouped as warmer families, with blue and some blue-greens described as cooler. Local comparison still matters: violet-leaning and green-leaning blues can produce different temperature judgments. The word “blue” alone cannot explain an image's character. In a strict color model, neutral can mean the achromatic axis. Design conversation also calls low-chroma beige, taupe and blue-gray “neutrals.” They may retain a hue bias. Cream looks warmer next to a cool white, and blue-gray more blue beside cream. Muted backgrounds still affect their neighbors. A practical start is to choose a warmer or cooler low-chroma ground, then place candidate subject colors beside it. This is more reliable than assuming all whites are equivalent or that neutrals have no effect. ## Why do different sources name different primary colors? Screens mainly combine red, green and blue light. Color printing commonly uses cyan, magenta and yellow with black ink. Traditional painting instruction often uses a red–yellow–blue wheel, useful for comparing color families but not a precise mixing specification for every display or pigment. Thus “what complements blue?” first requires a wheel or mixing system. A blue–orange design contrast usually refers to opposing families on a traditional wheel. Inverting each RGB channel is a different numerical operation. The shared word “complement” does not make the results identical. Pigment mixtures also depend on the actual colorants, transparency and ground. Adjacent screen swatches do not simulate paint mixing. For physical paint, make small mixing samples rather than treating this screen exercise as a recipe. ## A reusable selection sequence Write a concrete target: “make the cup lighter than the leaf while retaining its blue direction.” Change the relevant coordinate, compare old and new on the same ground, then check boundary and hierarchy. If the problem persists, consider whether area, position or neighboring colors should change instead. Matching a real product additionally involves display condition, illumination, color management and physical proofing. These swatches develop a judgment method; they do not replace production color checks. The next lesson applies that method to complete palettes. ## Try packaging: does a hue change repair the edge? Make the package boundary clearer against a pale ground while keeping a muted color. A is the start. B changes blue toward green at fixed OKLCH lightness and chroma. C lowers lightness at fixed hue and chroma. Choose a first revision and describe its cost.

Decide first, then reveal the explanation

C directly separates the package from the ground in value, at the cost of a darker package. B changes the hue family while keeping the pale relationship. If branding requires a pale package, changing its immediate background or adding a border could be alternatives under different constraints. The problem is the outer boundary; the dark TEA text is already readable.

## Two short checks **Situation one:** You want a button color to look more vivid without deliberately changing how light it is. Which direction would you try first?

Show a possible explanation

Within a specified color system, keep lightness and hue fixed and try increasing chroma. Then check the result against the actual background. The display gamut may limit the available range, and tool values do not replace observation.

**Situation two:** A gray has C = 0. Changing H produces no visible change. Is the control broken?

Show a possible explanation

No. A neutral has no visible hue direction. In this representation, H does not affect the output when C = 0. Add a little chroma before comparing hue changes.

## Return to a clear description Try “lighter,” “more purple,” or “more vivid” when comparing colors. Specify one attribute first, then consider how several attributes change together. Optional practice: gather clothes or packaging from one hue region. Order them by lightness, then by muted-to-vivid appearance. The two orders need not match. Further reading: [Colour Literacy: Color Attributes](https://colourliteracy.org/colour-attributes2), [CSS Color 4: Oklab and OkLCh](https://www.w3.org/TR/css-color-4/#ok-lab). Adding light and mixing pigments are different processes; these screen swatches do not teach paint recipes.