Color Picker & Converter — RGB, HEX, HSL
Pick any color from anywhere on your screen, or convert instantly between HEX, RGB, and HSL.
Tip: in Chrome or Edge, a "pick from screen" eyedropper appears here — it can sample any pixel on your display, even outside the browser.
#071E93rgb(7, 30, 147)hsl(230, 91%, 30%)Convert any color between HEX, RGB, and HSL instantly. Pick a color visually, paste a HEX code, type RGB or HSL values — or use the screen eyedropper to sample any pixel anywhere on your display, even in another app. Every format stays in sync, with copy-ready CSS strings for each.
How to use
- Pick a color with the visual picker, type into any field (HEX, RGB, or HSL) — or click "Pick color from screen" and click any pixel on your display, including outside the browser.
- All other formats update instantly.
- Click Copy next to the format you need — the values are ready to paste into CSS.
Frequently asked questions
What's the difference between HEX, RGB, and HSL?
They describe the same colors differently. HEX (#071E93) is compact and the web's most common notation. RGB (rgb(7, 30, 147)) expresses red, green, and blue components — useful when adding transparency with rgba(). HSL (hsl(229, 91%, 30%)) expresses hue, saturation, and lightness — the most intuitive for adjusting a color, like making it lighter or more muted.
When should I use HSL in CSS?
Use HSL when you need color variations: keeping hue and saturation fixed while changing lightness gives you consistent tints and shades of a brand color — much easier than guessing HEX values.
Does this support 3-digit HEX codes?
Yes — shorthand like #fff or #1a9 expands automatically to the full 6-digit form (#ffffff, #11aa99).
Are RGB-to-HEX conversions exact?
Yes — HEX is simply RGB written in base-16, so converting between them is exact in both directions. HSL round-trips can shift a value by ±1 due to rounding, which is imperceptible in practice.
How does the screen eyedropper work?
It uses the browser's native EyeDropper API: click the button, your cursor becomes a magnifying loupe, and clicking any pixel — in this page, another tab, or a completely different application — captures that exact color. Nothing is recorded or uploaded; the API hands back only the single color you clicked. Supported in Chrome and Edge; Firefox and Safari haven't shipped it yet.
Quick reference: the three color notations
• HEX (#071E93) — six hexadecimal digits, two per channel. The most compact notation and the default in most design tools and CSS codebases.
• RGB (rgb(7, 30, 147)) — each channel 0–255. Use rgba() or the modern rgb(r g b / a) syntax when you need alpha transparency.
• HSL (hsl(229, 91%, 30%)) — hue on the color wheel (0–360°), saturation, and lightness. The most human-editable notation: change one number to get a lighter, darker, or more muted version of the same hue.
A practical workflow: define brand colors in HEX, manipulate them in HSL (tints and shades by moving lightness), and use RGB when a library or canvas API demands numeric channels.
Related free tools
- Image Converter — Convert images between PNG, JPG, and WebP right in your browser. Files never leave your device.
- Image Cropper — Crop images to any size or aspect ratio in your browser — square, 16:9, 4:3, or freeform.