Free Online Hex to RGB Color Converter
Convert between hex, RGB, and HSL color codes
Try these next
Why use Hex to RGB Color Converter
- All three formats in one view -- no separate conversions.
- Live swatch gives visual confirmation so you never paste the wrong code.
- Handles 3-digit shorthand and clamps out-of-range values instead of silently producing wrong output.
- Copy buttons output CSS-ready strings: rgb(), hsl(), #hex.
- Input validation highlights typos before you waste time hunting bugs in your stylesheet.
- Bidirectional -- enter any format and get the other two.
How it works
Hex-to-RGB is a base conversion: each pair of hex digits is parsed as an integer from 0 to 255. RGB-to-HSL maps the three channels into a cylindrical coordinate system where hue is the angle on the color wheel (0-360), saturation measures intensity (0-100%), and lightness describes proximity to black or white (0-100%). The algorithm finds the min and max RGB channels, derives lightness as their average, calculates saturation relative to the midpoint, and determines hue by which channel dominates. HSL-to-RGB reverses the process using a chroma-based formula.
About this tool
Your designer sent #4F46E5 and your CSS needs rgb(). Paste the hex code here and get the RGB and HSL equivalents in one view -- or go the other direction. A live color swatch updates as you type so you can confirm the color visually before copying. Each row has a copy button for the formatted CSS string: #4F46E5, rgb(79, 70, 229), or hsl(243, 75%, 59%). Hex is compact and dominates stylesheets. RGB maps directly to how screens display color. HSL is the designer-friendly format because adjusting hue, saturation, and lightness is more intuitive than nudging individual channels -- useful for building tints, shades, and accessible color scales. The converter handles 3-character shorthand (#fff becomes #ffffff), clamps out-of-range values, and highlights typos. The math is simple but tedious to do by hand, especially when translating an entire brand palette between formats.
How to use Hex to RGB Color Converter
- Enter a color value. Type or paste a code into any field -- Hex (#3B82F6), RGB (59, 130, 246), or HSL (217, 91%, 60%). The tool detects the format and converts in real time.
- Check the swatch. A large preview swatch updates live so you can visually confirm the color before copying.
- Read all three formats. Hex, RGB, and HSL appear simultaneously. No need to pick an output format.
- Copy what you need. Each row has a Copy button that places the properly formatted CSS string on your clipboard.
Use cases
- Translating a brand color from a PDF style guide (hex) into hsl() to create lighter and darker tints in CSS custom properties.
- Converting a hex code from Figma to rgba() for a semi-transparent overlay.
- Debugging a CSS gradient by converting each color stop to HSL to verify lightness values are consistent.
Frequently Asked Questions
A 6-digit hexadecimal number preceded by # that represents a color. The three pairs correspond to red, green, and blue channels (00-FF each). #FF0000 is pure red, #000000 is black. CSS also supports 3-digit shorthand where each digit doubles: #F00 = #FF0000.
RGB mixes red, green, and blue channels (0-255 each). HSL uses hue (0-360 degrees on the color wheel), saturation (intensity), and lightness (light to dark). HSL is more intuitive for design work because making a color lighter or more muted is a single slider move.
Hex and RGB represent the same color information in different formats. RGB uses three decimal numbers from 0 to 255 -for example, rgb(59, 130, 246). Hex encodes those same three values as a 6-digit hexadecimal string -#3B82F6. They are interchangeable; hex is more compact in code, while RGB is easier to read and adjust programmatically.
All three formats are valid in CSS and render identically. Hex is the most compact and widely used in codebases. RGB is clearest when you need to set individual channels programmatically. HSL is best when you want to create color variations -adjusting lightness or saturation is straightforward. Modern CSS also supports oklch and oklab for perceptually uniform color spaces.
Split the hex code into three pairs (e.g., #3B82F6 → 3B, 82, F6). Convert each pair from hexadecimal to decimal: 3B = 59, 82 = 130, F6 = 246. The result is rgb(59, 130, 246). For 3-digit hex, double each digit first: #F00 → FF0000 → rgb(255, 0, 0).
Take each RGB channel value (0-255) and convert it to a two-digit hexadecimal number. For example, rgb(59, 130, 246): 59 = 3B, 130 = 82, 246 = F6. Concatenate with a # prefix to get #3B82F6. If a channel converts to a single digit (e.g., 10 = A), pad with a leading zero (0A).
Alpha defines how transparent a color is, from 0 (fully transparent) to 1 (fully opaque). In CSS, use rgba(59, 130, 246, 0.5) for 50% transparency, or hex with an alpha channel: #3B82F680 (the last two digits are the alpha in hex). HSL uses hsla() in the same way. This converter outputs the base color in all three formats -add your desired alpha value manually after copying.
This tool converts between numeric formats (hex, RGB, HSL). For CSS named colors, the quickest approach is to type the color name into your browser's developer tools color picker, which will show the hex equivalent. Alternatively, the full list of 140+ CSS named colors with their hex values is published in the CSS specification.
HSL (hue, saturation, lightness) and HSB/HSV (hue, saturation, brightness/value) look similar but differ in how they define the top of the brightness scale. In HSL, a lightness of 100% always gives white regardless of saturation. In HSB, a brightness of 100% gives the pure color (or white only when saturation is 0). Photoshop uses HSB; CSS uses HSL. This tool converts to and from HSL.
Related Tools
Discover more free utilities to enhance your productivity.