🎨

Color Picker

Pick any color and instantly convert between HEX, RGB, HSL and CMYK — get palettes, tints, shades and more

Click to
pick color

HEX

RGB

HSL

CMYK

CSS NAME

—

CONTRAST ON WHITE

—

☀️ Tints (lighter)

🌑 Shades (darker)

🎨 Color Harmonies

🇮🇳 Popular Colors

Understanding Color Formats

HEX (hexadecimal) is the most common format in web design — a # followed by 6 digits representing red, green, and blue values from 00 to FF. RGB expresses the same values as decimal numbers from 0–255. HSL (Hue, Saturation, Lightness) is more intuitive for designers — hue is the color angle (0–360°), saturation is colorfulness (0–100%), lightness is brightness (0–100%). CMYK is used in print design — Cyan, Magenta, Yellow, and Key (Black).

Tints and Shades

A tint is a color mixed with white (lighter version). A shade is a color mixed with black (darker version). When building a design system or brand palette, you typically need a full range of tints and shades — from very light (for backgrounds) to very dark (for text).

Frequently Asked Questions

Contrast ratio measures how readable text is against a background. WCAG (Web Content Accessibility Guidelines) requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text to ensure readability for people with visual impairments.

You can use HEX (#e05c2a), RGB (rgb(224,92,42)), or HSL (hsl(21,72%,52%)) directly in CSS. HSL is often preferred for UI design because you can intuitively adjust hue, brightness and saturation independently.

RGB (Red, Green, Blue) is an additive color model used for screens. CMYK (Cyan, Magenta, Yellow, Black) is a subtractive model used for printing. Colors can look different between screen and print — always convert to CMYK before sending files to a printer.