Color HEX ↔ RGB ↔ HSL

Convert colors between HEX, RGB, and HSL formats with a live swatch and color picker. Instantly copy CSS-ready color values for your projects.

Color HEX ↔ RGB ↔ HSL Converter

Convert colors between HEX, RGB, and HSL formats with a live swatch. Copy CSS-ready values.

Pick Color

HEX

RGB

HSL

H (0–360)

S (0–100)

L (0–100)

100% local

How to use Color HEX ↔ RGB ↔ HSL

1
Use the color picker or type a HEX value to choose your color.
2
See the equivalent RGB and HSL values update instantly.
3
Click any output button to copy the CSS-ready value.

Frequently Asked Questions

What is the difference between RGB and HSL?

RGB defines color by its Red, Green, and Blue components. HSL (Hue, Saturation, Lightness) is more intuitive — you can adjust brightness or vibrancy without recalculating all three channels.

Why do designers prefer HSL?

HSL makes it easy to create color variations. Want a lighter shade? Just increase Lightness. Want a muted version? Lower the Saturation.

Three Color Formats, One Tool

If you work with web design, front-end development, or any kind of digital graphics, you have definitely encountered all three of these color formats: HEX, RGB, and HSL. Each one describes the same color differently, and each one has its own strengths depending on what you are doing.

Our color converter makes it effortless to go between all three. Use the color picker to choose any shade visually, or type a specific HEX code, then copy the RGB or HSL value for your CSS, Figma, or code project.

Understanding the Three Formats

HEX (#RRGGBB) is the most common format in web design. Each character pair represents the intensity of Red, Green, and Blue from 00 (none) to FF (full). The color white is #FFFFFF, black is #000000, and a vibrant blue is #3B82F6.

RGB (rgb(R, G, B)) also represents Red, Green, and Blue, but as numbers from 0 to 255 instead of hex characters. It is popular in CSS because it is very readable. rgb(59, 130, 246) is the same blue as #3B82F6.

HSL (hsl(H, S%, L%)) stands for Hue, Saturation, and Lightness. Many designers prefer this format because it is the most intuitive for making color variations:

Hue (0–360): The color wheel angle. 0 = red, 120 = green, 240 = blue.
Saturation (0–100%): How vivid the color is. 0% is grey, 100% is fully saturated.
Lightness (0–100%): How light the color is. 0% is black, 100% is white, 50% is the pure color.

Why Designers Use HSL

Suppose you have a button with a specific brand color. You want a darker version for the hover state, and a very light tint version for the background. With HSL you just reduce or increase Lightness — no need to reverse-engineer a new HEX code. In CSS: hsl(217, 91%, 60%) becomes hsl(217, 91%, 45%) for a darker shade.

How to Use the Converter

Click the color picker rectangle to open the browser's native color chooser and visually pick any color.
Or type a HEX code directly into the HEX input field.
Or adjust the RGB or HSL input numbers for fine-grained control.
All three formats update live in sync.
Click any of the three output tabs to copy the CSS value.