Design

Color Converter

Free color converter: convert hex to RGB, RGB to hex, and both to HSL. Enter any color in one format and get all three instantly.

YOUR WORKSPACEFree to use. No sign-up.

Color value

Format

—

Enter a color above.

Deep dive guides

A LITTLE CONTEXT · 4 MIN READHex, RGB, and HSL: The Three Color Formats Explained

All 6 related guides

How Color Contrast Works — The WCAG contrast ratio explained: relative luminance, why normal text needs 4.5:1, AA vs AAA, and how to pick accessible color pairs.
Tints, Shades, and the Math of Mixing Colors — A tint mixes a color with white, a shade with black; both come from one linear-interpolation formula you can run by hand.
Where CSS Color Names Came From — The history of the CSS named colors: 16 HTML basics, the X11 inheritance, gray/grey aliases, and the one petitioned color.
Hex, RGB, and HSL: The Three Color Formats Explained — The same color written three ways: hex packs channels into base-16 digits, RGB lists them plainly, and HSL splits color into hue, saturation, and lightness.
How to Convert Hex to RGB (and Why Both Exist) — A hex code is three bytes in base 16: split six digits into three pairs and decode each. The arithmetic, the 3-digit shorthand rule, and when rgb() wins.
Color Picker Explained: From One Click to Every CSS Code — What happens after you pick a color: hex parsing, the 3-digit shorthand rule, the RGB to HSL conversion, and how the coordinating palette is generated.

How color converter works

Colors on screens are described in several formats. Hex (hexadecimal) codes like #ff8000 pack red, green, and blue values into a compact string. RGB lists the same three values as decimal numbers (0 to 255). HSL describes color by hue (a circle of 360 degrees), saturation, and lightness.

This converter accepts either a hex color (with or without #, in any CSS form: 3-digit #rgb, 4-digit #rgba, 6-digit #rrggbb or 8-digit #rrggbbaa) or an RGB triplet (comma-separated, optionally with a fourth alpha value). It immediately shows the color in all three formats: hex, RGB, and HSL. When alpha is present, rgba() and hsla() strings are reported too, because an opaque hex and a translucent one are different colors. The conversion uses the standard sRGB formulas. Hex and RGB are direct mappings, while HSL is derived from the RGB values.

HSL hue is calculated by finding which of red, green, or blue is largest, then measuring the angular position on the color wheel. Saturation and lightness describe how vivid and how bright the color is. Pure red (#ff0000) is hue 0 degrees, 100 percent saturation, 50 percent lightness.

Frequently asked questions

How do I convert hex to RGB?

Split the hex code into pairs: the first two digits are red, the next two green, and the last two blue. Convert each pair from hexadecimal to decimal. For example, #ff8000 becomes RGB 255, 128, 0. The converter does this automatically.

What is HSL?

HSL stands for Hue, Saturation, and Lightness. Hue is an angle from 0 to 360 degrees on the color wheel. Saturation (0 to 100 percent) is how intense the color is. Lightness (0 to 100 percent) is how light or dark it is. It is often easier for designers to adjust than RGB.

Can I convert RGB to hex?

Yes. Enter the RGB values as comma-separated numbers like 255, 128, 0 and the converter shows the hex code. Each RGB value (0 to 255) is converted to a two-digit hexadecimal number.

What is the difference between hex and RGB?

They represent the same thing in different bases. Hex uses base-16 (digits 0-9 and a-f); RGB uses base-10 (0 to 255). #ff8000 and RGB(255, 128, 0) are the same color. Use whichever your tool or code requires.

Can I convert colors with transparency (alpha)?

Yes. Use an 8-digit hex (#rrggbbaa, e.g. #ff800080), the 4-digit shorthand (#rgba, e.g. #f808), or an RGB input with a fourth value (255, 128, 0, 0.5). The alpha nibble is expanded the same way as the color nibbles, and the result reports alpha (0-1), rgba() and hsla() alongside the plain hex/rgb/hsl forms. Alpha is kept at full precision so the hex round-trips exactly.

Color Converter

Deep dive guides

How color converter works

Frequently asked questions

Related tools

Color Contrast Checker

Color Picker

Hex to RGB Converter

Color Palette Generator

CSS Gradient Generator