ما هو الكروما؟ شدة اللون ما وراء التشبع

When most people want to describe a vivid color versus a dull one, they reach for the word "saturation." But in modern color science, particularly in the color spaces that power today's CSS and professional design tools, a more precise term does that job: chroma. Chroma and saturation are closely related, yet they measure different things and behave very differently when you are building color scales or working across multiple hues. Understanding the distinction gives you a sharper instrument for making color decisions.

Chroma Defined in Color Science

Chroma is the absolute colorfulness of a color — how far it sits from a neutral gray of the same lightness. Think of it as the pure, measurable amount of "color-ness" present, independent of how dark or light the color is.

The term comes from the Greek word chroma, meaning color or complexion. In color science, it was formalized by Albert Munsell in his Munsell Color System in the early twentieth century. Munsell organized colors along three axes: hue (the specific color family), value (lightness), and chroma (the distance from gray). He noticed that vivid colors at different lightness levels could not be compared using a single "saturation" measure — a very light vivid yellow and a dark vivid green have entirely different chroma values even if they both appear "fully saturated" to the eye.

In modern usage, chroma appears as a dimension in several perceptual color spaces:

• CIE LCH: Lightness, Chroma, Hue — a cylindrical version of CIELAB
• OKLCH: Lightness, Chroma, Hue — a cylindrical version of Oklab, optimized for perceptual uniformity
• Munsell: Value, Chroma, Hue — the original perceptual system

In all of these systems, chroma is expressed as a number starting at 0 (perfectly neutral gray) and increasing as the color becomes more vivid. Unlike saturation in HSL, chroma has no fixed upper bound — the maximum achievable chroma depends on the hue and the lightness level, as well as the capabilities of the display or print system being used.

Chroma vs Saturation: Key Differences

Saturation and chroma are both about color intensity, but they measure it in fundamentally different ways.

Saturation in HSL is a relative measure. It asks: how vivid is this color compared to the maximum possible vividness at this lightness level? This is always expressed as a percentage from 0% (pure gray) to 100% (maximum vividness for this hue at this lightness). The problem is that "maximum vividness" varies wildly depending on the hue and lightness — so 100% saturation on a light yellow and 100% saturation on a dark purple represent very different absolute amounts of colorfulness.

Chroma in LCH or OKLCH is an absolute measure. It asks: how much total colorfulness is present, measured in perceptual units? A chroma of 0.15 in OKLCH means the same absolute amount of colorfulness regardless of whether the hue is red, blue, or green, and regardless of how light or dark the color is.

Consider two colors that are often described as "fully saturated":

• A vivid yellow like #FFFF00 — in OKLCH: approximately oklch(0.97 0.21 108)
• A vivid blue like #0000FF — in OKLCH: approximately oklch(0.45 0.31 265)

Both are at 100% HSL saturation. But their OKLCH chroma values are 0.21 and 0.31 respectively — significantly different. The blue has higher absolute chroma. This is why when you reduce the chroma of both equally in OKLCH, you get colors that look equally muted to the human eye. If you reduced the saturation equally in HSL, the perceptual result would be inconsistent.

A Practical Summary

Chroma in LCH and OKLCH Color Spaces

Both LCH and OKLCH use chroma as their measure of colorfulness. OKLCH is the newer and more perceptually accurate of the two.

LCH

LCH (Lightness, Chroma, Hue) is a cylindrical rearrangement of the CIELAB color space, which was designed by the International Commission on Illumination (CIE) in 1976. CIELAB and LCH were specifically designed to be perceptually uniform, meaning that equal numerical differences in the color space correspond to equal-looking differences to the human eye.

In LCH, chroma values typically range from 0 to about 150 for colors within the visible spectrum, though the sRGB gamut restricts practical values to around 0–50 depending on hue and lightness. The CSS lch() function uses this scale:

/* LCH: a vivid orange */
color: lch(65 45 45);

/* LCH: a muted version of the same hue */
color: lch(65 15 45);

OKLCH

OKLCH is a cylindrical version of the Oklab color space, designed by Björn Ottosson in 2020 as an improvement on CIELAB and LCH. While LCH has excellent perceptual uniformity overall, it has some hue-shifting artifacts when colors are interpolated — particularly in the blue range. OKLCH fixes these artifacts and produces more visually stable gradients and color scales.

In OKLCH, chroma values are expressed on a smaller scale — typically 0 to about 0.4 for colors within the Display P3 gamut, with sRGB colors generally falling between 0 and approximately 0.33. The CSS syntax is:

/* OKLCH: a vivid red-orange */
color: oklch(0.63 0.24 27);

/* OKLCH: a muted, pastel version */
color: oklch(0.85 0.08 27);

/* OKLCH: a fully neutral gray (zero chroma) */
color: oklch(0.5 0 0);

You can convert any hex color to its OKLCH chroma value using the Color Converter. Paste a hex code and the converter shows L, C, and H values that give you a precise measurement of that color's absolute intensity.

