LiveDeveloper
Color Picker
Pick any color with a native browser dialog and instantly get the HEX, RGB, and HSL values. Keeps a recent-colors history.
Open toolTools › Developer Tools › Hex to RGB Color Converter
Hex to RGB Color Converter
Enter a HEX, RGB, or HSL color value — all three formats update instantly. Click any value to copy.
About Hex to RGB Color Converter
This free browser-based tool converts between the three most common CSS color formats — HEX, RGB, and HSL — in real time. Type any value into any field and the other two update immediately. There is no button to press, nothing to install, and nothing is sent to a server: the conversion runs entirely in your browser using standard arithmetic.
The live color swatch at the top shows you what the current color actually looks like as you type, so you can visually confirm you have the right value before copying it to your stylesheet, design tool, or codebase.
When you need each format
- HEX — the default in most design tools (Figma, Sketch, CSS color pickers). Compact and paste-ready.
- RGB — required when passing color values to canvas APIs, image processing libraries, or when you need to adjust individual channel values.
- HSL — best for programmatic palette generation. Increase L to lighten, decrease S to desaturate, rotate H to shift hue. Much more intuitive than adjusting raw RGB channels.
Frequently asked questions
What is the difference between HEX and RGB?
HEX is a 6-digit hexadecimal code like #1a2b3c used in CSS and design tools. It is a compact way to express the same three color channels as RGB. RGB expresses each channel as an integer from 0 to 255, making it more readable when you need to reason about individual values. Both represent the same color — this tool converts between them instantly.
How do I convert a HEX color to RGB manually?
Split the 6-digit hex code into three pairs: the first pair is Red, the second is Green, the third is Blue. Convert each pair from base-16 to base-10. For example, #1a2b3c becomes 1a = 26, 2b = 43, 3c = 60 — giving rgb(26, 43, 60). This tool does that calculation instantly for any valid HEX or #RGB shorthand value.
What is HSL and why use it instead of RGB?
HSL stands for Hue, Saturation, Lightness. Hue is the base color angle (0–360°), Saturation controls how vivid or grey the color is (0–100%), and Lightness controls how light or dark it is (0–100%). To make a color 20% lighter, add 20 to L. To desaturate it, lower S. HSL is much more intuitive than RGB for programmatic color adjustments and palette generation.
Keep going
More developer tools
LiveDeveloper
JSON Formatter & Validator
Format, validate, and minify JSON in your browser. Syntax errors show exact line and column. Free, nothing uploaded.
Open toolLiveDeveloper
JWT Decoder
Decode and inspect JWT tokens — header, payload, and expiry — without a library. Free, runs in your browser.
Open toolLiveDeveloper
URL Shortener
Create short links that redirect to any destination. No signup required. Free forever.
Open tool