Muted interface states
Create softer colors for disabled controls, quiet borders, secondary badges, or low-emphasis UI elements.
Saturation and chroma
Tune vividness in HSL and OKLCH.
Enter a HEX color, adjust the amount of vividness, and compare how HSL saturation and OKLCH chroma produce different muted or intensified variants. Hue Codex previews Muted HSL, Base, HSL adjusted, and OKLCH adjusted swatches so you can tune UI colors, brand accents, charts, and color roles with more control.
Free color utility
Chroma
Inputs update live, exports are copy-ready, and the color math stays deterministic.
Vividness
Saturation and chroma
Instructions
- Enter a base color or use Random to test a new sample color.
- Adjust the Amount slider to reduce or increase the color's saturation and chroma.
- Review the generated swatches to compare muted, balanced, and more vivid options.
- Copy the saturation and chroma variants for palette tuning, CSS color roles, or design-system notes.
How it fits
From color value to usable system.
Hue Codex treats each color as part of a larger workflow: conversion, accessibility, palette roles, CSS syntax, shareable URLs, and production exports.
Deterministic math
Color conversion follows CSS Color 4 conventions, including D50 Lab/LCH, D65 OKLab/OKLCH, and WCAG contrast thresholds.
Readable outputs
Every result is formatted for clear reading, project notes, documentation, and assistive technology.
Free sharing
Palette URLs can be bookmarked and sent without an account, making color decisions easy to revisit.
Quick overview
Hue Codex Saturation and Chroma Adjuster is a free browser-based tool that mutes or intensifies a HEX color by comparing HSL saturation adjustment with OKLCH chroma adjustment. It previews Muted HSL, Base, HSL adjusted, and OKLCH adjusted variants and exports copy-ready HEX values.
- 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 HEX color and generates vividness variants in two color models. The HSL adjusted swatch scales HSL saturation while preserving the base hue and HSL lightness. The OKLCH adjusted swatch scales OKLCH chroma while preserving the base OKLCH lightness and hue.
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.
Saturation and chroma adjuster definition
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 HEX color 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 back to a displayable HEX color.
- 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.
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 previewed HEX value as the practical browser result, 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 HEX color by comparing HSL saturation changes with OKLCH chroma changes.
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 HEX values in a copy-ready format.