Last updated: April 2026
The HEX to RGB Converter translates color codes between HEX, RGB, and HSL formats in real time. Designers and developers constantly need to switch between these color formats when working across CSS, design tools, and graphics software. Just type a HEX code like #3b82f6 and instantly see the matching RGB and HSL values, or enter RGB values to get the HEX code back. The built-in color picker lets you visually select any color, and the live preview swatch shows you exactly what the color looks like. Every output has a one-click copy button so you can paste color values directly into your CSS, Figma, or Sketch files. No signup, no ads, and everything processes locally in your browser.
Type or paste your HEX color code (with or without the # symbol) in the HEX input field. Supports both 3-digit and 6-digit HEX values like #fff or #3b82f6.
If you already have RGB values, enter them in the R, G, and B fields (0 to 255 each). The HEX code updates automatically as you change any value.
Click the color swatch next to the HEX input to open the native color picker. Select any color visually and all values update in real time.
Each output row shows the color in HEX, RGB, and HSL format with its own copy button. Click to copy the value you need directly to your clipboard.
HEX to RGB Converter is the fastest way to convert color codes online. Key advantages include bidirectional conversion, live preview, a built-in color picker, and instant copy for all formats.
A HEX color code is a six-digit hexadecimal number used in web design and CSS to represent colors. It starts with a # symbol followed by six characters (0-9 and A-F). The first two characters represent red, the middle two represent green, and the last two represent blue. For example, #FF0000 is pure red and #00FF00 is pure green.
HEX and RGB represent the same colors in different notation. HEX uses a base-16 format (#RRGGBB) while RGB uses decimal values from 0 to 255 for each channel (rgb(R, G, B)). HEX is more common in CSS and design tools. RGB is used in programming and image processing. Both produce identical colors when converted correctly.
HSL stands for Hue, Saturation, and Lightness. Hue is the color angle on a 360-degree wheel (0 is red, 120 is green, 240 is blue). Saturation is the intensity from 0% (gray) to 100% (vivid). Lightness goes from 0% (black) to 100% (white). Many designers prefer HSL because adjusting colors is more intuitive than changing individual RGB channels.
Yes. This tool works in both directions. Enter your RGB values in the R, G, and B input fields, and the matching HEX code and HSL value will generate automatically. You can also use the color picker to select a color and get all three formats at once.
Yes. Three-digit HEX shorthand like #f00 is expanded to its full form #ff0000 automatically. Each digit is doubled, so #abc becomes #aabbcc. This shorthand is commonly used in CSS when both digits of each color channel are the same.