Loading...
Tool location: /dev/color-picker
Pick colors and instantly convert between different color formats including HEX, RGB, HSL, and HSV. Essential for web developers, designers, and anyone working with digital colors.
Use the color picker to visually select your desired color. Click and drag on the color area to choose hue and saturation.
If you have a specific color value, enter it directly:
Once a color is selected, see it in all supported formats. Each format updates automatically.
Click on any color format to copy it to your clipboard. Use the copied value in your CSS, design tool, or code.
Interactive color selection with hue slider and saturation/brightness area.
Instant conversion between HEX, RGB, HSL, and HSV.
Enter colors in any format and see conversions.
Large preview swatch of the selected color.
One-click copy for any color format.
Colors may appear differently on different monitors due to color calibration.
Some colors cannot be accurately represented in all formats (gamut limitations).
HEX colors in CSS require the # prefix.
A: They represent the same color space. HEX is a compact way to write RGB values - each pair of hex digits represents red, green, and blue (0-255 as 00-FF). For example, #FF0000 equals rgb(255, 0, 0) - pure red.
A: HSL stands for Hue, Saturation, Lightness. Hue is the color type (0-360 degrees), Saturation is color intensity (0-100%), and Lightness is brightness (0-100%). This format is more intuitive for humans to adjust.
A: HSL is more intuitive for creating color variations. To make a color lighter, just increase lightness. To make it more muted, decrease saturation. With RGB, you need to adjust all three values proportionally.
A: Add 180 degrees to the hue value in HSL to get the complementary color. For example, if your color has hue 30, the complement is hue 210. The saturation and lightness can remain the same.