#Color Format Converter

Learn HSL. That is the whole recommendation on this page, and the conversion is incidental to it.

HEX is compact and universal, which is why it dominates handoffs. RGB maps to how a screen emits light. Neither tells you anything about the colour when you look at it — nobody reads #2d6a4f and knows it is a muted green.

HSL separates hue from saturation and lightness, and that separation turns palette work into arithmetic. Hold the hue, raise the lightness, and you have your hover state. Lower it and you have the pressed state. Drop the saturation and you have the disabled one. In HEX all three are guesswork.

Building a scale from one brand colour

Convert it to HSL, keep hue and saturation fixed, and step the lightness. That gives you tints and shades that visibly belong to the same family — borders, backgrounds, hover states, all derived rather than picked.

For an accent, move the hue by around thirty degrees rather than reaching for the opposite side of the wheel. Complementary colours are louder than most interfaces need.

A gotcha between tools

HSL and HSB are not interchangeable. HSL runs lightness from black through the pure hue to white; HSB runs brightness from black to the pure hue only. Design tools frequently show HSB while CSS uses HSL, so a value copied straight across comes out washed out or too dark. Convert rather than transcribe.

Two practical notes

Three-digit HEX shorthand expands by doubling each digit, so #f60 is exactly #ff6600 — not an approximation.

And check any lightened variant in the contrast checker before using it for text. A tint that looks fine as a swatch frequently fails against white.