huetone.ardov.me

Huetone uses LCH because it is a perceptually uniform color space: equal numeric changes in lightness, chroma, and hue correspond to roughly equal visual changes. That makes palettes predictable and helps with accessibility. If you have ever built a scale in HSL and watched yellow look far brighter than blue at the same "lightness," LCH is the fix. The trade-off is that LCH values are less familiar than hex codes and need conversion before use in most design tools.

The problem with HSL and RGB for palettes

HSL and RGB are device-oriented, not perception-oriented. Their numbers describe how to mix light, not how a person will see the result.

• In HSL, hsl(60, 100%, 50%) (yellow) and hsl(240, 100%, 50%) (blue) share the same lightness value, yet yellow appears dramatically brighter.
• In RGB, adding equal amounts to each channel does not produce an even step in perceived brightness.

The practical consequence: a "50 to 900" scale built by stepping HSL lightness produces uneven jumps. Some steps look nearly identical; others look like a different color entirely. You end up hand-tuning every swatch, and the scale breaks the moment you change the base hue.

What LCH changes

LCH stands for Lightness, Chroma, Hue. It is derived from CIELAB, a color space designed so that distances between colors match perceived differences.

Because lightness is perceptual, you can hold L constant across several hues and get colors that feel equally bright. That is the property HSL lacks.

How this produces consistent scales

A predictable scale usually fixes hue, then moves lightness in even steps, and adjusts chroma so the ends do not clip.

For example, to build a 10-step blue scale:

1. Pick a hue angle for blue and keep it fixed.
2. Choose a lightness range, such as L 95 down to L 20.
3. Step L evenly across the range.
4. Reduce chroma near the light and dark ends, because very light and very dark colors cannot hold high chroma without clipping.

The result is a ramp where each step reads as "one step darker," not "a slightly different color." Change the hue angle and the same structure holds, which is what makes the approach reusable across a whole design system.

The accessibility connection

Contrast ratios are computed from relative luminance, which tracks perceived brightness. Since LCH lightness is perceptual, it correlates more directly with how contrast will read than HSL lightness does.

That means when you space steps by L, you have a better starting point for checking text-on-background pairs against contrast requirements. It does not replace a contrast check — you still need to verify actual ratios — but it removes the guesswork of "these two swatches look different enough, right?"

When LCH is the right choice, and when it is not

Use LCH when:

• You are generating a systematic scale that must stay consistent across many hues.
• You want lightness steps that look even without manual correction.
• You are building tokens meant to be reused and re-themed.

Be cautious when:

• Your target tooling or handoff format expects hex or RGB only — you will need conversion, and out-of-gamut colors must be mapped back into sRGB.
• You need exact brand colors, which are usually specified in a fixed space and should not be re-derived.

Practical takeaway

LCH is not a stylistic preference; it is a structural one. It makes the numbers match what people see, which is exactly what a palette needs to be predictable and to support accessible contrast. If your scales keep needing manual fixes, the color space is usually the reason.

Huetone is a browser-based tool for building color palettes in the LCH color space, aimed at people who want predictable, accessible color systems rather than one-off swatches. It fits designers and developers who need a repeatable way to generate tints, shades, and contrast-checked combinations. Before committing to it, check three things: whether your target browsers and design tools handle LCH colors, whether the generated palette survives real UI conditions (text sizes, backgrounds, states), and whether you need export formats or integrations the tool may not provide.

Who Huetone is for

• Designers building a color system, not a single palette. If you need a scale that stays perceptually even from light to dark, LCH-based generation is more predictable than eyeballing hex values.
• Developers who want accessible defaults. The tool's stated purpose is producing palettes with accessibility in mind, so it reduces the manual work of checking contrast ratios pair by pair.
• Teams that need consistent naming and reuse. A generated scale gives you a shared reference (e.g., a step per lightness level) instead of ad-hoc colors picked per screen.
• Anyone who has struggled with HSL. HSL lightness does not match perceived brightness — yellow and blue at the same HSL lightness look very different. LCH separates lightness, chroma, and hue so you can adjust one dimension without distorting the others.

