Skip to main content
toolsxulo

Color Picker

Pick a color visually and get HEX, RGB, HSL, and CMYK, plus a contrast check.

HEX
#F2B705
RGB
rgb(242, 183, 5)
HSL
hsl(45, 96%, 48%)
CMYK
cmyk(0%, 24%, 98%, 5%)

Text contrast (WCAG)

As text on white1.82:1
AaAA failAAA fail
As text on black11.55:1
AaAA passAAA pass

How it works

This tool uses your browser's native color picker - the same swatch-and-slider interface built into every modern operating system - and instantly converts whatever you pick into every common color format at once, so you don't need four separate tools to get HEX, RGB, HSL, and CMYK for the same color. On supported browsers, the eyedropper button lets you sample a color from anywhere on your screen, not just within the page.

Read the full guide

How to use it

  1. Click the color swatch to open your browser's color picker, or use the eyedropper to sample a color from anywhere on screen.
  2. Choose any color visually, or type a HEX value directly.
  3. HEX, RGB, HSL, and CMYK values all update together - copy whichever one you need, and check the contrast section to see if it's readable as text.

Examples

Picked: golden yellow#F2B705 / rgb(242, 183, 5) / hsl(45, 92%, 48%)

Frequently asked

Where does the color picker interface come from?
It's your browser and operating system's built-in color picker, not something custom-built for this page - so it looks and works the way you're already used to.
Can I type a color value instead of clicking the swatch?
Yes, the HEX field accepts direct input if you already know the code you want, and it stays in sync with the color swatch in both directions.
What does the eyedropper button do?
On browsers that support the EyeDropper API (Chrome, Edge, and other Chromium-based browsers), it lets you sample any pixel on your screen - not just inside this page - and loads that exact color into the tool.