Hex Color Picker
Pick any color and get its HEX, RGB, RGBA, and HSL code, ready to paste into HTML or CSS. Drag the picker, type a value, or sample a pixel from your screen — everything updates together, and nothing leaves your browser.
#3b82f6 · rgb(59, 130, 246) · hsl(217, 91%, 60%)
Nearest CSS color: dodgerblue (#1e90ff)
Contrast (WCAG)
- White text 3.68:1AA fail · AAA fail
- Black text 5.71:1AA pass · AAA fail
Normal-size text; transparency is ignored.
Recent colors
Colors you pick will appear here.
Why This Tool Matters
A color rarely arrives in the format you need. A designer sends a brand blue as a hex code, the component library wants hsl() so you can derive a hover shade by nudging the lightness, and the canvas API takes rgba(). Working out each form by hand is slow and easy to get wrong, so being able to paste one and read off the others, or drag to a nearby shade and copy the new code, saves a trip to a design tool for what should be a ten-second job.
The extras answer the questions that come right after you choose a color. Does white text stay readable on this button? What would I call it in a comment? Where did that pale gray in the screenshot come from? The contrast readout, the nearest CSS color name, and the eyedropper cover those without leaving the page, and the recent-colors row lets you hop back to a shade you rejected five minutes ago.
How to Use
- 01
Pick a color
Drag in the square, slide the hue and opacity, or use Pick from screen.
- 02
Fine-tune or paste
Type or paste any HEX, RGB, or HSL value and every field follows.
- 03
Copy the code
Copy HEX, rgb(), hsl(), or a ready-made CSS line.
More Text Tools
- Have a code to convert? Try the Hex to RGB Converter
- Embedding an image in your CSS? Try the Base64 Decode & Encode tool
- Storing a palette in a config? Check it with the JSON Validator
- Hunting color codes in a stylesheet? Build the pattern in the Regex Tester
- Shipping the page? Trim it with the HTML Minifier
- Browse all Developer Tools
- Try the full Case Converter
Frequently Asked Questions
What is a hex color code, and how does it relate to RGB and HSL?
A hex color code is a hexadecimal way of writing a color: #3b82f6 is three pairs of base-16 digits for red (3b), green (82), and blue (f6), each from 00 to ff. RGB writes the same three channels as decimal numbers, rgb(59, 130, 246), and HSL describes the same color by hue (0–360°), saturation, and lightness, hsl(217, 91%, 60%). All three name the same color, so this hexadecimal color picker shows them side by side and converts between them as you edit.
How do I use the color in HTML or CSS, and how do I add transparency?
Copy the CSS line (for example color: #3b82f6;) and paste it into a stylesheet, or copy just the HEX, RGB, or HSL value and use it anywhere CSS accepts a color: color, background-color, border-color, box-shadow, SVG fill, and HTML attributes. To make a color see-through, lower the opacity slider: the HEX field becomes an 8-digit code such as #3b82f680, and the RGB and HSL fields switch to rgba() and hsla() with an alpha between 0 and 1.
Is this a color wheel? How do I pick a hue?
It uses the same model as a color wheel, laid out as a square and a slider instead of a circle. The hue slider chooses the base color around the wheel (red, yellow, green, cyan, blue, magenta), and the square then trades saturation (left to right) against brightness (bottom to top). Many designers find it easier to fine-tune this way, and it works with a mouse, a finger, or the arrow keys (hold Shift to move in steps of ten).
Which browsers support "Pick from screen"?
Pick from screen uses the browser EyeDropper API, which is available in Chrome and Edge on desktop and in other Chromium-based browsers. Firefox and Safari don't support it yet, so in those browsers the button simply doesn't appear and the rest of the online color picker works as normal. The eyedropper can sample any pixel on your screen, including other windows, but only after you click to choose a spot.
What do the contrast ratios and the nearest CSS color tell me?
The contrast readout compares your color with white and with black using the WCAG formula, then marks whether it clears AA (4.5:1) and AAA (7:1) for normal-size text, which tells you whether white or black text will be readable on it. The nearest CSS color is the closest of the 148 named colors, such as royalblue or tomato, handy when you want a readable name in your code. Transparency is ignored in both, since the result depends on what sits behind the color.
Is my color data sent anywhere?
No. The picker, the conversions, and the contrast math all run in your browser, and nothing is uploaded. The last eight colors you picked are remembered in your browser's local storage so they're there when you come back; they never leave your device, and the tool works normally if storage is blocked, it just forgets them when you close the tab.