Color Converter — HEX, RGB & HSL

Convert colors between the three formats every designer and developer runs into: HEX (#3B82F6), RGB (rgb(59, 130, 246)) and HSL (hsl(217, 91%, 60%)). Paste a hex code to see its RGB and HSL equivalents, or switch modes to build a hex code from RGB values.

RGBrgb(59, 130, 246)

HSLhsl(217, 91%, 60%)

How this calculation works

A HEX color packs three channels — red, green, blue — into a 6-digit base-16 (hexadecimal) string, two digits per channel, each running from 00 to FF (0–255 in decimal). A 3-digit shorthand like #FFF doubles each digit, so #FFF equals #FFFFFF.

RGB writes the same three channels as plain decimal numbers 0–255, which is why rgb(59, 130, 246) and #3B82F6 describe the identical color — 59 = 0x3B, 130 = 0x82, 246 = 0xF6.

HSL describes the same color differently: Hue is the position on a 0–360° color wheel (0 = red, 120 = green, 240 = blue), Saturation is how vivid the color is (0% = gray, 100% = fully saturated), and Lightness is how close to black or white it is (0% = black, 100% = white). It is computed from the RGB values by finding the max/min channel and their spread.

Worked example

Tailwind CSS's default "blue-500" is #3B82F6. Converting it gives rgb(59, 130, 246) and hsl(217, 91%, 60%) — the same blue, three different ways to write it in CSS.

HEX vs RGB vs HSL — when to use each

Format	Example	Best for
HEX	#3B82F6	Design tools, brand color sheets, quick copy-paste into CSS
RGB	rgb(59, 130, 246)	When you need explicit channel values or rgba() opacity
HSL	hsl(217, 91%, 60%)	Building color palettes — tweak lightness/saturation while keeping the hue

How the hex digits map to channels

#RRGGBB — RR is red (00–FF), GG is green (00–FF), BB is blue (00–FF)
Each pair is a base-16 number: FF = 15×16 + 15 = 255, 80 = 8×16 + 0 = 128, 00 = 0
#000000 is black, #FFFFFF is white, #FF0000 is pure red
3-digit shorthand doubles each digit: #ABC → #AABBCC

Reading an HSL value at a glance

hsl(217, 91%, 60%) tells you three things instantly: 217° is a blue hue (blues sit around 210–250°), 91% saturation means it is vivid rather than muted, and 60% lightness means it sits comfortably between black and white — a bright, clear blue.

This makes HSL convenient for generating consistent palettes: keep the hue fixed at 217 and vary lightness from 20% (a near-black navy) to 90% (a pale sky blue) to get a matched tint/shade ramp for the same color family.

Common reference colors

Name	HEX	RGB
Black	#000000	rgb(0, 0, 0)
White	#FFFFFF	rgb(255, 255, 255)
Red	#FF0000	rgb(255, 0, 0)
Green	#00FF00	rgb(0, 255, 0)
Blue	#0000FF	rgb(0, 0, 255)

Frequently asked questions

Which color format should I use in CSS?

All three render identically in every modern browser, so it is a matter of workflow. HEX is compact and common in design tools; RGB is explicit about channel values and supports rgba() for opacity; HSL is the easiest to hand-tweak because you can nudge lightness or saturation without recomputing all three channels.

Does this store or upload my colors?

No. Every conversion runs in your browser with plain arithmetic — nothing is sent to a server or saved.

What is the difference between #FFF and #FFFFFF?

Nothing — #FFF is CSS shorthand where each digit is doubled, so #FFF, #ffFFFF and #FFFFFF are all pure white. This tool accepts both 3- and 6-digit hex codes.

How do I add transparency (alpha)?

Add a 4th channel: rgba(59, 130, 246, 0.5) or hsla(217, 91%, 60%, 0.5) for 50% opacity, or an 8-digit hex like #3B82F680 (the extra two hex digits are the alpha channel, 00–FF). This converter focuses on the opaque RGB/HEX/HSL triad; append alpha manually if you need it.

Why do RGB and HSL give the same color different-looking numbers?

They are two coordinate systems for the identical point in color space. RGB is additive-light channels; HSL reorganizes that into hue/saturation/lightness, which is often more intuitive for picking or adjusting a shade — e.g. keep hue and saturation fixed and just raise lightness to get a lighter tint.

Is uppercase or lowercase hex correct?

Both work everywhere — hex is case-insensitive. This tool outputs uppercase (#3B82F6) for readability, but #3b82f6 is exactly the same color.

What if I enter an invalid hex code?

The RGB and HSL fields simply stay blank until you enter a valid 3- or 6-digit hex value (letters A–F/a–f and digits 0–9 only, with or without the leading #).

This tool is provided for general information only. Verify important figures independently. · Last reviewed: August 25, 2026