It is a weaker fit if you only need a couple of brand colors, if your pipeline is locked to a specific design-tool plugin, or if you cannot use LCH/oklch values in your output.

Why LCH matters for accessibility

Contrast is a function of relative luminance, not of how "light" a color looks in HSL. Because LCH's L component tracks perceived lightness more closely, moving a color along L tends to move its contrast in a more monotonic way. That makes it easier to reason about which steps will pass a contrast threshold against a given background.

Practical consequence: you can build a scale where each step is a known distance in lightness, then test a few representative pairs instead of every combination.

What to check before you rely on it

1. Browser and platform support for LCH

LCH (and the related oklch()) is a CSS color function with uneven support across older browsers. If your product must run on legacy browsers or embedded webviews, verify support before shipping LCH values directly. A common workaround is to generate in LCH and export to sRGB hex or rgb() for production, keeping LCH as the authoring space.

2. Whether the output matches your toolchain

Check that the palette you generate can move into your design tool and codebase without lossy conversion. Wide-gamut LCH colors can fall outside sRGB; when converted, they may shift. Decide up front whether you are targeting sRGB only or a wider gamut.

3. Contrast in context, not in isolation

A palette that passes contrast checks in the tool can still fail in the interface. Text size, font weight, background images, hover and disabled states, and dark mode all change the effective contrast. Treat the generated palette as a starting point and validate it in the actual component.

4. Copy and export behavior

The tool exposes a palette you can copy (the page references an "Example Palette" with a copy action). Confirm what format you get — CSS variables, hex list, or something else — and whether it matches how your codebase consumes tokens. If you need JSON, Tailwind config, or design-tool sync, check whether that exists or whether you will convert manually.

5. Naming and scale conventions

Decide how many steps you need and what they mean (e.g., 50–900, or semantic names like surface, border, text). A tool generates values; it does not decide your token architecture. Settle that first so the palette maps cleanly onto your system.

A quick decision guide

A concrete workflow to try

1. Define the number of steps and the roles you need (background, surface, border, text, accent).
2. Generate a scale in LCH, adjusting L for the steps and keeping hue stable.
3. Copy the palette out and map each value to a token name.
4. Test representative pairs — body text on background, muted text on surface, accent on both — against your contrast target.
5. Convert to your production color format if LCH support is a concern, and re-check that the conversion did not shift the values meaningfully.
6. Re-test in dark mode and in interactive states.

The step most people skip is 6. Contrast failures usually show up in states and themes, not in the default light view.

Huetone is a browser-based color palette tool that uses the LCH color space to help you build palettes that are predictable and accessible. It is aimed at designers and front-end developers who need consistent color scales rather than one-off swatches. The site's own description states this purpose directly: "Use LCH color space to come up with predictable and accessible color palettes." If you only need a quick set of hex codes, a simpler picker will do; if you need a palette where lightness steps behave consistently and contrast is easy to reason about, Huetone's approach is the point.

Why LCH matters here

Most familiar color pickers work in RGB or HSL. In HSL, two colors with the same "lightness" value can look very different in perceived brightness — yellow at 50% lightness looks far brighter than blue at 50%. That makes it hard to build a scale where each step feels evenly spaced.

LCH separates color into three perceptual dimensions:

• L (Lightness) — perceived brightness, independent of hue.
• C (Chroma) — how saturated or vivid the color is.
• H (Hue) — the color angle itself.

Because L is perceptual rather than mathematical, equal steps in L look like equal steps to the eye. That is what makes a palette "predictable": if you define a scale as a fixed sequence of lightness values, each step reads as a consistent jump regardless of which hue you apply it to.

What "accessible" means in this context

Accessibility here refers to contrast between text and background, the kind measured by WCAG contrast ratios. When lightness is a controlled, perceptual value, you can reason about contrast more directly: a text color and a background color that sit far apart in L will generally have a stronger contrast ratio than two colors close in L.

