A hex code is a six-character string used in HTML, CSS, SVG, and design tools to specify colors in digital interfaces. Written as a hash followed by six letters and numbers (for example, #1E90FF), it encodes red, green, and blue channel intensities in hexadecimal form. This guide explains how hex codes work, how to read and convert them, and how to choose accurate, accessible colors for long-term, cross‑project workflows.
How hexadecimal color codes work
Hexadecimal (base‑16) notation maps each pair of digits to a value between 0 and 255 in base‑10. In a six‑character hex code, the first two characters set red intensity, the middle two set green, and the last two set blue. Each character can be a digit 0–9 or a letter A–F, representing values 10–15. For example, #FF0000 means red at 255, green at 0, and blue at 0, producing pure red. Three‑character short hex codes like #FFF are expanded to six characters (#FFFFFF) by repeating each digit, but not all short forms map to visually identical colors.
Short form vs standard form and common examples
Short form hex codes
Short hex uses three characters, one per channel, and each digit is duplicated to create the six‑character equivalent. Examples include #000 for black and #FFF for white. Short forms work only when each channel uses the same digit; #123 expands to #112233, not #112233 in a different arrangement. Short codes are concise but limited to 4,096 possible combinations, so they are best used sparingly in systems that expand them reliably.
Common named colors and their hex values
Many named colors have standardized hex values in web‑safe palettes and specifications. These include classic design and development references used across tools and frameworks. A small selection is shown below to illustrate typical mappings.
| Color name | Hex code | Decimal RGB | Use case |
|---|---|---|---|
| Black | #000000 | 0, 0, 0 | Text on light backgrounds |
| White | #FFFFFF | 255, 255, 255 | Backgrounds and UI surfaces |
| Red | #FF0000 | 255, 0, 0 | Accent and error states |
| Green | #008000 | 0, 128, 0 | Success indicators |
| Blue (web) | #0000FF | 0, 0, 255 | Links and primary actions |
| Gray (web) | #808080 | 128, 128, 128 | Subtle UI elements |
Reading and interpreting hex values
To interpret a hex code quickly, split it into red, green, and blue pairs and compare each pair to a 0–255 scale. Use a mental reference: #00 equals zero (none), #80 is halfway (about 128), and #FF is full intensity (255). In design tools, you can usually enter the hex directly into color pickers or input fields. For a fast check, convert hex to decimal with a calculator, spreadsheet formula, or eyedropper tool that shows numeric channels alongside the hex string.
Practical use in design and development
Implementation in code
In CSS, hex codes appear in color properties for text, backgrounds, borders, and effects. Examples include setting a paragraph color or a button background. Shorter forms are valid in CSS, but the six‑character form is more explicit and avoids ambiguity in automated workflows. Using an editor with color previews and contrast checks helps validate choices before committing code.
Design tool workflows
Design tools display hex codes in color panels and style properties, and let you type or pick colors to update the code directly. To keep teams consistent, lock commonly used hex values in shared libraries, document them in design systems, and use tokens that map names to exact hex values. When exporting assets, prefer style references over hard‑coded hex strings so updates propagate across components and instances.
Accessibility and contrast considerations
Contrast between text and its background determines readability and compliance with accessibility standards. Tools that accept two hex codes can compute contrast ratios and indicate whether a combination meets WCAG levels. Aim for higher contrast for body text, and test combinations under different brightness conditions. When in doubt, prefer darker text on light backgrounds or vice‑versa, and verify results with an automated checker before publishing.
Converting between formats
Hex codes relate directly to other color representations such as RGB, HSL, and CMYK. Hex is convenient for digital workflows because it is compact and widely supported in code and tools. RGB uses three decimal numbers, HSL adds hue, saturation, and lightness, and CMYK is geared toward print. Reliable converters preserve values across formats, and design systems often store colors in a canonical model (such as RGB or HSL) while exposing hex for front‑end use. Cross‑format checks help catch rounding or gamut issues when moving between screens and printers.
Best practices for long‑term accuracy
- Standardize on the six‑character form in source code to avoid ambiguity from short expansions.
- Document hex values in a single source of truth, such as a design system token file or a shared palette spreadsheet.
- Use semantic names (e.g., color‑primary, color‑background) in code and map them to hex values through variables or constants.
- Check contrast ratios for text and interactive elements during reviews and automated tests.
- Version control changes to color definitions and log rationale for shifts in brand or accessibility decisions.
Summary
A hex code is a compact, widely supported way to define digital colors using six characters that encode red, green, and blue intensities. By understanding how to read, convert, and validate hex values, you can maintain consistent palettes, meet accessibility requirements, and manage color across design and development workflows with confidence.