Why Chroma Values Have No Fixed Maximum

The maximum achievable chroma for any given color depends on the intersection of three factors: hue, lightness, and the gamut of the output device. This is why the chroma axis in OKLCH does not have a universal ceiling.

For example, in the OKLCH green region (hue around 140°), the sRGB gamut allows chroma up to approximately 0.29 at mid-lightness. In the yellow-green region, the maximum sRGB chroma is lower — about 0.21 — because the sRGB primaries simply cannot produce very saturated yellow-greens. If you use a wider gamut like Display P3, those ceilings are higher across most hues.

Why Chroma Matters for Design and Palettes

Understanding chroma unlocks better control over color palette consistency. The core insight is this: when you want two colors to appear equally vivid, you need to give them equal chroma — not equal saturation.

Equal-Chroma Color Harmonies

When building a palette of several hues meant to work together harmoniously — say, a primary blue, a secondary orange, and a tertiary green — you can lock the chroma value across all three. At the same lightness and chroma, three colors with different hues will appear equally vivid, making them feel like a cohesive family rather than a random selection where one color dominates the others.

/* Three brand colors at equal chroma (0.14) and equal lightness (0.65) */
--brand-blue:   oklch(0.65 0.14 260);
--brand-orange: oklch(0.65 0.14 50);
--brand-green:  oklch(0.65 0.14 145);

Achieving this with HSL saturation is impossible — each hue would need a different saturation value to reach the same perceived vividness, requiring manual tuning by eye.

Chroma Curves in Color Scales

When generating a tint-to-shade scale for a single hue, chroma does not remain constant — it naturally rises and then falls as you move from pure white through the vivid mid-range to pure black. This is because colors near white and near black cannot sustain high chroma; they are inherently close to neutral.

Understanding this means you can design more natural-looking scales by allowing chroma to follow a gentle arc rather than keeping it artificially flat:

/* A blue scale with a realistic chroma arc */
--blue-50:  oklch(0.97 0.02 260);  /* Near white, low chroma */
--blue-200: oklch(0.88 0.07 260);  /* Light, gentle chroma */
--blue-400: oklch(0.72 0.14 260);  /* Light-mid, building chroma */
--blue-500: oklch(0.60 0.16 260);  /* Mid tone, peak chroma */
--blue-700: oklch(0.42 0.14 260);  /* Dark, chroma easing off */
--blue-900: oklch(0.25 0.07 260);  /* Near black, low chroma */

This produces a scale that looks perceptually natural from light to dark, because it mirrors how chroma behaves in the real world.

Chroma and Accessibility

Color accessibility in UI design typically focuses on contrast ratio, but chroma plays a supporting role. Very low-chroma colors (near gray) provide less visual differentiation when used to encode meaning — for example, in charts or maps. If a user has reduced color sensitivity (as in color vision deficiency), a palette with adequately varied chroma differences helps maintain legibility even when hue differences are less perceptible.

Use the Palette Generator to build harmonies starting from a specific hue, then adjust chroma values to find the right balance of vividness and restraint.

Measuring and Comparing Chroma Values

Here is a reference table of common web colors with their OKLCH chroma values, giving you a sense of the scale:

You can verify these values for any color by using the Color Converter to convert a hex code to OKLCH format.

When High Chroma Helps

High chroma colors — those with values of 0.2 and above in OKLCH — are appropriate for:

• Brand primaries that need to be distinctive and memorable
• Call-to-action buttons that must stand out against neutral interfaces
• Accent colors in data visualization where color carries meaning
• Interactive elements that benefit from clearly signaling their interactivity

When Low Chroma Helps

Low chroma colors — below 0.08 in OKLCH — are appropriate for:

• Backgrounds and surface colors that should not compete with content
• Neutral text colors (near-black body text is low-chroma dark gray)
• Secondary UI elements like borders, dividers, and inactive states
• Sophisticated, editorial-style palettes where restraint signals quality

Key Takeaways

• Chroma is an absolute measure of colorfulness — how far a color sits from neutral gray of the same lightness. Saturation in HSL is a relative measure that is not consistent across hues or lightness levels.
• LCH and OKLCH are the main CSS color formats that use chroma. OKLCH is preferred in 2024+ because it fixes hue-shifting artifacts that LCH inherits from CIELAB in the blue range.
• Chroma has no fixed maximum — the upper limit depends on the hue, the lightness, and the output gamut. For sRGB, most hues cap out between 0.25 and 0.40 in OKLCH; Display P3 allows somewhat higher values.
• Equal chroma across hues produces palettes where all colors appear equally vivid — something impossible to achieve with equal HSL saturation.
• Chroma arcs naturally in color scales — it is highest at mid-lightness and drops toward pure white and pure black. Designing scales that follow this arc look more natural.
• Use the Color Converter to find the OKLCH chroma value of any hex color, and the Palette Generator to explore how chroma changes across harmonies and scales.