Color Picker

Pick any color visually and get values in hex, RGB, HSL, and CMYK. Interactive saturation panel and hue slider.

Color Picker tool

Loading...

Example

Input: Hex #C4653A typed into the manual input

Result: HEX #C4653A, RGB rgb(196, 101, 58), HSL hsl(19, 54%, 50%), CMYK cmyk(0%, 48%, 70%, 23%)

All formats describe the same color. CMYK is estimated from RGB: black K = 1 - 196/255 = 23%, and the other inks are scaled by the remaining brightness.

  1. Click anywhere on the saturation-lightness panel to select a color visually, or drag to explore different shades and tones.
  2. Use the hue strip below the panel to change the base hue across the full 360-degree color spectrum.
  3. Optionally type an exact hex code into the Manual Input field to jump directly to a specific color.
  4. View all output formats simultaneously - hex, RGB, HSL, and CMYK - updating in real time as you pick.
  5. Click the copy button beside any format to copy that color value to your clipboard for immediate use.

Picking Colors in HEX, RGB, HSL and CMYK

This color picker lets you choose a color by eye. It shows the result in four formats at once: HEX, RGB, HSL and CMYK. Drag across the square panel to set saturation and lightness, move the hue strip to change the color family, then copy the code you need.

The panel is laid out in HSL terms. Moving right adds saturation, from gray on the left to full color on the right. Moving up makes the color lighter, toward white at the top and black at the bottom. The hue strip runs through all 360 degrees of the color wheel. Both work with a mouse or a finger. If you already have a code, type a 3- or 6-digit hex value into Manual Input and the picker jumps to it. Each format has its own copy button, and the red, green, blue and hue numbers are shown on their own too. For RGB or HSL input, the RGB to HSL Converter and HSL to Hex Converter take those values directly.

Treat the CMYK numbers as a rough guide. They come from a simple formula, where black K = 1 minus the largest RGB channel, with no printer profile. Real print colors depend on the paper, ink and press, so ask for a proof when an exact match matters. Many bright screen colors fall outside what CMYK inks can print.

Sources

Frequently Asked Questions

Drag on the panel and the hue strip until the preview matches, then copy the HEX value. To match a color from a photo or screenshot, an image color extractor works better, because it reads the pixels of the picture. This picker cannot sample colors from outside the page.
This picker converts RGB to CMYK with a basic formula and no color profile. Print programs use ICC profiles for a specific paper and press, and they apply ink limits. So their numbers differ from a plain formula. Use these CMYK values for rough planning and your print software for final files.
Use HEX, RGB or HSL for anything shown on a screen: websites, apps, slides and social images. CSS accepts all three. Use CMYK only for print, with final values from your printer or print software. Of the screen formats, HSL is the easiest to adjust by hand.
Yes. The panel and the hue strip respond to touch, so you can drag with a finger. The copy buttons put each value on your clipboard, ready to paste into another app.

Related Tools

Hex to RGB Converter

Convert hexadecimal color codes to RGB values instantly. Supports shorthand and 8-digit hex with alpha.

Color Tools

RGB to HSL Converter

Convert RGB color values to HSL format. See hue, saturation, and lightness with a live color preview.

Color Tools

HSL to Hex Converter

Convert HSL color values to hexadecimal codes. Enter hue, saturation, and lightness for instant hex output.

Color Tools

Color Palette Generator

Generate harmonious color palettes. Create complementary, analogous, triadic, and split-complementary schemes.

Color Tools

Color Name Finder

Find the closest named CSS color for any hex color code. Identify colors by their standard names instantly.

Color Tools

Color Contrast Checker

Check color contrast ratios for WCAG AA and AAA compliance. Ensure your text is readable and accessible.

Color Tools