Dev Tools

Hex to RGB Converter

Convert between Hex, RGB, and HSL color formats. Bidirectional conversion with live color preview and one-click copy.

Quick Answer

Hex to RGB: split the 6-digit hex into 3 pairs and convert each from base-16 to base-10. #FF5733 = rgb(255, 87, 51). Each pair represents Red, Green, Blue channels (0-255).

Hex#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)

Red: 59 (23.1%)

Green: 130 (51.0%)

Blue: 246 (96.5%)

Hue: 217 | Saturation: 91% | Lightness: 60%

About This Tool

The Hex to RGB Converter is a bidirectional color format converter for designers and developers. Enter a hex code to see its RGB and HSL equivalents, or enter RGB values to get the hex code. The live color preview helps verify you have the right color before copying it into your code.

Color Format Guide

Hex codes are the most compact representation, using just 6 characters. RGB is the native format for screens and is useful when you need to manipulate individual channels programmatically. HSL is the most human-friendly format, letting you easily adjust hue (color), saturation (vividness), and lightness (brightness) independently.

CSS Color Usage

Modern CSS supports all three formats: hex (#3B82F6), rgb(59, 130, 246), and hsl(217, 91%, 60%). All render identically. CSS also supports transparency via rgba() and hsla(), or 8-digit hex. Choose the format that best fits your workflow and team conventions.

Frequently Asked Questions

How do you convert hex to RGB?
A hex color like #3B82F6 has three pairs of hexadecimal digits. Split it into pairs: 3B, 82, F6. Convert each pair from hex to decimal: 3B = 59, 82 = 130, F6 = 246. So #3B82F6 = rgb(59, 130, 246). Each pair represents red, green, and blue intensity from 0-255.
What is the difference between hex and RGB?
Both represent the same colors using the same RGB model. Hex uses base-16 notation (#RRGGBB) which is compact and widely used in CSS. RGB uses decimal notation (rgb(R, G, B)) with values 0-255 for each channel. They are interchangeable; hex is just a more compact way to write the same information.
What is HSL color?
HSL stands for Hue, Saturation, Lightness. Hue is the color angle on the color wheel (0-360: 0=red, 120=green, 240=blue). Saturation is the intensity (0%=gray, 100%=full color). Lightness is brightness (0%=black, 50%=normal, 100%=white). HSL is more intuitive for adjusting colors because each component maps to a human-understandable attribute.
When should I use hex vs RGB vs HSL?
Use hex for CSS shorthand and when sharing colors (it is the most universal format). Use RGB when you need to manipulate individual color channels programmatically. Use HSL when you want to create color variations (darken, lighten, desaturate) since adjusting lightness and saturation is more intuitive than changing RGB values.
What does the # symbol mean in hex colors?
The # prefix indicates that the following characters are a hexadecimal color code, not a regular number or text. It is required in CSS but optional in some design tools. Shorthand hex like #F00 expands to #FF0000. Some tools also support 8-digit hex (#RRGGBBAA) where the last two digits represent alpha (opacity).

Was this tool helpful?

You might also like

Tax & Finance

Self-Employment Tax Estimator

Calculate your quarterly SE tax payments and deductions.

⏱ 2 minFinance

Compound Interest Calculator

See how your money grows with compound interest over time.

⏱ 1 minCareer

Freelance Rate Calculator

Find your ideal hourly, daily, and project rates.

⏱ 3 min