Hex to RGB Converter
Type a hex colour or adjust the RGB sliders — HEX, RGB and HSL update together, with ready-to-paste CSS for all three.
How Hex, RGB and HSL Conversion Works
A hex colour code is three numbers wearing a compact disguise. The six digits are three pairs — red, green, blue — written in base 16 instead of base 10, which is why the letters A to F appear: they are the digits for 10 to 15. Converting to RGB is pure translation: read each pair as a base-16 number, so 00 becomes 0 and FF becomes 255. Converting back is the same road in reverse. Nothing is approximated in either direction — HEX and RGB are exactly the same information, which is why the sliders above and the hex box can never disagree.
HSL is a genuine transformation rather than a translation. It re-describes the colour as hue (the angle around the colour wheel, 0° for red through 120° for green to 240° for blue), saturation (0% is grey, 100% is the fully vivid colour) and lightness (0% black, 50% the pure hue, 100% white). The maths: lightness is the midpoint between the strongest and weakest RGB channels; saturation measures how far apart those channels are relative to that midpoint; and hue picks the angle according to which channel is strongest. HSL answers design questions RGB cannot — "same colour, but lighter" is one number changed in HSL and three in RGB.
Worked Example: Taking ToolRush Blue Apart
- Start with #2563EB. Split into pairs: 25, 63, EB.
- Convert each pair from base 16: 25 = 2×16 + 5 = 37; 63 = 6×16 + 3 = 99; EB = 14×16 + 11 = 235. So the RGB value is rgb(37, 99, 235).
- For HSL: the strongest channel is blue (235 ÷ 255 = 0.922), the weakest is red (37 ÷ 255 = 0.145). Lightness is their midpoint, (0.922 + 0.145) ÷ 2 ≈ 53%.
- The gap between strongest and weakest is 0.777; scaled by the lightness that gives saturation ≈ 83%.
- Blue is strongest, so hue sits in the blue sector: 60 × (4 + (0.145 − 0.388) ÷ 0.777) ≈ 221°. Final answer: hsl(221, 83%, 53%) — which is exactly what the converter reports, and typing #FF0000 into it shows the classic test case: rgb(255, 0, 0) and hsl(0, 100%, 50%).
Once a colour exists in three notations, each has its home ground: hex for design tools and sharing, RGB (and its alpha-carrying form rgba()) for direct CSS values, and HSL for generating tints and shades systematically — a hover state at +8 points of lightness, a muted variant at half the saturation. Building a whole palette rather than converting one colour is the Colour Palette Generator's job; converting the other number bases used in computing is what the Binary to Hex Converter covers.
Frequently Asked Questions
How do you convert a hex colour to RGB?
Split the six hex digits into three pairs — red, green and blue — and convert each pair from base 16 to decimal. Each pair runs from 00 (0, none of that colour) to FF (255, full intensity). FF0000 is pure red because its pairs are FF, 00, 00. The converter above does this live and also shows the HSL values and ready-to-paste CSS for the same colour.
What is #2563EB in RGB and HSL?
Our own ToolRush blue: the pairs 25, 63 and EB convert to 37, 99 and 235, so in RGB it is rgb(37, 99, 235). In HSL it is hsl(221, 83%, 53%) — a hue of 221° puts it firmly in blue territory, with high saturation and roughly middle lightness. The worked example on this page walks through all three conversions for this exact colour.
What does the 3-digit hex shorthand mean?
A 3-digit hex code is a compressed form where each digit is doubled: #F00 expands to #FF0000, and #38C becomes #3388CC. Only colours whose six-digit form has matching pairs can be shortened this way — #2563EB cannot, because its pairs (25, 63, EB) do not repeat internally. This converter accepts the shorthand and expands it automatically.
What is the fourth pair in an 8-digit hex code?
Alpha — the colour's opacity. In #FF000080, the final pair 80 is 128 in decimal, and 128 ÷ 255 ≈ 0.50, so the red is half transparent. The 4-digit shorthand (#RGBA) works the same way with doubled digits. This converter reads the alpha pair when present and reports it as a decimal from 0 (fully transparent) to 1 (fully opaque).
What is the difference between RGB and HSL?
They describe the same colours in different shapes. RGB mixes light: how much red, green and blue. HSL describes colour the way people talk about it: hue (the colour itself, as an angle from 0° to 360°), saturation (how vivid or grey it is) and lightness (how close to black or white). HSL is usually easier for building palettes — lighten a colour by raising L, mute it by lowering S — while RGB is what screens physically use and what most code expects.
Why does the same hex colour look different on different screens?
Because displays differ in brightness, calibration and colour gamut, and because most web colour assumes the sRGB standard while some screens show the wider P3 gamut. The numbers are exact; the light reaching your eyes is not. What a hex code guarantees is that every device is aiming at the same target — which is why sharing colours as hex values is reliable in a way screenshots are not.
Is this hex converter free?
Yes. It is completely free with no signup required, and it runs entirely in your browser — nothing you enter is uploaded or stored.