UtilityBaseImage Tools
Color Picker
Pick a color and get HEX, RGB, and HSL values with shades and tints.
Updated February 5, 2026
How to use the color picker
- 1Pick a color visually, type any HEX/RGB/HSL value, or use the eyedropper.
- 2Read the synchronized HEX, RGB, and HSL values.
- 3Click a value or swatch to copy it.
Common uses
- Convert a brand HEX code to RGB or HSL for CSS.
- Sample an exact color from anywhere on screen.
- Generate lighter and darker variants for a UI palette.
Frequently asked questions
How does the eyedropper work?
In browsers that support the EyeDropper API (Chrome and Edge on desktop), the eyedropper lets you click any pixel on your screen — even outside the browser — and returns its exact color. In other browsers the button is hidden and you can pick or type colors instead.
What's the difference between HEX, RGB, and HSL?
They describe the same colors differently. HEX (#1A73E8) is compact and common in CSS; RGB lists red, green, and blue components; HSL expresses hue, saturation, and lightness, which is the most intuitive format for adjusting a color.
What are tints and shades?
Tints are the color mixed toward white; shades are mixed toward black. The generated scale gives you lighter and darker variants of your color for hover states, backgrounds, and text.
Can I copy the values?
Yes — click any format or swatch to copy it to your clipboard.
About this tool
The color picker converts between the color formats you actually use: pick visually or type a value, and get matching HEX, RGB, and HSL instantly, plus a generated scale of tints and shades for building palettes. In supporting browsers, the eyedropper button samples any pixel on your screen — including outside the browser window. Designed for designers matching brand colors, developers translating between CSS formats, and anyone who needs 'that exact color' with one click.
Like everything on UtilityBase, the color picker runs entirely in your browser — nothing you enter is uploaded or stored on a server. It's free to use with no account required. Browse more image tools here.
Was this tool helpful?
Related tools
Fullscreen Color
Pick any color and display it fullscreen with brightness control.
Screen Tools
Image Resizer
Resize images to exact pixels — right in your browser, nothing uploaded.
Image Tools
Image Compressor
Shrink image file sizes with a quality slider — no upload, instant preview.
Image Tools
Aspect Ratio Calculator
Solve missing dimensions for 16:9, 4:3, and any custom aspect ratio.
Calculators
EXIF Viewer & Remover
See a photo's hidden metadata — including GPS location — and strip it all.
Image Tools