What's the difference between RGB and HSL?

RGB defines a color by its red, green, and blue light intensities (0–255 each). HSL defines it by hue (a position on the color wheel), saturation, and lightness — which is often more intuitive for adjusting a color's brightness or vividness without changing its base hue.

Can I convert a color with transparency (alpha)?

This converter focuses on solid HEX/RGB/HSL values. For transparency, use the 8-digit HEX (#RRGGBBAA) or RGBA/HSLA formats supported by most modern CSS, adding the alpha value separately.

Why do designers use HSL instead of HEX?

HSL makes it easy to create consistent color palettes — you can keep the hue fixed and just adjust lightness or saturation to get lighter/darker or more/less vivid variants of the same base color, which is harder to do by eye in HEX or RGB.

Is a 3-digit HEX code the same as a 6-digit one?

Yes — a shorthand 3-digit HEX code like #38F is equivalent to doubling each digit to get the full 6-digit form, #3388FF. This tool accepts both formats.

Color Converter — HEX, RGB & HSL

Convert colors between HEX, RGB, and HSL formats with a live preview.

HEX

RGB

HSL (derived)

How to use the Color Converter

Type or paste a HEX code (3 or 6 digits, with or without the #), or set the red, green, and blue values directly.
Whichever side you edit, the other updates to match, and the HSL equivalent is worked out automatically.
Select and copy whichever format your stylesheet or design tool expects.

About the Color Converter

Colors on the web and in design software are represented in several different formats — HEX codes like #3B82F6, RGB values like rgb(59, 130, 246), and HSL values like hsl(217, 91%, 60%) — and different tools or codebases often expect a specific one. This converter translates a color between all three formats at once and shows a live preview swatch.

It's useful for designers moving a color between Figma, CSS, and a brand guideline, or developers who need to convert a design tool's HEX export into the HSL format used for programmatically generating color shades.

Worked example

Example: entering the HEX code #3B82F6 instantly shows the equivalent RGB value rgb(59, 130, 246) and HSL value hsl(217, 91%, 60%), along with a live preview of the color.

How the three formats relate

HEX and RGB are the same information written differently. Each pair of hex digits is one channel from 0 to 255 in base 16, so #3B82F6 means red 3B (59), green 82 (130), and blue F6 (246). HSL is a genuine transformation: hue is the angle on the color wheel (0° red, 120° green, 240° blue), saturation is how far the color is from gray, and lightness runs from black (0%) through the pure color (50%) to white (100%).

This converter rounds HSL to whole numbers, so if you convert the HSL value back to RGB in another tool, a channel can land one step away from the original. When you need an exact color, keep the HEX or RGB value as the source of truth.

Building a palette with HSL

HSL makes it easy to derive a family of colors from one brand color. Keep the hue fixed, then step lightness up for tints and down for shades; lower the saturation for muted backgrounds and borders. Design systems usually generate a scale of 9 or 10 steps this way, which is why so many CSS frameworks define colors in HSL.

Check contrast before you ship

A color that looks fine in a design file can be hard to read on screen. Accessibility guidelines (WCAG 2) ask for a contrast ratio of at least 4.5:1 between body text and its background, and 3:1 for large text and interface elements. Light grays on white and saturated blues on black are the usual offenders. Run your final text and background pair through a contrast checker before using it for anything people need to read.

Frequently asked questions

What's the difference between RGB and HSL?: RGB defines a color by its red, green, and blue light intensities (0–255 each). HSL defines it by hue (a position on the color wheel), saturation, and lightness — which is often more intuitive for adjusting a color's brightness or vividness without changing its base hue.
Can I convert a color with transparency (alpha)?: This converter focuses on solid HEX/RGB/HSL values. For transparency, use the 8-digit HEX (#RRGGBBAA) or RGBA/HSLA formats supported by most modern CSS, adding the alpha value separately.
Why do designers use HSL instead of HEX?: HSL makes it easy to create consistent color palettes — you can keep the hue fixed and just adjust lightness or saturation to get lighter/darker or more/less vivid variants of the same base color, which is harder to do by eye in HEX or RGB.
Is a 3-digit HEX code the same as a 6-digit one?: Yes — a shorthand 3-digit HEX code like #38F is equivalent to doubling each digit to get the full 6-digit form, #3388FF. This tool accepts both formats.