🖌

Color Picker

📁Design
💳FREE
🔄Updated March 2026

Pick any color visually and get its hex, RGB, HSL, and CMYK values.

Advertisement

What Is the Color Picker?

The Color Picker is a visual color selection tool that lets you choose any color from a spectrum and instantly get its value in every common format: hex, RGB, HSL, HSB, and CMYK. Click anywhere on the color gradient, adjust hue and saturation sliders, or type in a specific value to see the exact color you need.

What sets this tool apart from basic color pickers is the built-in contrast checker and color blindness simulator. Once you pick a color, you can pair it with another and see the WCAG contrast ratio immediately. The color blindness simulation shows how your chosen color appears to people with protanopia, deuteranopia, and tritanopia, helping you design for inclusivity.

Front-end developers use it while writing CSS, designers use it for mockup refinement, and accessibility consultants use it for compliance audits. The tool runs entirely in your browser and includes an eyedropper feature (where supported) that lets you pick colors from anywhere on your screen.

Pick a color now and get all format values instantly.

Key Features

All Format Output
Get hex, RGB, HSL, HSB, and CMYK values simultaneously for any color you select. One-click copy for each format.
Contrast Checker
Pair two colors and see their WCAG contrast ratio with AA and AAA pass/fail indicators for normal and large text.
Color Blindness Simulation
Preview how your selected color appears under protanopia, deuteranopia, and tritanopia to ensure your design is accessible to color-blind users.
Eyedropper Tool
Pick any color from your screen (supported browsers) to identify colors from existing designs, images, or websites.
Advertisement
Special Offer

⚡ Go Pro

Unlock unlimited Color Picker usage

  • ✓ No credit limits
  • ✓ Priority processing
  • ✓ API access
  • ✓ No ads
Upgrade Now

How to Use Color Picker

Select a Color
Open the Color Picker and click on the color gradient, use the hue slider, or enter a specific hex/RGB value.
Check Accessibility
Pair your chosen color with a background or text color and verify the contrast ratio meets WCAG AA (4.5:1) or AAA (7:1) standards.
Copy the Value
Click on any format (hex, RGB, HSL, CMYK) to copy it to your clipboard for use in your code, design tool, or style guide.

Frequently Asked Questions

What is a good contrast ratio for text?
WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (AA level) and 7:1 for AAA level. Large text (18px+ bold or 24px+ regular) can use 3:1 for AA compliance.
Does the eyedropper work in all browsers?
The EyeDropper API is supported in Chromium-based browsers (Chrome, Edge, Brave). Firefox and Safari have limited or no support, in which case you can use the manual gradient picker.
Can I convert between color formats?
Yes. Select or enter a color in any format and all other formats are calculated automatically. This is useful for converting designer-provided hex codes to CSS HSL values, for example.
Advertisement

Related Tools

Tags