Make Tools
🎨

Color Picker

Visual color picker with screen dropper, HEX/RGB/HSL/CMYK output, and color history. Uses the EyeDropper API to sample colors from anywhere on your screen. RFC-compliant color space conversion.

#
#FFD500
rgb(255, 213, 0)
HEX#FFD500
RGBrgb(255, 213, 0)
HSLhsl(50, 100%, 50%)
CMYKcmyk(0%, 16%, 100%, 0%)
CSScolor: #FFD500;

Frequently Asked Questions

What is the EyeDropper API?
The EyeDropper API is a browser feature (Chrome 95+, Edge 95+) that lets you pick any color visible on your screen, including other applications and your desktop wallpaper. It works like a system-wide color picker.
What color formats does it output?
The tool outputs HEX (#RRGGBB), RGB (rgb(r,g,b)), HSL (hsl(h,s%,l%)), CMYK (cmyk(c%,m%,y%,k%)), and CSS property format. Click any value to copy it.
Can I pick colors from images?
Use the screen color picker (EyeDropper API) and point at any image on your screen. This works with images in any application, not just the browser.

Related Tools

🎨Color Converter (HEX, RGB, HSL)🎨CSS Formatter & Minifier🌈CSS Gradient Generator💨CSS Box Shadow Generator

How to Use

  1. 1 Drag the saturation/brightness panel or the hue slider to pick a color visually.
  2. 2 Type a HEX value directly into the input field to set an exact color.
  3. 3 Click the Screen Color Picker button to sample any color from your screen (Chrome/Edge).
  4. 4 Click Copy next to any color format (HEX, RGB, HSL, CMYK) to copy it to your clipboard.
  5. 5 Use the Recent Colors palette to quickly return to previously picked colors.