Color Picker/ HEX · RGB · HSL
Pick, convert and explore colors. Supports HEX, RGB, HSL, HSV with lightness scales and harmony palettes.
Color values
Presets
Lightness scale
Color harmonics
Complementary
Analogous
Triadic
Did this tool solve your problem?
Frequently Asked Questions
What color formats does this tool support?
The tool supports HEX (e.g. #6366f1), RGB (e.g. rgb(99, 102, 241)), HSL (e.g. hsl(239, 84%, 67%)), and HSV/HSB. You can type any of these in the input field and it will be parsed and converted automatically.
What is the EyeDropper / screen color picker?
The eyedropper button lets you click anywhere on your screen to pick that pixel's color. This uses the browser's EyeDropper API, which is available in Chrome, Edge, and Opera. It's not supported in Firefox or Safari yet.
What is a lightness scale?
The lightness scale shows 9 shades of your chosen color from very dark (10% lightness) to very light (90%), all at the same hue and saturation. This is useful for building consistent color palettes for UI design.
What are color harmonics?
Color harmonics are sets of colors that look visually pleasing together. Complementary colors are opposite on the color wheel (high contrast). Analogous colors are neighbors (harmonious). Triadic uses three colors equally spaced (vibrant and balanced).
What is the difference between HSL and HSV?
Both use Hue and Saturation, but the third component differs. HSL uses Lightness (0% = black, 50% = pure color, 100% = white). HSV uses Value/Brightness (0% = black, 100% = full brightness). HSV is often used in creative tools like Photoshop; HSL is more common in CSS.
How do I use the colors in CSS?
Copy the HEX value (e.g. #6366f1) for the most common use. Use the RGB value for rgba() with transparency: rgba(99, 102, 241, 0.5). Use the HSL value when you want to programmatically adjust lightness or saturation in CSS custom properties.