How to Convert Hex to RGB
Enter a hex color code into the input field — with or without the # prefix (both #FF6B35 and FF6B35 are accepted). The tool instantly converts to RGB decimal values (0–255 per channel) and HSL (Hue 0–360°, Saturation 0–100%, Lightness 0–100%). Three-character shorthand codes are also supported: #F05 is automatically expanded to #FF0055.
Use the native color picker button to select any color visually — the hex code, RGB, and HSL values all update in real time as you drag the picker. This is useful when you know the color you want but not its code. The 12 example color chips below the calculator let you instantly see conversions for common web colors.
Copy any value with the one-click copy buttons next to each output field. CSS-ready output is provided: hex (#FF6B35), rgb() function (rgb(255, 107, 53)), and hsl() function (hsl(16, 100%, 60%)) — all three ready to paste directly into your stylesheet. The live color preview swatch updates with every input change.
Why Use a Hex to RGB Converter?
- Instant conversion — hex to RGB and HSL simultaneously, no separate tools needed
- Bidirectional — enter hex to get RGB/HSL, or use the color picker for visual selection
- HSL output — especially useful for programmatic color manipulation in design systems
- CSS-ready output — copies values pre-formatted for direct use in stylesheets
- Color picker — visual selection without knowing the hex code upfront
- Copy buttons — one click to copy hex, RGB, or HSL individually
- Example color chips — 12 common web colors for instant reference conversions
Frequently Asked Questions
How do you convert hex to RGB?
A hex color code like #FF6B35 encodes three color channels: the first two digits are red (FF), the middle two are green (6B), and the last two are blue (35). Convert each two-digit hex pair to a decimal integer: FF₁₆ = 255, 6B₁₆ = 107, 35₁₆ = 53. Result: rgb(255, 107, 53). To convert hex manually: for a two-digit hex pair like 'A3', multiply the first digit by 16 and add the second (A=10 in hex, 3=3): (10 × 16) + 3 = 163. So A3₁₆ = 163 decimal.
What is the difference between RGB and HEX?
Both formats represent the exact same colors — they are just different notations for the same RGB model. HEX uses base-16 notation (digits 0–9 and letters A–F) and represents each channel as two characters, making color values compact and easy to share. RGB uses base-10 decimal notation (0–255 per channel) and is the format used in CSS rgb() functions, design tools, and programming interfaces. They are fully interchangeable — every hex color has an exact RGB equivalent and vice versa. In CSS, #FF6B35 and rgb(255, 107, 53) produce identical results.
What is HSL color?
HSL stands for Hue (the color's position on the color wheel, 0–360°), Saturation (color intensity, 0–100%), and Lightness (brightness, 0–100%). HSL is more intuitive for humans than RGB because it matches how we naturally think about colors. To make a color lighter, increase Lightness. To make it less vivid, decrease Saturation. To shift from blue to purple, adjust the Hue. HSL is particularly powerful for design systems — creating tints and shades of a brand color is simple: keep Hue and Saturation constant, vary Lightness. This is why Tailwind CSS and many design tokens use HSL internally.
What does #RGB shorthand mean in CSS?
CSS supports 3-digit hex shorthand where each digit is doubled: #RGB expands to #RRGGBB. For example, #F05 expands to #FF0055 (red=255, green=0, blue=85). The shorthand is only valid when both characters in each pair are identical — #F05 qualifies (FF, 00, 55), but a code like #A32 would expand to #AA3322, not #A3322 with some other expansion. The 3-digit shorthand is valid in all modern browsers and reduces file size minimally while improving readability for suitable colors like #FFF (white) and #000 (black).
How do I use hex colors in CSS?
Use hex values directly in any CSS color property: color: #FF6B35; or background-color: #336699;. For transparency, use either rgba(): rgba(255, 107, 53, 0.5) for 50% opacity, or 8-digit hex notation (CSS Color Level 4): #FF6B3580 where the last two digits (80₁₆ = 128 = ~50% opacity). For design tokens and theming, CSS custom properties are the modern approach: :root { --brand-primary: #FF6B35; } then reference it: color: var(--brand-primary);. This lets you change the color site-wide by updating one value.
By UtilDaily · Updated \u2014 free, privacy-first browser tools. No sign-up, no data collection.