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.
  2. 2.Or type directly into the HEX field.
  3. 3.Adjust RGB or HSL sliders to fine-tune.
  4. 4.Click Copy next to any format to copy the CSS value.

Frequently Asked Questions

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

HEX is a 6-digit hexadecimal notation. RGB specifies Red, Green, Blue from 0-255. HSL is Hue (0-360), Saturation (0-100%), Lightness (0-100%).

When should I use HSL over RGB?

HSL is more intuitive for adjusting brightness and vibrancy. Need lighter? Increase L. More muted? Decrease S.

Can I input RGB/HSL to convert to HEX?

Yes — edit the RGB inputs or sliders. All formats update in real time.

Why does converted HSL look slightly different?

HEX/RGB use integers while HSL involves floating point math. Rounding causes tiny imperceptible differences.