About this color converter
This color converter translates a single color between HEX, HEXA, RGB, RGBA, HSL, HSLA and HSV. It is useful when a stylesheet, design token or illustration program expects a different notation from the one you have. Select the input format explicitly so the tool can validate the number of channels and distinguish hexadecimal alpha from an opaque color.
HEX accepts three or six digits and HEXA accepts four or eight, with an optional leading #. RGB channels use zero to 255 or percentages. HSL and HSV accept hue in degrees with saturation and lightness or value between zero and 100 percent. Bare triples, comma separated functions and space separated inputs are supported. RGBA and HSLA require an alpha component; modern space syntax can put it after a slash.
For example, #ff8800 corresponds to rgb(255, 136, 0), hsl(32, 100%, 50%) and hsv(32, 100%, 100%). HSV value and HSL lightness are different measurements, so their percentages are not interchangeable. The table lets you compare every notation alongside the live preview, and the output selector chooses the code used by Copy result.
An opaque input produces alpha one when converted to an alpha format. An input with alpha keeps it in HEXA, RGBA or HSLA, and drops it in the other formats without blending onto a background. HEXA uses CSS #RRGGBBAA order and quantizes opacity to one byte. HSV is not CSS. Changing the input selector preserves your text; use Load example if you want a new sample. No entered color is uploaded, and invalid values clear all outputs.
Which controls should I check first?
The Color Converter form labels its controls as Input format; Color value; Output format; Result. Its selectable values include HEX; HEXA; RGB; RGBA; HSL; HSLA; HSV; HEX; HEXA; RGB; RGBA; HSL. Use those labels to keep the source and settings separate. A sample argument that selects a mode is not additional source text. Choose the setting matching your intended operation before copying a result, and change it explicitly when comparing another mode. The labels describe what this form accepts; the worked examples below demonstrate only the stated supplied values.
Worked helper values
These values come from the reproducible calculation examples supplied with this tool. Each row identifies the complete supplied arguments and the returned value. A visible ↵ denotes a line break and ⇥ denotes a tab in text examples. Settings appear alongside source data so that a different mode is not mistaken for an identical input. These are helper calculations, not observations of a live device, fetched target, image decoder, browser preview or downloaded file. Use the stated method above to relate the returned fields to the actual operation.
| Supplied values | Calculated return value |
|---|---|
| hexa; rgba; #ff880080 | rgba(255, 136, 0, 0.501961) |
| hsv; hsl; hsv(120, 50%, 80%) | hsl(120, 50%, 60%) |
| hsla; hex; hsla(240, 100%, 50%, 0) | #0000ff |
Why can the coordinates look different?
The conversion goes through red, green and blue channels, which describe the same underlying color as the source notation. Hue-based coordinates reorganize those channels into an angle and two proportions. In HSL the third coordinate is lightness, whereas in HSV it is the maximum channel or value. Their saturation coordinates also use different denominators. Copying the same three numbers between the two names changes the color. Compare the result numerically with the worked values, then preview it against the background where it will actually be used.
What does opacity change?
Alpha describes coverage or opacity separately from the color channels. An alpha of zero can hide a bright blue color without turning its stored blue channel into zero. Dropping that alpha reveals the underlying blue as opaque; it does not composite the invisible color onto white. When an alpha-capable source is converted to an opaque destination, decide whether discarding opacity matches your intended use. If you want the visible blended color instead, a background and a compositing operation are required. Changing lightness is a different edit from changing opacity.
How do I preserve useful precision?
HEX and RGB output use integer channel values from zero through 255. Hue-based output keeps three decimal places, and decimal alpha keeps up to six. A hexadecimal opacity byte has only 256 possible values: 0.5 rounds to 128, whose decoded proportion is 128 divided by 255. A round trip can therefore differ slightly from the original fraction. Keep a high-precision source while editing and format it only for the final destination. Repeatedly converting already rounded output can accumulate small differences that a preview alone may not reveal.
Why are grayscale hue values special?
When all three RGB channels are equal, there is no distinct hue. The converter reports hue zero for that neutral case so that the output remains a complete tuple. This zero is a convention for an undefined coordinate, not evidence that a gray color contains visible red. Black can also have undefined saturation in intermediate formulas; the implementation handles those zero denominators explicitly. Testing black alongside a saturated example catches these boundary cases better than testing only a colorful swatch. Gray remains gray when you change its otherwise undefined hue without adding saturation.
Can this converter detect my color format automatically?
Select the input format yourself. Explicit selection avoids confusion between RGB triples, HSL coordinates and hex alpha.
What is the difference between HSL and HSV?
HSL lightness averages the largest and smallest normalized RGB channels. HSV value is the largest channel; a saturated orange can therefore have HSL lightness 50% and HSV value 100%.
Are alpha values preserved?
Yes, for HEXA, RGBA and HSLA output. Formats without alpha discard it without compositing. HEXA rounds alpha to the nearest byte in the last two digits.
Why did changing the input format show an error?
The selector preserves the text you entered. Reformat it to match the new notation, or use Load example for input format.