CHROMA
Free online color picker

Pick a color. Copy the code.

Drag to find the exact shade, then copy HEX, RGB, HSL, HSV, CMYK or LAB with a single click. Includes a screen eyedropper and image color extraction.

Picker

Color codes

Nearest CSS color name tomato Relative luminance 0.29

Click any row to copy it to your clipboard.

02 / IMAGE

Pick from an image

Drop or upload an image, then click anywhere on it to grab that pixel. Your file never leaves the browser.

Choose an image or paste (⌘V)
Click the image to sample that pixel.
03 / HARMONY

Harmony palettes

Palettes generated from your color. Click a swatch to make it the active color.

04 / SCALE

Color scale (50 → 900)

Drop-in tints and shades for a design system. 500 is your picked color.

05 / CONTRAST

Contrast checker (WCAG)

Checks your color as text and as background. Body text should reach 4.5:1 or better.

07 / MORE

Converters

HEX → RGBHEX to RGB Converter RGB → HEXRGB to HEX Converter HEX → HSLHEX to HSL Converter HSL → HEXHSL to HEX Converter RGB → HSLRGB to HSL Converter HEX → CMYKHEX to CMYK Converter RGB → CMYKRGB to CMYK Converter HEX → OKLCHHEX to OKLCH Converter OKLCH → HEXOKLCH to HEX Converter RGB → OKLCHRGB to OKLCH Converter

Color names

Colors you can write by name in CSS and HTML, grouped by family. Open one to get its codes, palettes and contrast checks.

Tomato Gold Teal Dodgerblue Blueviolet Hotpink Seagreen Crimson Orange Slategray
All 141 CSS color names →
06 / GUIDE

How to use the color picker

Move horizontally in the square to change saturation and vertically to change brightness. The first slider sets hue, the second sets alpha. Focus a handle and use the arrow keys for single-step nudges, or hold Shift to move in tens.

The input accepts almost anything you paste: #3B82F6, rgb(59 130 246), hsl(217, 91%, 60%), hsv(217, 76%, 96%), cmyk(76%, 47%, 0%, 4%) and CSS names such as tomato.

The eyedropper grabs a color from anywhere on your screen in browsers that support the EyeDropper API (Chrome, Edge). In Safari and Firefox, upload an image and click it to do the same thing. Images are processed locally and never uploaded.

Frequently asked questions

What is the difference between HEX and RGB?

They describe the same color. HEX (#FF6347) writes red, green and blue as two hexadecimal digits each; RGB (255, 99, 71) writes the same numbers in decimal. CSS accepts both, and for transparency you use rgba() or an 8-digit HEX.

Which values should I use for print?

Print uses CMYK. The CMYK shown here is a plain mathematical conversion without an ICC profile, so treat it as a starting point and follow the profile or Pantone reference your printer specifies.

Why does contrast matter?

Text with too little contrast against its background is hard to read. WCAG 2.1 asks for at least 4.5:1 for body text and 3:1 for large text (18pt and up). The contrast section tells you instantly whether your color passes.

Where do my uploaded images go?

Nowhere. Images are opened inside your browser only, used to read pixels, and discarded when you close the page. Saved colors live in this browser’s local storage.

Is it free?

Yes — no sign-up required. Advertising on the page covers the running costs.