How to Create and Copy a Color Palette in Huetone

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).