Color Picker & Converter
Pick colors and convert between HEX, RGB, HSL, CMYK formats
HEX
RGB
HSL
CMYK
CSS Variable
Tints
Shades
Understanding Color Formats
Colors on the web can be expressed in several formats. HEX codes like #1A73E8 are widely used in CSS. RGB defines colors by their Red, Green, and Blue light components. HSL (Hue, Saturation, Lightness) is more intuitive for human color perception. CMYK is used in print media.
This tool lets you pick any color and instantly see its value in all major formats, with one-click copy for each.
Color Format Reference
| Format | Example | Use Case |
|---|---|---|
| HEX | #1A73E8 | CSS, web design |
| RGB | rgb(26, 115, 232) | CSS, programming |
| HSL | hsl(214, 82%, 51%) | CSS, color theory |
| CMYK | cmyk(89%, 50%, 0%, 9%) | Print design |
Frequently Asked Questions
What is the difference between RGB and CMYK?
RGB is an additive color model used for screens 鈥?mixing red, green, and blue light to create colors. CMYK is a subtractive model used in printing 鈥?cyan, magenta, yellow, and key (black) inks absorb light to produce colors.
Why do colors look different on screen vs. print?
Screens emit light (RGB) while printed materials reflect light (CMYK). The two gamuts don't perfectly overlap, so some vibrant screen colors cannot be exactly reproduced in print. Always use CMYK values when designing for print.
What are tints and shades?
A tint is a color mixed with white, making it lighter. A shade is a color mixed with black, making it darker. Together they form a monochromatic palette useful for creating depth and visual hierarchy in design.
Which color format should I use in CSS?
HEX is the most common and compact format. HSL is more intuitive when you need to adjust lightness or saturation. RGB is useful when you need to manipulate individual color channels programmatically.