Convert colours between hex, RGB, HSL and HSV with a picker and numeric fields — plus complementary, analogous, triadic and split-complementary harmonies. Runs entirely in your browser — your numbers never leave this device.
#ff8f1f#1fffff#1f1fff#ff1f8f#8fff1f#ff1f1f#ffff1fHSL and HSV are reported as whole numbers (hue 0–359, the rest as percents), so converting away and back can shift a channel by one — the readouts always show the rounded values the conversions start from.
The same colour wears four notations, and each exists because a different job is easier in it. Hex is RGB compressed for CSS: three bytes written in base 16. HSL describes a colour the way people talk about it — a hue around the wheel, a saturation, a lightness — which is why design systems derive hover states and shades by nudging L. HSV (also called HSB) swaps lightness for value, the model colour pickers draw. This tool converts between all four from one colour: pick it, type a hex, or set the RGB channels, and every notation plus a row of harmony swatches follows.
Honesty about precision: the HSL and HSV readouts are whole numbers — hue to the nearest degree, saturation and lightness to the nearest percent — because that is how these values are written in real stylesheets. Converting back starts from those rounded numbers, so a round trip can shift a channel by one: #1e90ff is hsl(210, 100%, 56%), and that HSL converts back to rgb(31, 143, 255), not the original (30, 144, 255). The tool shows the rounded values it actually uses, so what you copy is what a conversion will reproduce.
The harmonies are pure hue geometry at the same saturation and lightness: the complementary colour sits opposite on the wheel (+180°), analogous colours flank it (±30°), the triadic pair splits the wheel in thirds (+120°, +240°), and the split-complementary pair brackets the complement (+150°, +210°). They are starting points for palettes, not guarantees — contrast for text is a separate question, and the Contrast Checker answers it with the WCAG numbers.
Because the HSL/HSV values are rounded to whole numbers, as stylesheets write them. #1e90ff converts to hsl(210, 100%, 56%), and converting those rounded numbers back gives rgb(31, 143, 255) — one step off in two channels. The difference is invisible, but it is real, and the tool shows you the rounded intermediates so the behaviour is never a surprise. Hex and RGB always round-trip exactly.
They share the hue wheel and differ in the third axis. HSL's lightness is the midpoint of the brightest and darkest channels: 100% is always white and 0% always black, with the pure hue at 50%. HSV's value is just the brightest channel: 100% is the pure hue itself, and black is value 0 at any saturation. Pickers usually draw HSV; stylesheets and design tokens usually speak HSL.
Each digit doubles: #fff means #ffffff, #1e9 would mean #11ee99. It is a shorthand CSS allows when both digits of every byte happen to be equal — most colours have no 3-digit form. This converter accepts both lengths and always shows the full 6-digit form.
They are guaranteed to be geometrically related — exact hue rotations at your colour's saturation and lightness — which is a reliable starting point for palettes. Whether a pairing works for text depends on contrast, not harmony: check the pair in the Contrast Checker, where the WCAG ratio replaces taste with a number.
This converter works with opaque colours: hex here is the 6-digit form, and RGB/HSL/HSV have no alpha channel in the readouts. CSS adds alpha as a fourth value (rgba, hsla, or an 8-digit hex whose last byte is opacity) — the conversion of the colour part is exactly what this page computes.
More in Developer Tools · Browse all tools