Huetone's stated goal of accessible palettes follows from that. It does not replace a contrast checker — you should still verify final pairs against WCAG thresholds — but it gives you a starting structure where contrast is a deliberate property of the scale rather than an accident of picking colors by eye.

What you actually do on the page

The page evidence shows an "Example Palette" section with a "Copy link" control. That points to the core workflow:

1. Start from or inspect a palette. The example palette shows how a set of colors is laid out as a scale.
2. Adjust the palette. Working in LCH lets you shift hue or chroma while keeping the lightness structure intact, so the scale stays even.
3. Copy the result. The "Copy link" action suggests you can capture a palette as a shareable URL, which is useful for handing a palette to a teammate or pasting it into a design review.

The exact controls, input fields, and export formats are not described in the available page evidence, so treat the steps above as the general shape of the workflow rather than a click-by-click guide.

Who it is for

Practical caveats

• LCH is not the same as a final rendered color. Browsers and design tools may handle wide-gamut and out-of-gamut LCH values differently, so always check the actual rendered output.
• Perceptual evenness is not the same as aesthetic fit. A mathematically even scale can still feel wrong for a brand; treat LCH as a structure, not a finished decision.
• Accessibility still needs verification. Use the palette as a starting point, then confirm contrast ratios for the specific text sizes and weights you will ship.

If your goal is a palette that scales cleanly across hues and gives you a defensible starting point for contrast, Huetone's LCH-based approach addresses exactly that. If your goal is a single color or a strict compliance check, use a simpler tool alongside it.

Huetone builds palettes in the LCH color space, which separates lightness (L) from chroma (C) and hue (H). Because lightness is an independent, numeric axis, you can generate a set of shades where each step has a predictable, evenly spaced lightness value — and lightness is the main factor that determines whether text stays readable against its background. That predictability is what makes accessibility checks easier: instead of guessing which shade is dark enough, you pick a target lightness and verify the contrast ratio.

The accessibility metric that matters here: contrast ratio

Accessible text depends on the contrast ratio between foreground and background colors, defined by WCAG. The thresholds most teams work against:

Contrast ratio is computed from the relative luminance of the two colors, not from their hue. This is why a palette organized around lightness is easier to make accessible than one organized around, say, HSL saturation or a hand-picked set of hex values.

Why LCH lightness helps

In LCH, the L value is perceptual lightness on a consistent scale. Two colors with the same L look similarly light to the eye, even if their hues differ. Practical consequences for palette building:

• Even steps stay even. If you generate shades at L = 90, 80, 70, … the perceived jump between each pair is roughly constant, so a "600" shade is reliably darker than a "500" shade across every hue in your system.
• Hue changes don't secretly change lightness. You can swap a blue for a green at the same L and expect similar contrast behavior against a fixed background — something that is not true when you pick colors by eye or by HSL.
• You can target a contrast goal directly. To make text readable on a light background, you lower the foreground's L until the ratio clears 4.5:1. To keep a dark-mode surface comfortable, you raise the background's L while keeping text light.

The trade-off: LCH is a perceptual model, and some highly saturated colors fall outside the sRGB gamut at certain L/C combinations. If a chosen L and chroma can't be displayed, the rendered color shifts, so verify the final hex values rather than trusting the L number alone.

How to check a foreground/background pair

1. Pick the pair you actually ship. Use the real text color and the real surface color, not approximations.
2. Compute the contrast ratio. Use a WCAG contrast checker, or compute relative luminance from the sRGB values and apply the (L1 + 0.05) / (L2 + 0.05) formula.
3. Compare against the threshold for that content type from the table above.
4. Adjust lightness, not hue, if it fails. Move the foreground L down (on light backgrounds) or up (on dark backgrounds) until the ratio clears the bar, then re-check.
5. Re-verify after any change, including opacity, overlays, or gradients, which alter the effective colors.

