Pick a color and instantly get its HEX, RGB, and HSL values, plus a full range of shades and tints. Everything updates live and runs entirely in your browser.
How This Color Picker Works
Use the color wheel to pick any color, or type a HEX code directly into the HEX field. The RGB and HSL values update instantly, and you can click "Copy" next to any field to copy that value to your clipboard. The shades and tints row below shows lighter and darker variations of your chosen color, and clicking any of them loads that shade into the tool.
Understanding Color Formats
- HEX. A six digit code made up of three pairs of characters representing red, green, and blue, widely used in CSS and design tools.
- RGB. Red, green, and blue values from 0 to 255 each, describing how much of each color channel is mixed together.
- HSL. Hue, saturation, and lightness, a format that is often more intuitive for adjusting a color's brightness or intensity without changing its base tone.
Who This Tool Is For
Designers and developers who need to convert between color formats, anyone building a website or app who wants matching shades of a brand color, and students or hobbyists learning how digital color works.
Frequently Asked Questions
Is this color picker free to use?
Yes, completely free with no limit on how many colors you can pick or convert, and no account is required.
Does this tool store or send my color choices anywhere?
No. Everything happens directly in your browser using JavaScript. Nothing you pick or type is sent to a server or saved anywhere.
Can I type in a HEX code instead of using the color wheel?
Yes. Type any valid three or six digit HEX code into the HEX field, with or without the leading hash symbol, and the tool will update automatically.
What are shades and tints used for?
Shades and tints are lighter and darker variations of a base color, commonly used in design for hover states, borders, backgrounds, and creating a consistent color palette from a single brand color.