Color Picker & Converter

Convert colors between HEX, RGB, and HSL formats. Pick any color and copy CSS values instantly.

Click the color square to open the native color picker, or edit values below.

#3B82F6
rgb(59, 130, 246) • hsl(217, 91%, 60%)

HEX

RGB

HSL

CSS Values

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

How to Use the Color Converter

  1. 1. Click the color square to open the native color picker and choose any color visually.
  2. 2. Or type directly into the HEX field — all other formats update instantly.
  3. 3. Adjust RGB or HSL sliders to fine-tune the color.
  4. 4. Click Copy next to any format to copy the CSS value to your clipboard.

Frequently Asked Questions

What is the difference between HEX, RGB, and HSL?

HEX is a 6-digit hexadecimal notation (#rrggbb) used in HTML and CSS. RGB specifies Red, Green, Blue channels from 0–255. HSL stands for Hue (0–360°), Saturation (0–100%), Lightness (0–100%), which is more intuitive for adjusting brightness and vibrancy.

When should I use HSL over RGB?

HSL is better for design work because it maps to how humans perceive color. Need a lighter shade? Increase the L value. Need a more muted color? Decrease S. RGB is better for direct hardware color specification or when working with alpha channels (RGBA).

Can I input an HSL or RGB value to convert to HEX?

Yes — edit the RGB number inputs or use the sliders. The HEX field and all other formats update in real time as you change any value.

Why does the converted HSL look slightly different?

HEX and RGB use integer values, while HSL calculations involve floating point math. Rounding to whole numbers can cause tiny differences when converting back and forth, but the visual color will be imperceptibly close.