Color Picker - HEX, RGB, HSL, HSV, and CMYK Values

Color Picker for HEX, RGB, HSL, HSV, and CMYK

Color Picker is an online color picker that lets you choose any color visually and read its value in every common format at once. Drag inside the color square, slide the hue and opacity bars, or type a HEX code, and the HEX, RGB, RGBA, HSL, HSV, and CMYK values update instantly.

It is built for web developers, UI and graphic designers, and anyone who needs an exact color code without juggling separate converters. The built-in eyedropper grabs a color straight from your screen, while history and favorites keep your recent and saved colors one click away.

Private by design: every color is computed in your browser, and your history and favorites are saved only in your browser's local storage. Nothing is ever uploaded to a server.

How to Use the Color Picker

Pick a color

Click or drag inside the color square to set saturation (left to right) and brightness (bottom to top). Drag the Hue slider to change the base color across the full 0°–360° spectrum.

Set the opacity

Drag the Opacity slider to make the color anywhere from fully transparent to fully solid. The checkerboard preview and the RGBA and 8-digit HEX values reflect the alpha you choose.

Or enter a HEX code

Type directly into the HEX field to jump to a known color. It accepts 3-digit (#FFF), 6-digit (#FFFFFF), and 8-digit (#FFFFFFAA) values, and the picker snaps to match.

Copy the value you need

Use the copy button next to any format, or Copy All to copy HEX, RGB, RGBA, HSL, HSV, and CMYK at once with each on its own line. Click the heart to save the color to your favorites.

Features

Visual Color Picker

Pick colors intuitively with an HSV color square plus hue and opacity sliders, all updating in real time.

Multiple Color Formats

Read every color as HEX, RGB, RGBA, HSL, HSV, and CMYK simultaneously, ready for web or print.

EyeDropper Tool

Grab any color from anywhere on your screen using the browser's native eyedropper, available in Chrome and Edge.

Random Color Generator

Generate a fresh color with balanced saturation and brightness whenever you need quick inspiration.

History & Favorites

Your last 50 picked colors are tracked automatically, and favorites stay saved for one-click reuse.

Your Data Stays Private

All processing runs in your browser and your colors stay in local storage, never uploaded or tracked.

Frequently Asked Questions

How do I pick a color from my screen?

Click the Pick from screen eyedropper button, then click any pixel anywhere on your display. The picker reads that exact color and shows its HEX, RGB, and other values. This uses the browser's native EyeDropper, so it works in Chrome and Edge.

What is a HEX color code?

A HEX code is the standard web format that writes a color as #RRGGBB using hexadecimal digits, such as #FF5733. It carries the same red, green, and blue information as an RGB value like rgb(255, 87, 51), just in a shorter notation. An 8-digit HEX like #FF5733AA adds an alpha (opacity) channel.

How do I convert HEX to RGB?

Type or paste the HEX code into the HEX field and the RGB value appears instantly in its own box, ready to copy. You do not have to do any math; the picker handles HEX, RGB, RGBA, HSL, HSV, and CMYK conversions for you at the same time.

When should I use HSL versus HSV?

HSL (Hue, Saturation, Lightness) is widely supported in CSS and web styling. HSV (Hue, Saturation, Value) is common in design tools like Photoshop and Figma because Value maps closely to how we perceive brightness. Both describe the same picker; choose whichever matches your tool.

What is CMYK used for?

CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used for print. If you are preparing artwork to be printed, copy the CMYK value so your colors translate more accurately onto paper than an on-screen RGB value would.

What does the opacity / alpha value do?

Opacity controls how transparent the color is. At 100% it is fully solid, and at 0% it is fully see-through. Lowering it is useful for overlays, shadows, and layered designs, and the alpha is reflected in the RGBA value and the 8-digit HEX code.

Why doesn't the eyedropper button appear?

The eyedropper relies on the browser's native EyeDropper API, which is currently available in Chrome and Edge. In browsers that do not support it, such as Firefox and Safari, the button is hidden. You can still set any color by typing its HEX code instead.

Are my saved colors stored online?

No. Your favorites and history are saved only in your browser's local storage, so they stay on your device and persist across sessions. Nothing is uploaded, and you can clear the history or favorites at any time.