If you have ever copied a color from a design tool into your CSS, you have probably noticed that the same color can be written in several different ways. One file says #1E90FF, another says rgb(30, 144, 255), and a third says hsl(210, 100%, 56%). They all paint the exact same shade of blue on the screen, yet they look nothing alike as text. This guide explains why web colors come in multiple formats, how HEX, RGB, and HSL each work, and how to convert between them, both by hand and with a free online tool.
Why Web Colors Come in Multiple Formats
A screen produces color by mixing three channels of light: red, green, and blue. Every color you see on a web page is just some amount of each of those three primaries. Because there is only one underlying model, the different formats are simply different notations for the same red, green, and blue values.
So why have more than one? Each notation serves a purpose. HEX is compact and is the historical default for the web. RGB spells the channels out in familiar decimal numbers and adds easy support for transparency. HSL describes color the way humans tend to think about it, in terms of hue, vividness, and brightness, which makes it far easier to adjust a color by eye. Knowing all three, and how to move between them, lets you pick the right tool for each job.
HEX Notation
A HEX color is written as a hash followed by six hexadecimal digits, in the pattern #RRGGBB. The six digits are three pairs, one pair each for red, green, and blue. Each pair is a two-digit hexadecimal number ranging from 00 to FF, which is 0 to 255 in decimal. So #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue, while #000000 is black and #FFFFFF is white.
There is also a shorthand form, #RGB, where each single digit is doubled to form the full pair. For example #1E9 is not valid, but #1AB expands to #11AABB. Shorthand only works when both digits in every pair are identical. Finally, an eight-digit form #RRGGBBAA adds a fourth pair for alpha, the opacity of the color, where 00 is fully transparent and FF is fully opaque. So #1E90FF80 is the familiar blue at roughly 50 percent opacity.
RGB and RGBA
The RGB notation expresses the same three channels as decimal numbers from 0 to 255, written as rgb(red, green, blue). Pure red is rgb(255, 0, 0), white is rgb(255, 255, 255), and our example blue is rgb(30, 144, 255).
The mapping to HEX is direct: each 0-to-255 channel value is simply the decimal equivalent of one HEX pair. The value 255 is FF, the value 0 is 00, and the value 30 is 1E. RGBA extends RGB with a fourth value for alpha, written as rgba(30, 144, 255, 0.5), where the alpha runs from 0 (transparent) to 1 (opaque). Modern CSS also accepts the alpha directly inside rgb() using a slash, but the four-argument form remains the most widely recognized.
HSL and HSLA
HSL stands for hue, saturation, and lightness, and it describes color in a way that matches human intuition. Hue is an angle on the color wheel from 0 to 360 degrees: 0 is red, 120 is green, and 240 is blue, wrapping back to red at 360. Saturation is a percentage from 0 to 100 that controls how vivid the color is, where 0 percent is fully gray and 100 percent is fully saturated. Lightness is a percentage from 0 to 100 controlling brightness, where 0 percent is black, 100 percent is white, and 50 percent is the pure, full-strength color.
Our blue is hsl(210, 100%, 56%). The reason HSL is so useful is that adjusting a color becomes obvious. Want a darker version of the same blue? Lower the lightness. Want it more muted? Lower the saturation. Want a related color? Rotate the hue. Doing the same thing with raw HEX or RGB numbers is far less intuitive. HSLA simply adds an alpha channel, as in hsla(210, 100%, 56%, 0.5).
Converting HEX to RGB
Converting a HEX color to RGB is a matter of splitting the six digits into three pairs and converting each pair from base 16 to base 10. Take #1E90FF. Split it into 1E, 90, and FF.
For the red pair 1E, the first digit 1 is worth 1 times 16, which is 16, and the second digit E is worth 14, giving 16 plus 14 equals 30. For the green pair 90, the digit 9 is worth 9 times 16, which is 144, and 0 adds nothing, giving 144. For the blue pair FF, F is 15, so 15 times 16 is 240, plus another 15 equals 255. Put the three results together and #1E90FF becomes rgb(30, 144, 255). The same method works for any HEX color: separate, convert each pair from hexadecimal, and you have your RGB values.
Converting RGB to HEX
Going the other direction reverses the process. Take each channel value from 0 to 255 and convert it to a two-digit hexadecimal number, then concatenate the three pairs behind a hash.
Starting from rgb(30, 144, 255): the value 30 in hexadecimal is 1E, because 30 divided by 16 is 1 with a remainder of 14, and 14 is E. The value 144 is 90, since 144 divided by 16 is 9 with no remainder. The value 255 is FF, the maximum. Stitch them together and you get #1E90FF. The only thing to watch is padding: a single-digit result must be written as two digits, so a channel value of 5 becomes 05, not just 5. Forgetting that zero pad is the single most common mistake in manual RGB-to-HEX conversion.
When to Use Each Format in CSS
In practice, all three formats are valid CSS and you can mix them freely. HEX is the most compact and is ideal for fixed brand colors and quick one-off values. RGB and RGBA are convenient when you are working with values that come from JavaScript or when you want a transparency that is easy to read at a glance. HSL and HSLA shine whenever you need to generate variations programmatically, such as a hover state that is slightly darker, a palette of tints and shades, or a theme where you rotate the hue while keeping saturation and lightness fixed.
A common modern workflow is to define base colors in HSL so that lightness and saturation adjustments are trivial, then let your tooling output HEX for places that expect it. Whatever you choose, consistency within a project matters more than the specific format.
Accessibility and Contrast
Choosing colors is not only about aesthetics. Text must have enough contrast against its background for people with low vision to read it comfortably. Accessibility guidelines recommend a contrast ratio of at least 4.5 to 1 for normal body text and 3 to 1 for large text.
This is where thinking in HSL helps. Because lightness directly controls how bright a color is, you can often fix a failing contrast ratio by nudging the lightness of either the text or the background up or down, without changing the hue or the overall feel of your palette. Always test final color pairings with a contrast checker rather than trusting your eyes, since perceived brightness varies between people and displays.
Convert Colors Instantly with ToolboxHub
Doing these conversions by hand is great for understanding what is happening, but for everyday work a tool is faster and error-free. The free ToolboxHub Color Converter lets you enter a color in HEX, RGB, or HSL and instantly see the equivalent in all the other formats, with a live preview swatch so you can confirm the result by eye. It handles alpha for transparent colors and runs entirely in your browser, so you can paste a value, grab the format you need, and get back to building.
Key Takeaways
Web colors all come from mixing red, green, and blue light, so HEX, RGB, and HSL are just three notations for the same thing. HEX packs each channel into a two-digit hexadecimal pair from 00 to FF, with shorthand and an eight-digit alpha variant. RGB spells those channels out as decimals from 0 to 255, and RGBA adds opacity. HSL describes color as hue, saturation, and lightness, which makes adjusting a shade intuitive.
Converting HEX to RGB means splitting into pairs and reading each from base 16, while RGB to HEX reverses that and requires zero padding single digits. Pick the format that fits the job, keep contrast in mind for accessibility, and reach for the free ToolboxHub Color Converter whenever you need an instant, reliable conversion.