HEX and RGB are two ways of writing the exact same color, and moving between them is one of the most common little chores in web design and development. A designer hands you #F0502E and your charting library wants rgb(240, 80, 46); or you have RGB values from a screenshot and need the HEX for your CSS. This converter does the translation both ways instantly, adds the HSL equivalent, and shows a live preview so you can confirm the color looks right before you copy it.
How to use the converter
- Convert HEX to RGB: type a six-character HEX code into the HEX field (the leading
#is optional). The RGB and HSL outputs and the preview bar update as you type. - Convert RGB to HEX: type three numbers from 0 to 255 into the RGB field, separated by commas or spaces — for example
240, 80, 46. The HEX field and outputs update to match. - Copy the result: press Copy next to any output. Each value is formatted ready to paste straight into CSS.
- Start over: use Reset to example to return to the sample color, or Random color to jump to a fresh one.
If you enter something invalid — too few digits, a letter outside A–F, or an RGB number above 255 — the tool shows a short inline message instead of producing a wrong or NaN result.
What HEX and RGB actually mean
Both formats store the same three pieces of information: how much red, green and blue make up the color. RGB writes those three amounts as plain decimal numbers from 0 to 255. HEX writes the same three numbers in hexadecimal (base 16), gluing them together into one string prefixed with #. So rgb(240, 80, 46) and #F0502E are not just similar — they are identical colors, stored in two notations. HEX is popular on the web because it's compact and copy-friendly; RGB is convenient when you want to adjust a single channel or add an alpha value with rgba().
The conversion formula
HEX → RGB
Split the six characters into three pairs and read each pair as a base-16 number. For F0502E: F0 = (15 × 16) + 0 = 240, 50 = (5 × 16) + 0 = 80, and 2E = (2 × 16) + 14 = 46. That gives rgb(240, 80, 46).
RGB → HEX
Convert each channel to a two-digit hexadecimal string and join them. 240 becomes F0, 80 becomes 50, 46 becomes 2E — so the HEX is #F0502E. Values under 16 are padded with a leading zero (for example 5 becomes 05) so every channel is exactly two digits.
RGB → HSL
Divide each channel by 255, then find the max and min. Lightness is their average; saturation depends on their spread; and hue is derived from whichever channel is highest, scaled to 0–360 degrees. For our orange the result is hsl(11, 87%, 56%).
A worked example
Suppose your brand guide lists the RGB value 34, 197, 94 (a fresh green) and you need it for CSS. Take each number to hex: 34 → 22, 197 → C5, 94 → 5E. Join them and you get #22C55E. Reversing it confirms the math: 22 = 34, C5 = (12 × 16) + 5 = 197, 5E = (5 × 16) + 14 = 94. And in HSL it lands at roughly hsl(142, 71%, 45%) — the same green, three ways.
Quick conversion reference
| HEX | RGB | Color |
|---|---|---|
#FFFFFF | 255, 255, 255 | White |
#000000 | 0, 0, 0 | Black |
#F0502E | 240, 80, 46 | ColrPick orange |
#3B82F6 | 59, 130, 246 | Blue |
#22C55E | 34, 197, 94 | Green |
#64748B | 100, 116, 139 | Slate gray |
Shorthand HEX: A three-digit code like #F53 expands by doubling each digit to #FF5533. This converter accepts both the three-digit and six-digit forms.
Frequently asked questions
Do I need to include the # in the HEX field?
No. You can type the code with or without the # — the converter handles both and always outputs the standard #RRGGBB form.
Does it convert both directions?
Yes. Type in the HEX field to get RGB and HSL, or type in the RGB field to get the HEX back. Both fields stay in sync.
What format should I use for the RGB input?
Three numbers from 0 to 255, separated by commas or spaces — for example 240, 80, 46 or 240 80 46. Extra spaces are fine.
Why do I get an error message?
The tool validates your input. A HEX code must have 3 or 6 hex characters (0–9, A–F), and each RGB number must be between 0 and 255. If it's outside that range you'll see a short note instead of a broken result.
Can I convert RGBA or add transparency?
This tool focuses on the solid color. To add transparency, take the RGB output and wrap it in rgba() with a fourth value from 0 to 1, like rgba(240, 80, 46, 0.6).
Is the HSL value accurate?
Yes, it uses the standard RGB-to-HSL formula and rounds to whole numbers for readability, which matches what design tools display.
About this tool
HEX and RGB describe the same color space, so converting between them is exact — there's no loss or guesswork. The HSL value is mathematically derived from RGB and rounded to whole numbers for easy reading. Everything is computed in your browser the instant you type, so it's fast, private, and works even without a connection once the page has loaded.