Color Picker – HEX, RGB, HSL, CMYK Online

What Is This Color Picker?

A comprehensive browser-based color picker that shows HEX, RGB, HSL, HSV, CMYK, and CSS values simultaneously. Pick any color visually using the canvas, hue slider, and opacity slider — or type in a HEX code directly. All values update in real time.

Features

• Visual picker: click or drag on the saturation/brightness canvas to pick exact colors
• Multiple formats: HEX, RGB, HSL, HSV, CMYK, and CSS rgba with one-click copy
• Color harmonies: complementary, triadic, analogous, split-complementary
• Tints and shades: 10 tints (lighter) and 10 shades (darker)
• Tailwind match: closest Tailwind CSS color class for your selection
• Recent colors: last 20 picked colors saved in localStorage

Understanding Color Formats

HEX

A 6-digit hexadecimal code prefixed with # (e.g., #3b82f6). Most common in web design. Pairs of hex digits represent the red, green, and blue channels.

RGB

Red, Green, Blue values each in the range 0–255. The additive color model used by screens.

HSL

Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Easier to reason about than RGB — hue is the color name, saturation is intensity, lightness is brightness.

CMYK

Cyan, Magenta, Yellow, Key (Black) — the subtractive model used in print. Useful for checking print-safe color values.

Frequently Asked Questions