LiveDeveloper
JSON Formatter & Validator
Format, validate, and minify JSON in your browser. Syntax errors show exact line and column. Free, nothing uploaded.
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.
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.
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.
Keep going
More developer tools
LiveDeveloper
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 tool