How to Convert HEX to RGB and HSL Colors

Q: Does CSS support all three color formats?

Yes, modern CSS supports HEX (#RRGGBB and shorthand #RGB), rgb(), rgba() for colors with transparency, hsl(), and hsla() for HSL with transparency. All major browsers support all four formats. HEX is most common in design tools and handoff. RGB and HSL are preferred when you need to add transparency or dynamically adjust colors with CSS variables or JavaScript.

Use our free tool — no sign-up required.

Color Converter HEX RGB HSL — Free Online Tool

What are the three main color formats?

All three formats — HEX, RGB, and HSL — describe the same physical color but express it differently. Understanding what each value represents makes the conversions intuitive.

HEX (#RRGGBB) is a six-character string prefixed with a hash symbol. Each pair of characters represents the red, green, and blue channels in base-16 (hexadecimal) notation, where 00 is the minimum (none of that color) and FF is the maximum (full intensity). The shorthand three-character form (#RGB) is also valid when both digits in each pair are identical — for example, #FF6600 can be written #F60.

RGB (r, g, b) uses the same red-green-blue model but expresses each channel as a decimal integer from 0 to 255. It is the most intuitive format for those comfortable with decimal arithmetic, and it is directly supported in CSS via rgb(255, 102, 0). Adding a fourth value gives rgba(), which includes an alpha (opacity) channel from 0.0 to 1.0.

HSL (Hue, Saturation, Lightness) is a cylindrical model designed to be more human-readable. Hue is an angle on the color wheel from 0 to 360 degrees (0 and 360 both represent red, 120 is green, 240 is blue). Saturation ranges from 0% (completely desaturated — a shade of gray) to 100% (the most vivid version of that hue). Lightness ranges from 0% (black) to 100% (white), with 50% being the pure color.

How to convert HEX to RGB manually

Converting HEX to RGB is straightforward once you understand hexadecimal notation. Take the color #1A9FE0 as an example:

Red: The first two characters are "1A". In hex, 1A = (1 × 16) + 10 = 26.
Green: The next two characters are "9F". 9F = (9 × 16) + 15 = 159.
Blue: The final two characters are "E0". E0 = (14 × 16) + 0 = 224.

Result: #1A9FE0 = rgb(26, 159, 224). To go from RGB back to HEX, convert each decimal value to hexadecimal and pad with a leading zero if needed: 26 → 1A, 159 → 9F, 224 → E0, giving #1A9FE0.

How to convert colors using the online tool — step by step

An online color converter handles all three format directions in a single interface, saving you the manual arithmetic.

Step 1: Enter your color. Type or paste a valid color value into the converter — either a HEX code (e.g., #FF6347), RGB values (e.g., 255, 99, 71), or HSL values (e.g., hue 9, saturation 100%, lightness 64%). The tool accepts all three as input.
Step 2: View all equivalent formats. The converter instantly displays the equivalent values in every other format. Entering #FF6347 shows rgb(255, 99, 71) and hsl(9, 100%, 64%) simultaneously, along with a color preview swatch.
Step 3: Copy the format you need. Click the copy button next to the format you want to use in your project. The value is copied to your clipboard ready to paste into your CSS, design tool, or code.
Step 4: Use the color preview to verify. Confirm visually that the converted color matches your original. The preview swatch ensures you have the right color before pasting it into your project.

Tips and best practices

Use HSL for design system color scales. Because HSL separates hue from lightness, you can generate a consistent 9-step scale (from very light to very dark) by holding hue and saturation constant and stepping lightness from 95% down to 10%. This produces harmonious palettes that look intentional and professional.
Prefer rgba() or hsla() for semi-transparent elements. When you need overlays, glass morphism effects, or accessible focus indicators, the alpha channel in rgba() and hsla() gives you precise control over opacity without affecting the underlying color.
Memorize a few anchor HEX values for quick mental math. #000000 is black, #FFFFFF is white, #FF0000 is pure red, #00FF00 is pure green, #0000FF is pure blue, and #808080 is medium gray. These anchors help you quickly estimate where a color sits even before you paste it into a converter.
Check contrast ratios after converting. When adapting a brand color for text on a colored background, always verify the converted color meets WCAG contrast requirements (at least 4.5:1 for normal text). Small adjustments to the lightness value in HSL are the fastest way to improve contrast.

Frequently asked questions

What is the difference between HEX, RGB, and HSL color formats?

HEX (#RRGGBB) encodes red, green, and blue channels as two-digit hexadecimal values from 00 to FF. RGB uses the same three channels but expresses them as decimal integers from 0 to 255. HSL (Hue, Saturation, Lightness) is a human-readable model where hue is an angle from 0 to 360 on the color wheel, saturation is a percentage from 0% (gray) to 100% (full color), and lightness goes from 0% (black) to 100% (white). All three describe the same color — only the notation differs.

How do I convert HEX to RGB?

To convert a HEX color like #1A9FE0 to RGB: split the hex string into three pairs (1A, 9F, E0), then convert each pair from hexadecimal to decimal. 1A in hex equals 26 in decimal, 9F equals 159, and E0 equals 224. So #1A9FE0 = rgb(26, 159, 224). An online color converter does this conversion instantly for any valid HEX code.

When should I use HSL instead of RGB or HEX?

HSL is most useful when you want to programmatically manipulate colors in CSS or design systems. Because Hue, Saturation, and Lightness are independent values, you can easily create lighter or darker variants by adjusting only the lightness percentage, or create a muted version by reducing saturation — without affecting the hue. This makes HSL ideal for generating color palettes, hover states, and accessible color variations.

Does CSS support all three color formats?

Yes. Modern CSS supports HEX (#RRGGBB and shorthand #RGB), rgb() and rgba() for colors with transparency, hsl() and hsla() for HSL with transparency. All major browsers support all formats. HEX is most common in design tools and handoff. RGB and HSL are preferred when you need to add transparency or dynamically adjust colors with CSS custom properties (variables).

Conclusion

HEX, RGB, and HSL are three lenses through which to view the same color. HEX is compact and tool-friendly, RGB aligns with how computer displays mix light, and HSL maps closely to how designers think about color. Knowing how to move between them — and understanding what each number means — makes you more effective whether you are writing CSS, building a design system, or checking accessibility. A free online color converter handles the arithmetic so you can stay focused on the design.

Ready to convert your colors? Try our free tool — works instantly in your browser.

Color Converter HEX RGB HSL — Try it Free

How to Convert Colors Between HEX, RGB, and HSL