ColorKitFree hex color picker
Hex color picker — drag, and the code is ready
This hex color picker is free and needs no signup: drag inside the color field or type a value, and the hex code updates with every movement — six digits when all three bytes are distinct, three digits when every pair repeats, and eight digits the moment you lower alpha. Click the code to copy it. The panel scores the hex color against white and black to WCAG 2.1 as you work, and Save swatch pins it to a strip of 24 that survives a reload. RGB, HSL, HSV, CMYK and Lab are visible at the same time, so one pick gives you the hex code and every other notation a stylesheet or a design tool might ask for.
- 100% free
- No signup
- Hex code live
- WCAG contrast
- 24 saved swatches
#2664eb
Closest CSS name: royalblue (ΔE 9.0)
Press Ctrl+V anywhere on the page to drop in a hex code, rgb() or hsl() value — no need to click the field first.
Every notation, all editable where the notation allows it
- HEX
- RGB
- HSL
- HSV
- CMYK
- Lab
Contrast against black and white
On white: 5.13:1
Body text AA passLarge text AA passAAA fail
On black: 4.10:1
Body text AA failLarge text AA passAAA fail
Ratios follow the WCAG 2.1 relative-luminance formula: 4.5:1 for body text, 3:1 for text at 24px or 18.66px bold, and 3:1 for icons and borders.
How to pick a hex color code
Three steps from a blank field to a hex code on your clipboard.
Drag or type to land on the color
Move the crosshair inside the saturation-brightness field and slide the hue bar beneath it. The hex code in the panel on the right follows every movement, updating from #000000 to #ffffff and everything between. If you already hold a hex code, paste or type it straight into the HEX field — bare digits without the # work, three-digit shorthand works, and so does the eight-digit alpha form.
Copy the hex code you need
Click the hex value to copy the six-digit form. When every byte pair repeats its digit, the three-digit shorthand appears beside it. Lower the alpha slider and the field switches to eight digits automatically, so #2563eb at 60% becomes #2563eb99 without you doing the byte arithmetic. The same color also shows as RGB and HSL, which means one pick covers the three notations a stylesheet might ask for.
Check contrast and save the swatch
While you drag, the panel scores the hex color against white and black to WCAG 2.1 — body text needs 4.5:1 and large text needs 3:1, and both verdicts update live. Press Save swatch to pin the hex code to the strip; 24 swatches survive a reload, and clicking one restores it to the picker instantly.
Technical specifications
| Hex output forms | Six-digit (#rrggbb), three-digit shorthand (#rgb) when all pairs repeat, eight-digit with alpha (#rrggbbaa) |
|---|---|
| Additional notations | RGB, HSL, HSV, CMYK and Lab — all visible alongside the hex code at once |
| Precision | 8 bits per channel, 16,777,216 hex codes, plus a 0-100% alpha channel |
| Hex input accepted | #rgb, #rgba, #rrggbb, #rrggbbaa, the same four without the #, rgb(), hsl(), all 148 CSS keywords, and transparent |
| Contrast scoring | WCAG 2.1 relative luminance against black and white, thresholds at 4.5:1 and 3:1 |
| Screen picking | EyeDropper API where the browser has it — Chrome 95+, Edge 95+, Opera 81+; hidden in Firefox and Safari |
| Saved swatches | 24 hex codes held in browser local storage under colorkit:swatches |
| Price | Free, no signup, no cap on how many hex codes you pick |
Frequently asked questions
How do I pick a hex code from something already on my screen?
Click “Pick from screen” to open the browser’s EyeDropper API, which returns the hex code of any pixel on your desktop — including pixels in other applications. The button appears in Chrome 95+, Edge 95+ and Opera 81+; Firefox and Safari have not shipped the API, so the fallback is a screenshot opened in the image color picker.
What is the difference between a 3-digit and a 6-digit hex code?
A three-digit code is shorthand: the parser doubles each digit, so #639 becomes #663399. It exists only when all three byte pairs happen to repeat — #2563eb has no short form because none of its pairs (25, 63, eb) consist of two identical digits. The picker shows the shorthand automatically when it applies, so you never have to check by hand.
How does the 8-digit hex code with alpha work?
The last two digits encode opacity the same way the color channels are encoded — 00 is fully transparent, ff is fully opaque. The catch is that the byte is not a percentage: 50% opacity maps to 80 in hex (128 out of 255), not to 50 or 7f. The picker handles this conversion when you move the alpha slider, and the eight-digit form appears the moment alpha drops below 100%.
Is #FF0000 a different color from #ff0000?
No. Hex digits are case-insensitive in CSS, SVG and every browser. The difference is convention: Figma copies uppercase, Prettier prints lowercase, and mixing the two creates diff noise. The picker outputs lowercase throughout, which matches CSS tooling defaults.
Can I type an RGB or HSL value and get the hex code back?
Yes — the RGB and HSL fields accept input as well as displaying it. Type rgb(37, 99, 235), the modern slash syntax rgb(37 99 235 / 60%), or hsl(220, 83%, 53%) and the hex field updates immediately. Any of the 148 CSS color keywords work too: type rebeccapurple and you get #663399.
Why does the hex code not change when I slide hue at pure white or black?
Because hue is undefined at those extremes. White is saturation 0 and brightness 100 in every hue, so all hues produce #ffffff. Black is brightness 0, so every hue yields #000000. The picker keeps your hue selection so it is waiting when you move brightness or saturation back to a range where hue matters.
Are the hex codes I pick sent anywhere?
No — every conversion runs in JavaScript inside your browser tab. The page makes no network requests after it loads, and the swatches you save are written to local storage on your device, not to a server.
About picking colors in hex
A hex color code is three bytes — red, green and blue — written in base 16. That is 16,777,216 possible values, and the notation has been in CSS since the first specification in December 1996. What makes hex the default in web work is not the format itself but the fact that it is the one every tool copies to the clipboard: Figma, Chrome DevTools, Sketch, VS Code's color swatch and the EyeDropper API all hand you a hex string, so the fastest path from "I want this color" to "it is in my stylesheet" is a picker that speaks hex natively.
The shorthand rule is the one people get wrong most often. A three-digit code is an instruction to double each digit, so #639 expands to #663399. It exists only when every pair already repeats — #2563eb has no short form because 25, 63 and eb are all mixed digits. The eight-digit alpha form trips people up differently: the trailing byte is not a percentage, so 50% opacity is 80 in hex, not 50 or 7f. Both rules are handled automatically in the output here, which is the point — a picker that shows you the shorthand when it applies and hides it when it does not saves more time than memorizing the rule.
If you already hold a hex code and need to do something with it rather than pick a new one, the neighbors are more direct: HEX to RGB splits the bytes, HEX to HSL moves it into the cylindrical model where lightness is one slider, and the hex color codes chart lets you browse all 148 CSS keywords with their codes side by side. For a color-contrast check deeper than the quick black-and-white score here, the contrast checker takes both foreground and background as input.
Where your hex codes are processed
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
Saved swatches write each hex string to your browser's local storage under colorkit:swatches. They stay on the device and Clear all removes them immediately.