Does the converter handle 3-digit hex shorthand like #abc?

Yes. A 3-digit hex shorthand expands to 6 digits by doubling each character — #abc becomes #aabbcc. The # prefix is also optional; the converter accepts values with or without it.

What is HSL and when should I use it instead of hex or RGB?

HSL stands for Hue, Saturation, Lightness. Hue is the color angle on the color wheel (0° red, 120° green, 240° blue). Saturation measures color intensity from gray (0%) to fully chromatic (100%). Lightness runs from black (0%) to white (100%). Use HSL when you need to create color variants: a lighter button hover state, a muted background tint, a darker active color. Change the lightness while keeping the hue fixed and you stay on the same color family.

Is the conversion mathematically exact?

Yes, at standard 8-bit color depth. Hex and RGB are direct encodings of the same values. HSL is derived from the relative magnitudes of the RGB channels using a deterministic formula; converting back recovers the original RGB values without rounding error at integer precision.

Does the converter handle the CSS rgba() or hsla() formats with alpha?

No. The converter handles the three standard 8-bit formats: hex (#rrggbb or #rgb), rgb(r, g, b), and hsl(h, s%, l%). Alpha-channel variants (rgba, hsla) and 8-digit hex (#rrggbbaa) are not currently supported.

Does anything get sent to a server?

No. The entire conversion runs in your browser on each keystroke. No color values, queries, or clipboard data are transmitted anywhere.

Yes. No account required, no usage limits, nothing stored.

Home › Tools › 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.

HEX

RGB

HSL

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.

What CSS color formats use HEX, RGB, and HSL?

All three are valid CSS color values in every modern browser. HEX (#rrggbb) is the default in most design tools and CSS color pickers. rgb() is required when passing values to canvas APIs or image-processing code. hsl() is best for programmatic palette generation — increase L to lighten, decrease S to desaturate. CSS Color Level 4 also adds oklch() and oklab() for wider-gamut displays, but HEX, RGB, and HSL cover nearly all practical screen design use cases.

What is the difference between HSL and HSB?

HSL (Hue, Saturation, Lightness) and HSB/HSV (Hue, Saturation, Brightness) differ on the light-to-dark axis. In HSL, L = 50% is the pure fully saturated color — increase to lighten, decrease to darken. In HSB, B = 100% is the fully vivid color. CSS uses HSL natively via hsl(). Design tools like Photoshop and older Figma color pickers default to HSB, so when copying a color from a design tool into CSS you may need to convert the brightness value.

Keep going

More developer tools

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 tool

LiveDeveloper

JSON Formatter & Validator

Format, validate, and minify JSON in your browser. Syntax errors show exact line and column. Free, nothing uploaded.

Open tool

LiveDeveloper

JWT Decoder

Decode and inspect JWT tokens — header, payload, and expiry — without a library. Free, runs in your browser.

Open tool

LiveDeveloper

URL Shortener

Create short links that redirect to any destination. No signup required. Free forever.

Open tool