Pick your color
Pick a color with the swatch, the eyedropper, or by typing a code.
COLOR & DESIGN TOOLS · FREE ONLINE TOOL
Color Picker
Pick any color and get HEX, RGB and HSL values with a shade paletteDesigners and developers juggle color codes all day: a brand color from a logo, a hover state, a background that almost matches. This picker pulls those jobs into one place: swatch, screen sample or typed code, with HEX, RGB and HSL in sync.
// COLOR PICKER · GET STARTED
Use Color Picker
Pick any color and get HEX, RGB and HSL values with a shade palette
Advertisement
Nearest named CSS color: Royal Blue
Hue, saturation %, lightness %.
HEX#2563EB
RGBrgb(37, 99, 235)
HSLhsl(221, 83%, 53%)
Tints (mixed with white)
Click a swatch to copy its HEX
Shades (mixed with black)
Click a swatch to copy its HEX
Tones (mixed with grey)
Click a swatch to copy its HEX
Advertisement
How to use the Color Picker
Copy the code
Read the HEX, RGB and HSL values and copy the one you need.
Explore the palette
Browse the tints, shades and tones and click any swatch to copy it.
// COLOR PICKER · ABOUT THIS TOOL
About the Color Picker
This color picker keeps the everyday jobs in one place: synced HEX, RGB and HSL fields, a big live preview, and a screen eyedropper on browsers that support it.
It also generates tints, shades and tones from any base color, with every swatch copyable in one click.
Where it helps most
Whatever format your project needs, already on screen.
Brand matching
On Chrome and Edge, the eyedropper samples any pixel on your screen, even outside the browser window, for instant brand matching.
Hover states
Nudge HSL lightness up or down to build hover states and depth by hand, since HSL is the designer's friend for variations.
Full color scales
Three generated families turn one color into a full scale: tints toward white, shades toward black, and tones toward grey.
Client conversations
The tool names the nearest familiar CSS color, like Royal Blue, so you can describe the pick in plain words to a client.
Picking well
Which format to grab.
HEX for CSS
HEX is the default in CSS for solid colors, and the HEX field stays in sync with every change you make.
RGB for transparency
RGB fits when transparency enters the picture, with the RGB fields updating live right alongside the swatch as you drag.
HSL for variations
HSL is the designer's friend for variations, because nudging lightness up or down builds hover states and depth by hand.
Color Picker: private by design
No uploads, no account, just the codes. Copy what you need, paste it, move on.
Color Picker FAQs
Use the eyedropper button. In Chrome and Edge it taps the browser EyeDropper API to sample any pixel on your screen, even outside the browser window. Click the button, hover the target, and the color lands in the picker with all codes updated. Browsers without the API hide the button automatically.
