ToolsYard

Color Converter

Pick a color or type into any field — HEX, RGB, and HSL stay in sync.

Click the swatch to pick a color visually.

What this tool does

This tool converts a color between the three formats most commonly used on the web: HEX (a six-digit hex code like #26A69A), RGB (red, green, and blue channel values from 0–255), and HSL (hue, saturation, and lightness). Use the color swatch to pick visually, or type directly into any field — the picker and the other two fields update immediately to match. Everything runs locally in your browser.

Example use case

A designer hands over a brand color as a HEX code, but the CSS you're writing uses hsl() so you can adjust lightness for a hover state without recalculating the whole color. Or you're reading an RGB value out of a design tool and need the HEX equivalent to paste into a stylesheet or config file. This tool covers all three directions without needing to look up a conversion formula.

Why three formats

HEX is compact and ubiquitous in CSS and design tools, RGB maps directly to how digital displays render color, and HSL is often easier for humans to reason about — adjusting just the lightness or saturation value to get a lighter or more muted variant of the same hue, something that's not straightforward with HEX or RGB alone.