HEX, RGB and HSL colour converter
Convert a colour from HEX to RGB and HSL with a per-channel breakdown.
Fill in the fields and the result will appear here automatically.
Convert a three- or six-digit sRGB hexadecimal text code to RGB and HSL. Each digit is repeated when expanding a short code: #F0A becomes #FF00AA. RGB and expanded HEX preserve the original bytes; HSL is rounded for display. CSS strings use a decimal point in every language so they can be copied into a stylesheet.
How it works
Formula and logic
Channels r,g,b are integer bytes from 0 to 255. HSL uses channels divided by 255: lightness L=(max+min)/2, saturation S=Δ/(1−|2L−1|) for Δ=max−min>0, and hue follows the maximum channel. When Δ=0 saturation is zero and hue is conventionally written as 0°. HSL lightness is neither physical luminance nor a contrast score. Hue is rounded to degrees, S and L to two percentage decimals.
Example
#2E86DE → rgb(46, 134, 222), rounded CSS hsl(210, 72.73%, 52.55%). #F0A → #FF00AA → rgb(255, 0, 170). Decimal points in hsl() are part of CSS syntax.
Fields and units
- Hexadecimal colour code — unitless
How to use
- — Enter HEX text such as #2E86DE, 2E86DE or #F0A.
- — Read the exact RGB bytes and expanded HEX.
- — Copy the RGB/HSL CSS strings; rounded HSL may slightly change the colour when converted back.
Method and limitations
- Calculation method
- Formula and logic
- Data or methodology source
- W3C CSS Color 4: HEX and HSL syntax
- Limitation
- Only opaque three-/six-digit sRGB HEX input is supported. Four-/eight-digit alpha codes, RGB/HSL input, colour profiles and accessible-contrast assessment are outside this calculator.
FAQ
Why does #F0A become #FF00AA?
The short form expands by doubling each character — that is how the format is defined. Padding with zeros would give a different colour: #F00A00 rather than #FF00AA.
Is the hash required?
No, it is optional, and letter case does not matter either. Both #2e86de and 2E86DE work.
What does the lightness row mean?
It is the HSL lightness as a percentage: 0 is black, 100 is white, and around 50 is a pure saturated colour. It is also the third number in the hsl() notation.
How does HSL lightness differ from perceived brightness?
Lightness uses one formula for every channel, while the eye sees green as far lighter than blue. Two colours with the same HSL lightness can therefore look quite different, and checking contrast needs a separate measure.
Is precision lost in the conversion?
RGB and expanded HEX preserve the original bytes exactly. HSL is rounded to whole hue degrees and two decimals for saturation/lightness. Converting that rounded HSL back may produce different RGB bytes.