Color formats explained
HEX — A 6-digit hexadecimal code (e.g. #FF5733). Used in HTML, CSS, and most design tools. The most widely recognized color format on the web.
RGB — Specifies Red, Green, Blue channels from 0–255 (e.g. rgb(255, 87, 51)). Matches how screens physically produce color.
HSL — Hue (0–360°), Saturation (0–100%), Lightness (0–100%). More intuitive for designers — adjusting lightness or saturation is straightforward.
When to use each format
- HEX — CSS stylesheets, design hand-off, brand guidelines
- RGB — CSS, digital artwork, screen-based design systems
- HSL — CSS variables, theming, dynamic color manipulation
- CMYK — Print design (convert via colourpicker.org)
- Pantone — Brand matching across print and physical materials
Frequently Asked Questions
What is a HEX color code?
A HEX color code is a 6-character hexadecimal string prefixed with # that encodes the RGB values of a color. Each pair of characters represents the red, green, and blue channel — from 00 (none) to FF (maximum). For example, #FF0000 is pure red, #000000 is black, #FFFFFF is white.
What is the difference between RGB and HSL?
RGB (Red, Green, Blue) defines a color by mixing light channels from 0 to 255. HSL (Hue, Saturation, Lightness) is a more designer-friendly representation: hue is the position on the color wheel (0°–360°), saturation controls vividness (0–100%), and lightness controls brightness (0–100%). Both represent the same colors — HSL is often easier to adjust intuitively.
How do I convert HEX to RGB?
Split the 6-digit hex code into three pairs and convert each from base-16 to base-10. For example: #0f172a → 1a=26, 1a=26, 2e=46 → rgb(26, 26, 46). The color picker does this automatically — just paste a HEX value and all formats update instantly.
Does the color picker work on mobile?
Yes — the tool is fully responsive and works on any device. On mobile, tapping the color preview opens the native system color picker for precise selection.
Is the color picker free?
Yes — completely free with no account required and no usage limits.
How do I pick a color from my screen?
Click the blue Pick color from screen button at the top of the picker. On Chrome and Edge, this activates the browser's eyedropper — your cursor becomes a crosshair so you can click any pixel on your entire screen, including inside images, videos, or other windows. The HEX, RGB, and HSL values update instantly.
How do I get the HEX code of a color I can see on screen?
Activate the eyedropper with the Pick color from screen button, hover over the pixel you want, and click. The HEX code (e.g. #FF5733) appears in the HEX field and is ready to copy. Works on any visible color — websites, photos, UI elements, or design tools.
Can I sample a color from a photo or image?
Yes. Open your image in any app or browser tab, click Pick color from screen, then click any pixel in the image. The color is sampled from that exact pixel, regardless of which window or application it belongs to.
Which browsers support the on-screen eyedropper?
The EyeDropper API is supported in Chrome 95+, Edge 95+, and Opera 81+. In Firefox or Safari the button falls back to the native system color dialog instead.
How do I find a color's CSS value?
The CSS field shows the value formatted as color: #RRGGBB; — ready to paste directly into a stylesheet. Use the RGB or HSL fields if your project uses those formats.
Does the color picker send my data to a server?
No. All color processing happens entirely in your browser. No color values, palette data, or any other information is ever sent to a server — your data never leaves your device.