CSS color notation · sRGB · transparency
How HEX color codes work
Read six-digit HEX values as red, green, and blue pairs, understand three-digit shorthand and eight-digit alpha, then use the value in a practical color workflow without confusing notation with appearance or accessibility.
hex color codes
What do HEX color codes mean?
HEX color codes are compact sRGB instructions. In #RRGGBB, RR sets red, GG sets green, and BB sets blue; each pair runs from 00 to FF, equal to decimal 0 through 255. CSS also accepts #RGB shorthand, #RGBA shorthand with transparency, and #RRGGBBAA with a full alpha pair. These forms describe numeric color channels, not a universal paint name, calibrated appearance, or automatic accessibility result. The useful skill is learning to decode HEX color codes, preserve the value accurately, and then test the result in the context where it will appear.
The four rules worth remembering
- hex color codes: six digits form three red, green, and blue pairs in the sRGB color space
- hex color codes: three digits expand by duplication, so #3A7 means exactly #33AA77
- hex color codes: four- and eight-digit forms put alpha last, where 00 is transparent and FF is opaque
- hex color codes: the same value can look different across displays and backgrounds, so notation is only one part of a color decision
Compare the four CSS HEX forms
CSS Color Module Level 4 defines four valid lengths. The table separates channel order, precision, and transparency so similar-looking HEX color codes are not mistaken for interchangeable strings.
| Form | Channel order | Example | Equivalent | Available states |
|---|---|---|---|---|
| #RGB · hex color codes | red, green, blue | #3A7 | #33AA77 | 4,096 colors |
| #RGBA · hex color codes | red, green, blue, alpha | #3A7C | #33AA77CC | 4,096 colors × 16 alpha steps |
| #RRGGBB · hex color codes | red, green, blue | #33AA77 | rgb(51 170 119) | 16,777,216 colors |
| #RRGGBBAA · hex color codes | red, green, blue, alpha | #33AA77CC | rgb(51 170 119 / 80%) | 16,777,216 colors × 256 alpha steps |
hex color codes: Read each channel as a base-16 number
Hexadecimal uses sixteen symbols: 0 through 9, then A through F for decimal values 10 through 15. Two symbols can therefore encode 16 × 16, or 256, states. In six-digit HEX color codes, the first pair belongs to red, the second to green, and the third to blue. The pair 00 is the minimum channel value; FF is the maximum value of 255. For #2468AC, red is 0x24 or 36, green is 0x68 or 104, and blue is 0xAC or 172. Writing rgb(36 104 172) describes the same sRGB coordinates.
hex color codes: Understand shorthand before you shorten a value
Three-digit HEX color codes are not six-digit values with missing detail; each digit is duplicated. #F09 expands to #FF0099, #ABC expands to #AABBCC, and #123 expands to #112233. A six-digit value can use shorthand only when both digits in every pair match. #33AA77 can become #3A7, but #32AA77 cannot because 32 cannot be represented by one duplicated digit. This restriction explains the precision difference: three-digit notation offers 16 choices per channel, producing 16³ or 4,096 colors, while six-digit notation offers 256 choices per channel, producing 256³ or 16,777,216 colors.
hex color codes: Put alpha after blue, not before it
Eight-digit HEX color codes follow #RRGGBBAA. The final pair is alpha: 00 is fully transparent, FF is fully opaque, and intermediate values describe partial opacity. For example, #0000FFCC is blue with alpha CC, which the W3C example equates to 80% opacity. Four-digit #RGBA behaves like three-digit shorthand, so #05AC expands to #0055AACC. This ordering matters because some graphics systems and older platform APIs use different packed byte orders. In modern CSS, follow the CSS form and keep alpha last.
hex color codes: Know what HEX can and cannot preserve
CSS HEX color codes directly specify sRGB. They are compact and widely understood, but they do not name a wider-gamut Display P3 color, a device-independent Lab value, a print CMYK recipe, or a measured material sample. Converting a wide-gamut source into six-digit HEX color codes may map or clip colors into sRGB. A screenshot, browser picker, and design file can also disagree when profiles, display capabilities, or export handling differ. Preserve the source color space when it matters; use HEX as the delivery format only when sRGB is the intended target.
A numeric match is also not a naming or accessibility decision. Many names can describe nearby HEX color codes, and CSS named colors are an uneven historical list rather than a complete human vocabulary. Likewise, one HEX value has no contrast ratio until it is paired with another rendered color. WCAG 2.2 contrast checks compare relative luminance for foreground and background, including applicable alpha compositing. Use the Color Name Finder for descriptive neighbors, the Image Color Picker for a local pixel, and the Color Contrast Checker for a real pair instead of asking one notation to answer three different questions.
A reliable HEX handoff checklist
Before placing a value into CSS, a palette, or a design token, verify the notation and the decision around it.
- hex color codes: confirm that the value contains exactly 3, 4, 6, or 8 hexadecimal digits after the hash
- hex color codes: expand shorthand when reviewing a precise handoff so every channel is visible
- hex color codes: record whether an alpha pair is intentional and identify the background used for evaluation
- hex color codes: preserve sRGB as the assumed color space instead of presenting the value as universal
- hex color codes: test contrast, naming, and visual appearance with the separate tool designed for each task
Use one HEX value in three practical steps
A short workflow keeps the copied code traceable while separating decoding, description, and validation.
hex color codes: 1. Decode and normalize
hex color codes: paste the complete value, verify its valid length, expand shorthand if needed, and keep the alpha pair. Confirm the RGB numbers before editing any channel.
hex color codes: 2. Describe or sample
hex color codes: use the Color Name Finder when a readable label helps communication, or use the Image Color Picker when the source is a local image pixel. Treat a name as a neighbor, not an official identity.
hex color codes: 3. Test the real pair
hex color codes: place the foreground over its intended background, account for transparency, and run the contrast check. Save both values and the intended state in the design token or implementation note.
What the official sources establish
The explanation uses current public specifications and documentation checked on July 31, 2026. The numbers below describe syntax and testing rules, not a ranking promise.
- hex color codes: CSS Color Module Level 4 defines 3, 4, 6, and 8 hexadecimal digits, documents pair order, and states that three-digit notation represents 4,096 colors versus approximately 17 million for six digits. Read the W3C HEX notation section
- hex color codes: MDN documents the same four syntaxes, the 0-to-FF channel range, digit duplication, case insensitivity, and alpha endpoints from fully transparent to fully opaque. Read the MDN <hex-color> reference
- hex color codes: WCAG 2.2 Understanding Success Criterion 1.4.3 explains contrast requirements such as 4.5:1 for normal text and 3:1 for large text; one isolated value cannot produce either ratio. Read the WCAG contrast guidance
“The number of hex digits given determines how to decode the hex notation into an RGB color.”
HEX color code questions
Are HEX and RGB different colors?
hex color codes: Not when the coordinates and color space match. Six-digit HEX color codes and rgb() can express the same sRGB channels; #33AA77 equals rgb(51 170 119). The notation changes, not the intended color. Newer CSS functions can also express other color spaces, so confirm the space before assuming every RGB-looking value has a direct six-digit equivalent.
Does #RGBA put transparency first or last?
hex color codes: Last. CSS four-digit and eight-digit HEX color codes use #RGBA and #RRGGBBAA, so A follows blue. #3A7C expands to #33AA77CC. Other software may display packed integers in another byte order, which is why a value copied from a non-CSS API should be checked before it is pasted into a stylesheet.
Why do identical HEX values look different?
hex color codes: Identical HEX color codes can be surrounded by different colors, composited with different backgrounds, rendered on displays with different profiles and capabilities, or viewed under different conditions. The code fixes sRGB coordinates and optional alpha; it does not fix the entire viewing system. Compare within the intended interface and preserve surrounding context.
Can a HEX value prove WCAG contrast?
hex color codes: No. A contrast ratio requires at least a foreground and background, plus correct handling of transparency and state. HEX color codes supply useful inputs, but the result comes from relative-luminance comparison. Test the actual pair, including hover, disabled, focus, and text states where relevant, instead of approving a color in isolation.