Free hex color code reference
Hex color codes, with the rules attached
Free, no signup: paste a code, a keyword or an rgb() value and this page prints every legal spelling of it — six digits, uppercase, the three-digit shorthand when all three pairs repeat, and the eight-digit form at any of 21 alpha steps. Underneath sits a chart of 380 codes: the 148 CSS keywords sorted into nine hue blocks instead of alphabetically, the 16 grays that fit in three digits, and the 216-color web-safe grid. Clicking a tile copies its code and loads it into the panel, and the filtered chart exports as CSS custom properties.
- 100% free
- No signup
- 148 CSS keywords
- 380 codes charted
- 21 alpha steps
Resolved to #663399.
This code is the CSS keyword rebeccapurple exactly.
Contrast 8.41:1 on white and 2.50:1 on black — body text clears 4.5:1 on at least one of them.
Press Ctrl+V anywhere on the page to drop in a hex code or a CSS keyword — no need to click the field first.
Every legal way to write this code
- Six digits
#663399The canonical form, lowercase - Uppercase
#663399Identical to CSS — the parser is case-insensitive - Three digits
#639Every pair repeats its digit, so the short form is lossless - Eight digits at 100%
#663399ffAlpha byte ff — 255 of 255 - rgb()
rgb(102, 51, 153) - hsl()
hsl(270, 50%, 40%)
Alpha suffix for the eight-digit form
The last pair is a byte, not a percentage: 50% is 80 because 127.5 rounds up, and 99 is 60%.
The 148 CSS color keywords. Click a tile to copy its code and load it above.
Grouped by hue rather than alphabetically, because nobody looks these up in alphabetical order. The 148 names cover 139 distinct codes: nine of them answer to two spellings.
Reds and pinks (18)
Oranges and browns (27)
Yellows and olives (12)
Greens (22)
Cyans and teals (18)
Blues (22)
Purples and magentas (16)
Whites (2)
Grays and black (11)
How to find and read a hex color code
One field for the code you already have, one chart for the code you are still looking for.
Look up the code you are holding
Type or paste it into the lookup field: a hex code with or without the #, a CSS keyword such as rebeccapurple, or an rgb(), rgba(), hsl() or hsla() function. A keyword you have misspelled comes back with up to six nearest spellings out of the 148, which is faster than scrolling the chart for the difference between mediumslateblue and mediumpurple. A paste longer than 64 characters is refused with its own length quoted, because a whole stylesheet in a one-color field is a mis-paste rather than a query.
Take the form the file you are editing wants
The panel on the right lists the same color six ways at once — the canonical lowercase six digits, the uppercase spelling a Figma inspector hands you, the three-digit shorthand when every pair repeats its digit, the eight-digit form at whatever alpha you select, and the equivalent rgb() and hsl() functions. The alpha strip under it doubles as the lookup table people actually search for: 21 steps from 0 to 100%, each showing the hex pair it becomes.
Browse the chart, or export the part you filtered
Switch between the 148 CSS keywords laid out in nine hue blocks, the 16 grays that fit in three digits, and the 216-color web-safe grid. The filter box reads both the keyword and the digits, so “ff00” narrows to the codes containing that run. Clicking a tile copies its code and loads it into the lookup panel in one action, and Copy as CSS or Download .css takes everything currently visible as a :root block of custom properties.
Technical specifications
| Codes in the chart | 380 across three tabs — 148 CSS keywords in nine hue blocks, 16 repeating-digit grays, and the 216-color web-safe grid |
|---|---|
| Distinct codes among the keywords | 139 — nine codes carry two spellings each: the seven gray/grey pairs plus aqua/cyan and fuchsia/magenta |
| Three-digit shorthand | 13 of the 148 keywords collapse, including #663399 to #639; all 216 web-safe codes collapse, because every pair is a doubled digit |
| Alpha suffix table | 21 steps from 0 to 100% in 5-point increments — 10% is 1a, 25% is 40, 50% is 80 and 75% is bf |
| Lookup input accepted | Hex at 3, 4, 6 or 8 digits with or without the #, all 148 keywords, rgb() and rgba(), hsl() and hsla(), slash-alpha and transparent; over 64 characters is refused with the length named |
| Nearest-keyword match | CIE76 distance in CIE Lab, printed as a ΔE against the closest of the 148 names, with exact matches labelled as exact |
| Chart export | Whatever the filter leaves visible, as a :root block of custom properties — up to 380 declarations, copied or saved as a .css file |
| Requests while browsing | None — the 380 codes ship inside the page and the .css file is assembled from a Blob in the tab |
Frequently asked questions
What do the six digits in a hex color code actually stand for?
Three unsigned bytes — red, green and blue — each written as two base-16 digits from 00 to ff. That gives 256 levels per channel and 16,777,216 codes in total, and it is exactly the same sRGB triple that rgb() carries in base 10, so #ff6347 and rgb(255, 99, 71) are one color written two ways. Hex is a notation, not a color model: nothing about the digits knows anything the three numbers do not.
When can a hex code be shortened to three digits?
Only when all three pairs happen to repeat their digit, which #663399 does and #663398 does not. The rule works outward rather than inward: a parser reading #639 writes each digit twice to reach #663399, so a pair such as 98 has no short form at all and the code stays at six digits. Of the 148 CSS keywords only 13 survive the test — among them red, white, black, lime, cyan and rebeccapurple — while all 216 web-safe codes survive it, since 00, 33, 66, 99, cc and ff are repeated digits by construction.
Is #FF0000 different from #ff0000?
No — hex digits are case-insensitive in CSS, in SVG and in every browser parser, so the two are the same declaration. The difference is social: Figma, Sketch and most native color dialogs copy uppercase, Prettier and the Tailwind config print lowercase, and a codebase that mixes the two produces diff noise every time somebody re-copies a value out of a design tool. Pick one and normalize on paste, which is what the uppercase row on this page is for.
How does the eight-digit hex code with alpha work?
The trailing pair carries opacity, encoded the same way the color channels are — 00 through ff — so #66339980 is rebeccapurple at half strength. The trap is that the pair is not a percentage: 50% of 255 is 127.5, which rounds to 128 and prints as 80, not 7f, and 99 reads as 60% rather than 99%. The form arrived with CSS Color Module Level 4 and shipped in Firefox 49 and Safari 9.1 in 2016, Chrome 62 in 2017 and Edge only after it moved to Chromium in 2020; IE11 never accepted it, so a build that still lists IE11 needs rgba() instead.
Why is darkgray lighter than gray, and why do both spellings work?
Because the keyword list is two lists welded together. HTML 4.01 defined 16 VGA colors in which gray is #808080, while X11 had its own set in which gray was #bebebe and darkgray was #a9a9a9; CSS Color 3 kept the HTML meaning of gray and imported X11's darkgray unchanged, leaving #a9a9a9 sitting above #808080. The same merge is why green is #008000 while X11's bright green came in under the name lime, and why the seven gray keywords each answer to a grey spelling as well — nine of the 148 names are duplicate codes once aqua/cyan and fuchsia/magenta are counted, so the list covers 139 distinct colors.
Do the 216 web-safe colors still matter?
Not for a normal stylesheet — the palette solved dithering on displays limited to 256 colors, which stopped being a constraint around 2000. It is still a useful grid for pixel art, for 8-bit and indexed-color export targets, and for retro palettes, which is why the chart keeps it on its own tab rather than mixed in. Worth knowing before you rely on it: a 2000 survey of the palette found only 22 of the 216 rendered identically across the Mac and Windows system palettes, so even at the time it was less safe than the name promised.
Is the code I look up sent anywhere?
No — the chart is a static array compiled into the page and every lookup runs in your tab, so the page makes no request after it loads no matter how many codes you paste. That includes the export: Copy as CSS and Download .css build the :root block from the tiles currently on screen using a Blob created in the browser, so a client's brand palette never becomes a server log entry.
About hex notation and the CSS keyword list
Hex has been in CSS since the first specification in December 1996, and the syntax has barely moved since: three bytes in base 16, optionally shortened to three digits, with an alpha pair added by CSS Color Module Level 4. The keyword list beside it moved a great deal. HTML 4.01 defined 16 names, CSS2 added orange, CSS Color 3 imported the X11 set to reach 147, and CSS Color 4 added rebeccapurple in 2014 in memory of Eric Meyer’s daughter. That history is why the list has the shape it has — 148 names covering 139 distinct codes, seven keywords with an American and a British spelling, and the famous inversion where darkgray at #a9a9a9 is visibly lighter than gray at #808080. None of it is a bug; it is two palettes merged in 2011 without renaming anything, and it is worth knowing before you assume a name means what it says.
The two rules people get wrong are both about counting digits. A three-digit code is an instruction to write each digit twice, so the short form exists only for codes whose three pairs already repeat — 13 of the 148 keywords, and by construction every one of the 216 web-safe codes. The eight-digit form ends in an alpha byte, and a byte is not a percentage: 50% is 80 rather than 7f, and #ffffff99 is 60% white, not 99%. If the alpha is the point rather than an afterthought, RGBA to HEX also flattens a translucent color against a chosen background so you can see the six-digit code it will actually render as. For the byte arithmetic in either direction, HEX to RGB splits a code into channels and RGB to HEX assembles one from three numbers you already hold.
Where reference charts usually go wrong is in treating a hex code as a place to work rather than a place to arrive. Editing a color in hex means editing three bytes, and nudging all three to make something lighter drags the hue with it — that job belongs in HEX to HSL, where lightness is one number. Two more habits are worth dropping: printing the 216 web-safe swatches as if they were still advice for a stylesheet, and matching a code to its nearest keyword by RGB distance, which picks visibly wrong names because a unit of blue and a unit of green are not equally visible — the match here is ranked in CIE Lab and reports the ΔE so you can judge it. And a hex code says nothing at all about ink: a color bound for print needs a separation, which is what RGB to CMYK and CMYK to RGB handle, profile caveat and all.
Where these codes are looked up
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.
There is nothing to send in the first place: all 380 codes are compiled into the page as a plain array, so browsing, filtering and exporting the chart happen with the network idle. The .css file you download is assembled from an in-memory Blob and never touches a server.