Color Format Converter
Paste a hex colour and get it back as RGB, HSL and HSV at the same time. Useful when a design tool wants one notation and you only have another — no need to open a full graphics application to translate a single value.
One Colour, Four Ways of Writing It
Every notation here describes the same colour on an sRGB screen, and the conversion between them is exact arithmetic rather than a lookup. Hex and RGB are the same idea expressed in different bases; HSL and HSV are polar descriptions that replace the three channels with a hue angle and two proportions, which is why designers reach for them when adjusting a colour rather than specifying one.
- HEX is given in uppercase with the leading hash and always expanded to six digits, so a three-digit input comes back in full form.
- RGB is reported as the three channel values from 0 to 255, in the notation CSS expects.
- HSL reports hue in degrees from 0 to 360, then saturation and lightness as percentages.
- HSV reports the same hue angle with saturation and value, which is the pair most pickers and older design tools use.
- A preview swatch is drawn from the input so you can confirm at a glance that you typed what you meant.
Converting a Colour
- Type a hex value into the text field with or without the leading hash. Both are accepted.
- Or use the colour picker to choose visually. Moving the picker updates the hex field, so the two stay in step whichever way you work.
- Three-digit shorthand works. A value like #abc is expanded by doubling each digit to #aabbcc before conversion, which is the standard CSS interpretation.
- Read all four notations at once from the result panel. There is no mode to select and no format to choose between — everything is computed together.
- Use the copy button to lift the whole result set at once rather than selecting the text by hand.
- If the input cannot be parsed, the panel says so rather than showing a wrong value. Anything that is not three or six hexadecimal digits is rejected.
Four Conversions and What They Show
The values below are exactly what the page returns, rounded to whole numbers as the page rounds them.
- The default #3b82f6 — a medium blue — becomes rgb(59, 130, 246), hsl(217, 91%, 60%) and hsv(217, 76%, 96%). The hue of 217 sits in the blue range, and the very high saturation tells you this is a vivid blue rather than a muted one.
- #dc2626 becomes rgb(220, 38, 38) with hsl(0, 72%, 51%) and hsv(0, 83%, 86%). A hue of exactly zero is the red origin. Because red is the maximum channel and the other two are equal, the hue lands precisely on zero rather than near it.
- #ffffff becomes rgb(255, 255, 255) with hsl(0, 0%, 100%) and hsv(0, 0%, 100%). The hue shown as zero is not meaningful here — at zero saturation there is no hue to express, and any angle would describe the same white.
- #0f172a — a very dark slate — becomes rgb(15, 23, 42) with hsl(222, 47%, 11%) and hsv(222, 64%, 16%). This is the clearest illustration of why both polar forms exist: HSL reports lightness at 11 percent while HSV reports value at 16 percent, and neither is wrong. They measure different things against different maximums.
When to Reach for Each Notation
| Alternative | Notes |
|---|
| HEX for handing colours over | The most compact form and the one that survives copy and paste between every tool and design system. Hard to reason about by eye, since it is base sixteen and the channels are not aligned in a way you can read at a glance. |
| RGB for code | What the browser actually uses. Choose it when you are writing a value that will be manipulated by script, since the channels are already separate numbers. |
| HSL for adjusting | The most useful form for making a colour variation. Keeping the hue and changing lightness produces a tint or shade that stays recognisably the same colour, which is difficult to achieve by editing hex values. |
| HSV for pickers | Widely used in tools because it maps neatly onto a square colour field with a hue slider. Value runs from black to full brightness, whereas lightness in HSL runs from black through the pure colour to white. |
What This Converter Deliberately Leaves Out
It handles four screen notations and nothing else, which is worth knowing before you go looking for a conversion that is not there.
- There is no CMYK output. Converting to CMYK is not a single formula — it depends on the ink, the substrate and the press profile, and any naive conversion produces values a printer cannot use. The honest answer is that a browser cannot do it properly.
- There is no alpha channel. Transparency is not part of any of the four notations here, so an eight-digit hex value with an alpha pair will not parse.
- There is no Lab, LCH or OKLCH output. These are perceptually uniform spaces and converting into them involves a colour space transform rather than the channel arithmetic used here.
- Values are rounded to whole numbers for display. The underlying conversion is computed at full precision first, but the output you copy is the rounded figure, so round-tripping a value through this page can move it by one unit per channel.
- No colour profile is applied. The conversion assumes sRGB, which is what a browser renders and what a hex value means in CSS. A colour managed for print will not translate without conversion.
Colour Conversion Questions
Why does white show a hue of zero degrees?
Because hue is undefined when saturation is zero. The formula computes the angle relative to the largest and smallest channels, and when all three are equal the difference between them is zero, so the code falls back to reporting zero. It is a placeholder rather than a claim about white. The same applies to pure black and to any grey.
Why is the saturation different in HSL and HSV for the same colour?
Because they are measured against different reference points. HSL expresses saturation as a share of the distance from grey to the pure colour, while HSV expresses it relative to the brightest channel. A dark saturated colour therefore reads high on HSV saturation and lower on HSL saturation, which is why a value like #0f172a gives 64 percent in one and 47 percent in the other.
Does typing a colour here send it anywhere?
No. There is no network request involved in the conversion and no state is stored. The page is four small arithmetic functions running in the browser, so it works with the tab offline and leaves nothing behind.
Why does my three-digit code come back as six digits?
Because three-digit hex is shorthand for six-digit hex, with each digit duplicated — #abc means #aabbcc, not #0a0b0c. The page expands the input first and then converts, so the output is always the full six-digit form. This is the same rule CSS applies.
Last verified: October 3, 2026
Launch Color Format Converter
All Tools · All Tools · About · How We Test · Contact · Privacy
Maintained by Huang Bin · Last updated October 3, 2026