Hex Color Picker
Pick any color and get its HEX, RGB and HSL codes instantly, or type a HEX to preview it. Free online hex color picker for designers and developers. Copy with one tap.
Updated 2026-06-14 · Free · No sign-up · Runs privately in your browser
A Fast, Free Hex Color Picker
The hex color picker lets you choose any color and instantly see its HEX, RGB and HSL codes — or paste a HEX code to preview the exact color. Everything is copyable with a single tap and runs entirely in your browser.
How to Use It
- Click the swatch to open your device’s native color picker, or
- Type a HEX code (like
#7C3AEDor shorthand#FFF) into the text box. - Watch the live preview and the HEX, RGB and HSL values update.
- Tap any code to copy it to your clipboard.
What Is a HEX Code?
A HEX color code uses six hexadecimal digits — two each for red, green and blue:
#7C3AED
│ │ │
R G B (7C = 124 red, 3A = 58 green, ED = 237 blue)It is the standard way to define colors in HTML and CSS. Shorthand three-digit codes like #FFF are also valid and expand to #FFFFFF.
HEX vs RGB vs HSL
| Format | Example | When to use it |
|---|---|---|
| HEX | #7C3AED | CSS, HTML, most design tools |
| RGB | rgb(124, 58, 237) | Canvas, transparency (rgba), apps |
| HSL | hsl(262, 83%, 58%) | Adjusting hue, saturation, lightness |
Why Designers and Developers Use It
- Match a color from anywhere and grab its exact code.
- Convert formats in one place instead of juggling tools.
- Preview a HEX code without opening a full design app.
- Copy fast straight into your stylesheet or component.
The picker reads any HEX code, validates it, and converts between all three formats automatically — including the readable preview that flips its text color to stay legible on light or dark backgrounds. Whether you are fine-tuning a brand palette or just need one accent color, it is the quickest way to lock in the exact shade you want.
Frequently asked questions
How do I use the hex color picker?+
Click the color swatch to open your device's color picker and choose a color, or type a HEX code into the text box. The tool instantly shows the matching HEX, RGB and HSL values and a live preview.
What is a HEX color code?+
A HEX color code is a six-digit code like #7C3AED that represents a color using two hexadecimal digits each for red, green and blue. It is the most common way to specify colors in HTML and CSS.
Can I enter a 3-digit shorthand HEX code?+
Yes. Shorthand codes like #FFF or #0AF are accepted and automatically expanded to their full six-digit form (#FFFFFF, #00AAFF) before the RGB and HSL values are calculated.
How do I copy a color code?+
Tap the HEX, RGB or HSL box and that code is copied to your clipboard instantly, ready to paste into your stylesheet, design app or code editor.
What is the difference between HEX, RGB and HSL?+
They are three formats for the same color. HEX is compact and used in CSS, RGB lists red, green and blue from 0 to 255, and HSL describes hue, saturation and lightness, which is handy for adjusting tones.