Understanding HEX Color Codes for Beginners
HEX color codes are a compact way to write sRGB colors for the web. They are not a measure of taste, contrast, or whether text is readable. They are a notation: six hexadecimal digits after a hash, naming red, green, and blue. Hue Parcel stores and copies colors in that form because CSS accepts it directly.
Six digits, three channels
A full code looks like #23395B. Split it as 23, 39, 5B. Each pair is a hexadecimal number from 00 (0) to FF (255). The first pair is red, the second green, the third blue. #000000 is no light in any channel. #FFFFFF is full light in all three. #FF0000 is full red only.
Hexadecimal uses 0–9 and A–F. Case does not change the color. Hue Parcel normalizes to uppercase so the ledger, exports, and copy actions match. You can type #d98262 in the editor; after Apply it becomes #D98262.
Valid formats on this site
The generator accepts six-digit values with or without #. It rejects empty strings, five-digit fragments, named CSS colors such as navy, and eight-digit codes with alpha. That is a deliberate limit so the worktable, contrast math, and JSON export stay on opaque sRGB. If you need transparency, handle alpha in your own stylesheet after you paste the HEX.
Three-digit shorthand such as #333 is valid CSS, but the editor here asks for six digits so RGB conversion is unambiguous. Expand shorthand yourself: #333 is #333333.
RGB in parallel
The ledger shows RGB beside HEX because they are the same three channels. #406E8E is 64, 110, 142. CSS can use either:
color: #406E8E;color: rgb(64, 110, 142);
HSL is a different view of the same color, useful for generation. hsl(204, 38%, 40%) is easier to nudge toward a neighbor than adding 12 to the green channel and hoping. The engine converts HSL back to HEX before anything reaches the swatch or the export file.
Practical CSS
Export CSS from the generator writes custom properties:
:root { --hue-parcel-1: #23395B; }
You can then write background: var(--hue-parcel-4); for the cream and color: var(--hue-parcel-1); for the navy. That is convenience. It does not make the pair readable. HEX is a spelling of a color. Accessibility is a relationship between two colors at a given size, checked separately.
Do not treat a “nice” HEX from a palette as automatically suitable for body text. A pastel #F4C8D1 can be a background. It is a poor default for 16px copy on white. Run the pair through the contrast checker if the job is text.
Copying without losing a digit
Copy HEX copies the normalized six-digit string. Copy All HEX writes one code per line. If the browser blocks the clipboard, the status line reports the failure. You can still select the ledger cell. JSON export includes RGB objects if you would rather feed a script than paste into CSS.
When you start from one color, the same validation applies: #537A6B is the default on the homepage because it is a complete six-digit code in a mid green. A missing hash is fine. A typo like #537A6 is not, and the builder will say so instead of guessing a seventh character.
The worktable ledger also exists so you can read RGB without a calculator. Design handoff often asks for both. JSON export is the same data in a form a script can parse. None of those files include contrast ratios, because a ratio is not a property of one HEX code.
Common HEX mistakes
Leaving off a digit is the usual typing error. #406E8 is not a color on this site; the editor will refuse it. Mixing a three-digit code with a six-digit field is the second: #FFF is white in CSS, but the worktable wants #FFFFFF. Spaces inside the code, a missing hash plus extra punctuation, and HTML color names all fail the same way. The message asks for a six-digit HEX example so you can correct the field without guessing what was accepted.
Another mix-up is treating HEX as a contrast score. #000000 is not “more accessible” than #23395B on its own. Against #F1E9DA both may pass as text; against #406E8E the navy may fail. The code only names the color. The contrast article covers the two-color test.
Remember the split: HEX names a color. Contrast describes two colors together. A color scheme describes hue spacing. Mixing those three ideas is how people end up shipping unreadable type in a perfectly valid #8EA8C3.