LiveImage
Color Picker from Image
Upload any image to extract its dominant colors. Click anywhere on the preview to pick a pixel’s HEX, RGB, or HSL code. Free, server-side processing.
Open toolHome › Tools › Developer Tools › Color Picker
Color Picker
Pick any color and instantly get the HEX, RGB, and HSL values. Copy any format in one click. Free — everything runs in your browser.
Every color on a screen is a number. HEX, RGB, and HSL are three ways to write that number — each in the format the tool in front of you wants.
HEX (#2D6A9F) is the web default: compact, widely supported, the format Figma, Sketch, and every browser devtools panel shows first. RGB (rgb(45, 106, 159)) is what image libraries, canvas APIs, and server-side code tend to expect — three decimal integers, no decoding needed. HSL (hsl(211, 56%, 40%)) is designed for the adjustments that come up most in practice: increase the L value and the color gets lighter; decrease S and it goes more muted; shift H and you move to a neighboring hue. All three describe the same color.
Pick the format your next paste target accepts. This picker shows you all three at once so you copy what you need and move on.
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
Recent colors
Pick a color to start your history.
About Color Picker
Color Picker is a free browser-based tool that shows the HEX, RGB, and HSL representations of any color instantly. Click the color swatch to open your browser's native color dialog, or type a hex code directly into the input. Every change updates all three formats in real time so you never have to convert manually.
One-click copy buttons make it fast to paste the right format wherever you need it — whether that's a CSS rule, a Figma fill, a design token, or a color argument in code. The recent colors strip keeps your last five picks so you can compare swatches or revisit a color without undoing your work.
Common use cases
- Find the RGB or HSL equivalent of a brand HEX code.
- Convert a designer's Figma color to the CSS format your stylesheet uses.
- Explore a color's hue, saturation, and lightness properties for programmatic adjustments.
- Pick a background color for a UI prototype and immediately copy it as a CSS value.
- Verify that two visually similar colors have identical HEX values.
Convert between HEX, RGB, and HSL in any direction with the Color Converter, or generate a QR code from a brand color URL with the QR Code Generator.
Also see
Extract colors from an image
Keep going
More developer tools
LiveDeveloper
JSON Formatter & Validator
Format, validate, and minify JSON in your browser. Syntax errors show exact line and column. Free, nothing uploaded.
Open toolLiveDeveloper
JWT Decoder
Decode and inspect JWT tokens — header, payload, and signature — without a library. Free, runs in your browser.
Open toolLiveDeveloper
URL Shortener
Create short links that redirect to any destination. No signup required. Free forever.
Open toolLiveDeveloper
QR Code Generator
Turn any URL, text, or contact into a scannable QR code. Download as PNG. Free, no account needed.
Open toolThe AT USE Color Picker shows the exact HEX, RGB, and HSL values for any color you choose, with one-click copy for each format. Designers use it to translate a color from one format to another, developers use it to generate CSS-ready values and build programmatic palettes, and anyone moving a color between design tools uses it to confirm the correct representation without manual conversion.
HEX, RGB, and HSL are three ways of describing the same color. HEX (#RRGGBB) is a 6-digit hexadecimal string: the red, green, and blue channels each expressed as a pair of hex digits from 00 to FF (0 to 255 in decimal). It is the most common format in CSS and HTML color attributes. RGB (rgb(R, G, B)) expresses the same three channels as decimal integers, which maps directly to canvas drawing APIs, SVG fill attributes, and programmatic color operations. HSL describes a color by hue (an angle from 0 to 360 degrees on the color wheel), saturation (0% for gray, 100% for full color), and lightness (0% for black, 50% for the base color, 100% for white). HSL is useful for building color variations algorithmically: to produce a lighter shade, increase the L value; to produce a muted version of the same hue, decrease the S value. The math stays predictable without needing to touch the R, G, and B values separately.
The picker uses your browser's built-in color dialog. Click the color swatch to open it, choose any color, and confirm - HEX, RGB, and HSL update immediately. All conversions run in your browser; no color data is sent to any server.
You can also type directly into any of the HEX, RGB, or HSL input fields. Pasting a HEX code from a brand guide generates the equivalent RGB and HSL values immediately.
HEX shorthand
CSS also accepts 3-digit shorthand HEX codes (#RGB), where each digit is doubled to produce the full 6-digit value. #ABC expands to #AABBCC. The picker outputs the full 6-digit form, which is unambiguous and accepted everywhere.
Rounding in HSL
HSL values displayed by the picker are rounded to whole numbers. For most uses this is precise enough. When you need sub-degree hue precision (for example, building a palette that must match a Pantone-calibrated reference), cross-check against a professional color management tool.
Common use cases
- Cross-tool color translation — A brand guide specifies a primary color as #2D6A9F. You need the RGB value for a canvas drawing API and the HSL value for a CSS variable used in a theme. Paste the HEX once and copy each format in two clicks.
- Building a shade palette — Start with a mid-tone color in HSL at 50% lightness. Adjust the L slider up to 70%, 80%, and 90% to produce lighter tints; adjust down to 30% and 15% for darker shades. The hue stays constant, so the palette looks cohesive. Copy each HSL value as you go.
- Matching a color between Figma and CSS — Figma stores fill colors internally and displays them in HEX by default. If your stylesheet uses hsl() variables, paste the Figma HEX into the picker and read the HSL equivalent to add to your CSS without approximating.
- Identifying a color from a design screenshot — Use your OS color sampler tool (Digital Color Meter on macOS, or the Windows PowerToys Color Picker) to capture the HEX from a screenshot, then paste it into this picker to get the RGB and HSL representations for your code.
- Checking lightness before printing — Colors that look vivid on screen often appear washed out in print. Checking the HSL lightness value helps identify whether a color is at a printable midtone (40-60% lightness) or at an extreme that will lose detail in CMYK conversion.
Frequently asked questions
What is a HEX color code?
A HEX color code is a 6-digit hexadecimal value like #3b82f6 used in CSS, design tools, and image editors. The first two digits represent Red, the next two Green, and the last two Blue — each from 00 (0) to FF (255). It is the most common format for specifying colors on the web.
What is the difference between RGB and HEX?
Both formats represent the same color using Red, Green, and Blue channels. RGB expresses each channel as an integer from 0 to 255 — for example rgb(59, 130, 246). HEX expresses the same three channels as a compact hexadecimal string — #3b82f6. They are mathematically identical; the choice is a matter of where you are using the value.
What does HSL mean?
HSL stands for Hue, Saturation, and Lightness. Hue is the base color angle on the color wheel (0–360°). Saturation controls how vivid or grey the color is (0–100%). Lightness controls how light or dark it appears (0–100%). HSL is useful when you need to make a color lighter, darker, or less saturated programmatically — adjusting one value is more predictable than changing three RGB channels.
Can I type a HEX code directly instead of using the color swatch?
Yes. Click into the hex input field and type any valid 6-digit HEX code starting with #. The color swatch, RGB, and HSL fields all update in real time as you type. This is useful when you already have a specific color code and want to see the other representations.
Are the colors processed on the server or in my browser?
Everything runs locally in your browser. No color data is sent to any server. The conversion between HEX, RGB, and HSL is pure JavaScript math that happens instantly as you interact with the tool.