Color Picker

Pick colors and convert between HEX, RGB, HSL.

R
G
B
H
S
L

How to Use

Click on the color wheel or gradient panel to select a color, or enter a value directly in HEX, RGB, or HSL format. The tool converts between all three formats in real time. You can also adjust individual color channels using sliders and see a large preview of the selected color.

Common Use Cases

  • Finding the exact HEX code for a color seen in a design mockup
  • Converting RGB values from design tools to HEX for use in CSS
  • Adjusting hue, saturation, and lightness to fine-tune a brand color
  • Extracting color values to build a consistent design system palette

Frequently Asked Questions

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

HEX is a 6-digit hexadecimal code (#FF5733). RGB specifies red, green, and blue channels as 0-255 values. HSL uses hue (0-360 degrees), saturation (0-100%), and lightness (0-100%), which is more intuitive for adjusting colors.

Can I pick a color from my screen?

The tool provides an interactive color picker within the page. To sample colors from other parts of your screen, you can use your operating system built-in color picker or browser DevTools eyedropper.

Does the tool support transparency (alpha)?

The tool supports RGBA and HSLA formats with an alpha channel for transparency. You can adjust the opacity slider to set values between 0 (fully transparent) and 1 (fully opaque).