QQuickKit

Color Picker

Convert between HEX, RGB and HSL

Color Preview

#3B82F6

rgb(59, 130, 246) · hsl(217, 91%, 60%)

HEX
RGB
HSL

About This Tool

Your CSS uses #3b82f6, the designer's Figma file shows rgb(59, 130, 246), and when you're adjusting lightness, HSL is the format that actually makes sense. They're all the same color — converting between them is just annoying. Edit any one of the three formats here and the others update immediately. There's also a native color picker if you want to choose visually.

Features

  • ✓All three formats stay in sync — Change HEX and RGB and HSL update instantly. Change any one — the other two follow.
  • ✓Pick colors visually — Click the color swatch to open your browser's native color picker. Choose with your eyes and all three fields fill in automatically.
  • ✓Copy each format separately — HEX, RGB, and HSL each have their own copy button. Grab exactly what you need for CSS, Tailwind, Figma, or wherever.
  • ✓Type values directly — Enter a HEX code, or adjust RGB (0–255) and HSL numbers precisely with the input fields.
  • ✓Live color preview — The large swatch at the top always shows the current color. Useful for a quick sanity check before copying.

FAQ

What's the difference between HEX, RGB, and HSL?
They describe the same color three different ways. HEX is the most compact and shows up everywhere in CSS. RGB describes the color as light mixing ratios, which works well for math operations. HSL is the most human-intuitive — to make a color lighter, raise L; to make it more vivid, raise S. Pick whichever fits your tool.
Why is the Hue range 0–360?
Hue is an angle on a color wheel — 0° and 360° are both red, 120° is green, 240° is blue. This makes color relationships intuitive: complementary color is +180°, analogous colors are ±30°.
What about RGBA and HSLA?
Those add an Alpha channel for transparency — 0 is fully transparent, 1 is fully opaque. This tool works with solid colors only. For transparency, add the alpha parameter manually in CSS: rgba(59, 130, 246, 0.5) for 50% opacity.
Are #fff and #ffffff the same?
Yes. CSS allows 3-digit shorthand where each digit is doubled — #fff expands to #ffffff (white), #000 expands to #000000 (black). This tool outputs full 6-digit format for clarity.

Further Reading