Hi everyone, I’m Md. Yasir, the maker of Hueform 👋

I built Hueform with a straightforward goal: help product and UI/UX designers work out the colors around a brand color with less guesswork.

Starting with a HEX code still leaves plenty of decisions to make. You need shades for different states, readable text and backgrounds, meaningful borders, and clear success, warning, error, and info colors. Then you need to bring those choices into your design or development workflow.

Hueform brings those steps into one browser workspace.

Here’s what you can do:

Generate an 11-step tonal scale while keeping your original color intact, and explore different color harmonies.
Check WCAG contrast between specific foreground and background colors. See normal-text, large-text, and UI-component results, or find a higher-contrast foreground alternative.
Generate success, warning, error, and info colors for light and dark interfaces. Each includes background, border, text/icon, and solid-label roles with measured contrast ratios.
Preview your colors in a sample interface and explore approximate color-vision simulations.
Edit individual colors, lock the ones you want to keep, and use Undo/Redo while exploring. Copy values as HEX, RGB, CSS, HSL, or HSB.
Save palettes locally, share palette links, and download a backup you can restore later.
Export editable SVG swatches for Figma, CSS variables, design tokens, Tailwind themes, PNG boards, or ASE swatches. The Figma export creates swatches and labels rather than native Figma variables.

One decision I cared about was keeping status colors recognizable. A purple brand palette still gets a green success state. Their intensity adapts to the palette while their familiar meanings stay clear.

The contrast ratings describe the pairs being tested. If you use a color on a different background, you can check that combination too.

Hueform is free to use, with no account or API key required.

If you try it with a real project color, I’d appreciate honest feedback, especially on the alert colors and Figma handoff. What works for you, and what still needs manual adjustment?

Thanks for taking a look!