Color Picker
Pick any color and instantly get HEX, RGB, HSL, and CMYK codes. Fine-tune with precision sliders, enter values manually, or open your system color picker. Free online color picker tool — no signup needed.
RGB Sliders
HSL Sliders
H = Hue (0–360°) · S = Saturation (0–100%) · L = Lightness (0–100%)
Popular Colors
How to Use This Color Picker
Click the color swatch at the top to open your system's native color picker, the same one your operating system uses everywhere. You can also type a HEX code directly into the text field, or drag the RGB and HSL sliders for precise control. All inputs stay in sync: change one and the others update instantly.
HEX: the web standard
A HEX code like #3B82F6 is six hexadecimal digits (two each for red, green, and blue). It's the most widely used format in CSS, Figma, Sketch, and brand guidelines. Both uppercase and lowercase are valid.
RGB: three independent channels
RGB describes a color as three numbers from 0 to 255, one for red, one for green, one for blue. rgb(59, 130, 246) is identical to #3B82F6. Use RGB when you need opacity control via rgba(), or when working with CSS custom properties that need separate channel values.
HSL: built for designers
HSL (Hue, Saturation, Lightness) is often the most intuitive format for designers. Hue is a 0–360° position on the color wheel. Saturation controls vividness: 0% is gray, 100% is the most vivid version of that hue. Lightness ranges from 0% (black) to 100% (white), with 50% being the true hue. HSL makes it easy to build consistent color families by tweaking lightness alone.
CMYK: for print
CMYK (Cyan, Magenta, Yellow, Black) is the color model used in professional print production. If you're handing off artwork to a printer, they'll need CMYK values. Printers can't reproduce the full RGB color gamut, so very bright or neon screen colors will shift when printed. Always request a physical proof for color-critical work.