A common failure point: a color passes on a pure white background but fails on a tinted surface, or passes at full opacity but fails when the text is set to 80% opacity. Always test the composited result.

Where predictable scales pay off

A consistent lightness ladder lets you define rules instead of one-off decisions:

• Body text uses a shade guaranteed to clear 4.5:1 against the page background.
• Secondary or muted text uses the next step up, checked separately — muted text is a frequent accessibility miss.
• Borders and icons use a shade that clears 3:1 against their surface.
• Dark mode reuses the same ladder in reverse, so the same contrast logic applies.

Because the steps are evenly spaced and hue-independent, you can apply one rule across every color in the system and expect consistent results, rather than re-testing each hue from scratch.

Limits to keep in mind

• Huetone's LCH approach makes contrast predictable and checkable; it does not automatically certify a palette as WCAG-compliant. You still run the contrast check on the final colors.
• Contrast ratio is necessary but not sufficient for accessibility. Color alone shouldn't carry meaning (add labels, icons, or patterns), and focus indicators, motion, and text sizing matter too.
• Gamut clipping can change a color's actual luminance, so verify the exported values, not just the intended L.

If your goal is a palette where accessibility is a property of the system rather than a per-color afterthought, building on LCH lightness and verifying each shipped pair against the WCAG thresholds is the workable path.

Huetone is a browser-based tool that builds color palettes in the LCH color space, which is designed to make lightness steps and contrast more predictable than picking colors by eye in RGB or HSL. To create and copy a palette, you open the site, adjust the palette controls until the swatches look right, then use the Copy link action shown alongside the Example Palette to save or share that exact configuration. This works for anyone who needs a consistent set of shades for a UI, and it does not require installing anything.

What Huetone Does

Huetone's stated purpose is to "use LCH color space to come up with predictable and accessible color palettes." LCH separates a color into three independent values:

• L — perceptual lightness
• C — chroma (colorfulness)
• H — hue angle

Because lightness is its own axis, you can hold a steady lightness step between swatches while hue and chroma change, which is what makes contrast behavior easier to reason about across a palette.

Creating a Palette

The page presents an Example Palette as the starting point, so you are not building from an empty canvas.

1. Open huetone.ardov.me in a browser.
2. Start from the Example Palette shown on the page.
3. Adjust the palette parameters (lightness, chroma, and hue values) to shift the swatches toward the colors you need.
4. Watch how the swatches change together — the point of the LCH model is that a change to lightness affects every color in a comparable way, rather than each one drifting differently.
5. Repeat until the set of shades covers the range you want, for example a light background tint through to a dark text color.

The expected result is a row of swatches that form a usable scale rather than a random collection of colors.

What to Aim For

• A lightness ramp with even steps, so you can pick a light shade for surfaces and a dark shade for text.
• Consistent hue across the ramp if you want a single brand color in multiple shades.
• Enough contrast between the shades you intend to pair, such as a text color on a background color.

Copying the Palette

The page exposes a Copy link control next to the Example Palette. Using it captures the current palette configuration as a link.

• Copy link — produces a shareable URL that reproduces the palette you built. This is the practical way to save your work, since the palette lives in the URL rather than in an account.
• Copy on the palette itself — copies the palette values so you can paste them into your own code or design file.

If you only need the colors, copy the palette values. If you need to come back to the same configuration later or hand it to a teammate, copy the link.

Common Sticking Points

• The link is the save file. There is no indication of accounts or stored projects, so if you close the tab without copying the link, you may lose the exact configuration.
• Copying the link is not the same as copying the colors. One gives you a way back to the palette; the other gives you values to use directly.
• LCH values are not hex. If your target platform expects hex or RGB, you will need to convert the palette values before using them.
• Accessibility is supported, not guaranteed. LCH makes contrast more predictable, but you still need to check the specific foreground/background pairs you plan to ship.

Quick Reference

The workflow is short by design: open, adjust, copy. The main decision is whether you need the link (to return or share) or the values (to use immediately).