Color Picker
Pick any color from the spectrum and instantly get its HEX, RGB, HSL, and CMYK values. Perfect for designers and developers who need precise color codes.
Color Picker
Select any color to see its HEX, RGB, HSL, and CMYK values. Click any value to copy it to your clipboard.
#3b82f6
Understanding Color Formats
Every color on screen is represented by a set of values. Different formats serve different purposes, and knowing when to use each one saves time and prevents bugs.
HEX is the most common format in web design. It uses a hash followed by six characters (0-9, A-F) to represent red, green, and blue channels. Colors like #3b82f6 are compact and universally supported.
RGB defines colors by their red, green, and blue components, each ranging from 0 to 255. It is useful when you need to programmatically adjust brightness or combine colors through calculations.
HSL (Hue, Saturation, Lightness) is more intuitive for humans. Hue is the color on the wheel (0-360°), saturation is how vivid it is (0-100%), and lightness is how bright or dark (0-100%). It is ideal for creating color variations and themes.
CMYK (Cyan, Magenta, Yellow, Key/Black) is used in print design. If your project will be printed, always convert to CMYK first to ensure colors look the same on paper as they do on screen.
When to Use Each Format
Use HEX for CSS, design tools, and anywhere you need a quick, compact color code. It is the lingua franca of web colors.
Use RGB when you need to manipulate colors programmatically—adjusting opacity, blending, or generating dynamic color schemes in JavaScript.
Use HSL when you want to create harmonious variations. Need a lighter shade? Just increase the lightness. Want a more muted version? Decrease saturation.
Use CMYK for any print project—business cards, brochures, posters, packaging. Screen colors do not always translate to print, so CMYK ensures accuracy.