Saturation and chroma
Tune vividness in HSL and OKLCH.
Mute or intensify one color, compare HSL saturation with OKLCH chroma, and choose a controlled variant for interface, brand, chart, or token roles.
Free color utility
Chroma
Inputs update live, exports are copy-ready, and the color math stays deterministic.
Quick start
Starter presets
Start with a realistic setup, then adjust any input and watch the result update.
Valid input example: #4169E1 at 65% muted, 100% unchanged, or 135% vivid
If input is invalid: Invalid or incomplete color values are identified at the field, announced, and explained in the result area so they can be corrected without guesswork.
Choose a preset or edit the controls directly.
Vividness
Production saturation and chroma
Instructions
- Enter a base color or use Random color to test a new sample.
- Adjust the Amount slider below 100% to mute the color or above 100% to make it more vivid.
- Choose whether the selected result uses familiar HSL saturation or perceptual OKLCH chroma.
- Compare the generated variants before copying CSS, JSON, token-style output, or handoff notes.
Results
Vividness variants
Methodology and guides
How this tool calculates and connects.
Review the formulas, assumptions, edge cases, validation checks, caveats, and related color guidance behind Chroma.
Methodology pages
Related guides
How it fits
From vividness adjustment to controlled color variant.
Compare HSL saturation and OKLCH chroma changes, then choose a muted or intensified result that fits the color role and output context.
Compare two controls
HSL saturation and OKLCH chroma describe intensity differently, so their adjusted colors should be reviewed side by side.
Watch the whole appearance
Check hue, lightness, gamut behavior, and surrounding colors instead of choosing a variant from its vividness number alone.
Free sharing
Saturation and chroma adjustments can be bookmarked and shared without an account, making results easy to revisit.
Quick overview
Hue Codex Saturation and Chroma Adjuster is a free browser-based tool that mutes or intensifies a concrete CSS color by comparing HSL saturation adjustment with OKLCH chroma adjustment. It accepts alpha-capable HEX, RGB, HSL, HWB, Lab/LCH, OKLab/OKLCH, supported color() values, fixed color names, and transparent; the input is resolved to sRGB for adjustment and source alpha is preserved in every variant.
- Use the tool to compare HSL saturation and OKLCH chroma changes from the same base color.
- Lower amount values mute the color; higher values intensify the color.
- HSL saturation and OKLCH chroma can produce different visual results even when the same percentage is used.
- The Muted HSL swatch gives a quick low-saturation reference alongside the adjustable variants.
- Intensified OKLCH colors should be checked for gamut, contrast, and brand fit before production use.
What the Hue Codex saturation and chroma adjuster does
The Hue Codex saturation and chroma adjuster takes one concrete CSS color and generates vividness variants in two color models. The color is resolved to sRGB first. The HSL adjusted swatch scales HSL saturation while preserving base hue and HSL lightness; the OKLCH adjusted swatch scales OKLCH chroma while preserving base OKLCH lightness and hue. Both paths preserve source alpha.
The page also includes a Muted HSL reference and the unchanged Base color, making it easier to see how a color behaves when it is softened, kept steady, or intensified.
A saturation and chroma adjuster changes how vivid or muted a color appears by scaling saturation in HSL or chroma in OKLCH while keeping the color anchored to the original hue family.
Saturation vs chroma
Saturation and chroma both describe color intensity, but they come from different color models. HSL saturation is familiar and simple for CSS work. OKLCH chroma is designed around a more perceptual color model, which often makes it useful for modern interface palettes.
| Adjustment | What changes | When it helps |
|---|---|---|
| HSL saturation | Scales the saturation channel while preserving HSL hue and lightness. | Useful for quick CSS-style muting or vividness changes that are easy to reason about. |
| OKLCH chroma | Scales the chroma channel while preserving OKLCH lightness and hue. | Useful when visual balance and perceptual consistency matter in UI palettes. |
| Muted HSL | Shows a fixed low-saturation HSL variant for comparison. | Useful as a quick reference for subdued states, disabled colors, or softer accents. |
| Base | Keeps the original resolved color and alpha unchanged. | Useful as the anchor when deciding whether an adjusted color still belongs in the palette. |
How the amount control works
The amount slider ranges from 0% to 160%. At 100%, the adjusted variants stay closest to the base color intensity. Values below 100% mute the color. Values above 100% make the color more vivid.
For HSL, Hue Codex multiplies the base saturation by the amount and clamps it to the valid HSL range. For OKLCH, it multiplies the base chroma by the amount, then converts the result to a displayable sRGB color. The source alpha is attached to either result.
- Use 0% to test a very low-intensity variant.
- Use 45% to 75% for softer UI accents, muted charts, or disabled-state exploration.
- Use 100% to compare the adjusted models near the original color.
- Use 120% to 160% to explore stronger accents, then check gamut and contrast.
Best uses for saturation and chroma adjustment
Vividness adjustment is useful when a color has the right hue but the wrong strength. Instead of changing the whole palette, you can soften or intensify the base color while keeping its identity recognizable.
Muted interface states
Create softer colors for disabled controls, quiet borders, secondary badges, or low-emphasis UI elements.
Vivid accent exploration
Increase saturation or chroma to test stronger calls to action, chart highlights, or brand accent variants.
Palette balancing
Compare HSL and OKLCH results when one color feels too loud or too dull beside the rest of a palette.
Color-role drafting
Copy the generated HEX values into token drafts, palette notes, or design handoff documentation.
Saturation and chroma caveats
More vivid is not always more useful. Increasing saturation or chroma can reduce readability, create visual vibration, or push a color outside the feel of a brand system.
OKLCH chroma adjustments can move toward colors that are hard to represent in sRGB. Treat the displayed sRGB value as a practical fallback, retain its alpha where present, and check important colors with contrast and gamut tools before shipping them.
Quick answers
Chroma FAQ
What is the Hue Codex saturation and chroma adjuster?
Hue Codex Saturation and Chroma Adjuster is a free browser-based tool that mutes or intensifies a concrete CSS color by comparing HSL saturation changes with OKLCH chroma changes while preserving source alpha.
What is color saturation?
Color saturation describes how intense or gray a color appears in models such as HSL. Lower saturation looks more muted, while higher saturation looks more vivid.
What is color chroma?
Color chroma describes colorfulness in models such as OKLCH. Higher chroma usually appears more vivid, while lower chroma appears more subdued.
What is the difference between HSL saturation and OKLCH chroma?
HSL saturation is a familiar CSS-oriented channel that is easy to adjust, while OKLCH chroma belongs to a more perceptual color model that can produce more visually balanced palette changes.
What does the amount slider control?
The amount slider scales vividness from 0% to 160%. Values below 100% mute the color, 100% stays near the base intensity, and values above 100% intensify the color.
Why do the HSL and OKLCH adjusted colors look different?
They use different color models. HSL changes saturation while preserving HSL lightness and hue, while OKLCH changes chroma while preserving OKLCH lightness and hue.
Can intensified colors affect accessibility?
Yes. Changing saturation or chroma can change perceived readability and contrast. Check important text, icon, and control colors against their real backgrounds.
Can I copy the adjusted colors?
Yes. The tool exports the Muted HSL, Base, HSL adjusted, and OKLCH adjusted values as CSS and offers HEX or eight-digit HEX copies so alpha is retained.