Color Picker
Pick colors visually
Color Values
Frequently Asked Questions
How do I use the Color Picker?
Click anywhere on the color spectrum to select a hue, then adjust saturation and brightness using the gradient panel. The selected color's HEX, RGB, HSL, and CMYK values update in real time. You can also type a color code directly.
What color formats does the picker support?
The picker displays colors in HEX (#FF5733), RGB (rgb(255,87,51)), HSL (hsl(11,100%,60%)), HSV, and CMYK. Click any value to copy it to your clipboard. All formats update simultaneously when you change the color.
Can I pick a color from my screen or an image?
Upload an image and click any pixel to extract its exact color. The eyedropper tool identifies the precise HEX, RGB, and HSL values of any point in the uploaded image, making it easy to match colors from existing designs.
How do I find lighter and darker shades of a color?
The picker generates tints (adding white) and shades (adding black) automatically. It shows 10 steps from lightest to darkest for your selected color, with copyable HEX codes for each step. This is useful for creating consistent UI color scales.
What is the difference between HSL and HSV color models?
Both use hue (0-360°) and saturation, but differ in the third component. HSL uses lightness (0%=black, 50%=pure color, 100%=white). HSV uses value/brightness (0%=black, 100%=pure color). HSL is more intuitive for web design.