Color Picker
Pick colors from a native browser picker or screen eyedropper and copy HEX, RGB, or HSL values for design and code.
This free color picker helps frontend developers and designers grab colors quickly and convert them into practical code-friendly formats.
Use it to pick shades from the browser picker or screen eyedropper, then copy HEX, RGB, or HSL values for CSS, design systems, and UI work.
Pick a Color
EyeDropper is available in supported browsers only.
Color Values
#2563EB
rgb(37, 99, 235)
hsl(221, 83%, 53%)
Color Format Tips
Short comparisons and tips to help you choose the right option faster.
HEX vs RGB vs HSL
HEX is compact and common in CSS. RGB is useful when you need explicit red, green, and blue channel values. HSL is useful when adjusting hue, saturation, and lightness more intuitively.
When an eyedropper helps most
An eyedropper is especially useful when matching colors from screenshots, brand assets, live pages, mockups, or existing interfaces.
How to Use
Follow these quick steps to get the result you need.
Use the screen picker or color field to choose the shade you want.
Check the generated HEX, RGB, and HSL values in the output cards.
Copy the format you need or tap a swatch to reuse common colors quickly.