Hex Color Codes: Complete Guide to Web Colors (2026)

How Hex Color Codes Work

Hex color codes use the hexadecimal (base-16) numbering system to represent color channel intensities. Each color is defined by three channels: red, green, and blue (the RGB color model). In hexadecimal notation, the digits 0 through 9 represent values 0-9, and the letters A through F represent values 10-15.

Each channel pair in a hex code can represent 256 values (16 x 16 = 256, from 00 to FF). Since there are three channels, the total number of possible colors is 256 x 256 x 256 = 16,777,216. This matches the standard 24-bit color depth used by virtually all modern displays.

Breaking Down a Hex Code

Consider the hex code #3A7BDE:

• 3A = Red channel: (3 x 16) + 10 = 58 out of 255
• 7B = Green channel: (7 x 16) + 11 = 123 out of 255
• DE = Blue channel: (13 x 16) + 14 = 222 out of 255

This produces a medium blue with low red, moderate green, and high blue intensity. The equivalent RGB notation is rgb(58, 123, 222).

Essential Hex Color References

Shorthand Hex Notation

CSS supports a three-digit shorthand for hex colors where each channel pair has identical digits. The browser expands each digit by doubling it:

• #FFF expands to #FFFFFF (white)
• #000 expands to #000000 (black)
• #F00 expands to #FF0000 (red)
• #39F expands to #3399FF (a sky blue)

Shorthand notation reduces file size slightly and is commonly used in CSS when the full six-digit code has matching pairs. You cannot use shorthand for colors like #3A7BDE where the pairs are not repeated digits.

Hex with Alpha Transparency

CSS also supports an eight-digit hex format (#RRGGBBAA) where the last two digits represent alpha (opacity). The alpha channel follows the same 00-FF range, where 00 is fully transparent and FF is fully opaque:

• #FF000080 = Red at 50 percent opacity
• #00000033 = Black at 20 percent opacity (useful for subtle overlays)
• #FFFFFF00 = Fully transparent white

The four-digit shorthand (#RGBA) also works: #F008 is equivalent to #FF000088 (red at approximately 53 percent opacity). This format is supported in all modern browsers.

Converting Between Color Formats

Hex to RGB

Convert each two-digit hex pair to a decimal number (0-255). For #C75B3A: C7 = 199, 5B = 91, 3A = 58. Result: rgb(199, 91, 58).

RGB to Hex

Convert each decimal value (0-255) to a two-digit hexadecimal number. For rgb(14, 165, 233): 14 = 0E, 165 = A5, 233 = E9. Result: #0EA5E9.

Hex to HSL

First convert hex to RGB, then apply the HSL conversion algorithm. HSL (Hue, Saturation, Lightness) is particularly useful for creating color variations. To make a color lighter, increase the L value. To make it more muted, decrease S. To shift the color, change H. For example, #C75B3A converts to approximately hsl(14, 55%, 50%).

Color Accessibility and Contrast Ratios

The Web Content Accessibility Guidelines (WCAG 2.1) establish minimum contrast ratios to ensure readability:

• Level AA (minimum): 4.5:1 contrast ratio for normal text, 3:1 for large text (18px bold or 24px regular).
• Level AAA (enhanced): 7:1 for normal text, 4.5:1 for large text.

Approximately 8 percent of men and 0.5 percent of women have some form of color vision deficiency. Common accessible color combinations include dark gray (#333333) on white (#FFFFFF) at a 12.6:1 ratio, and white text on dark blue (#1A237E) at an 11.4:1 ratio. Avoid red-green combinations, which are problematic for the most common form of color blindness (deuteranopia).

CSS Named Colors

CSS provides 140 named colors that you can use instead of hex codes. Some of the most useful include:

• Primary colors: red, blue, green, yellow, cyan, magenta
• Neutrals: white, black, gray, silver, dimgray, gainsboro, whitesmoke
• Design favorites: coral (#FF7F50), tomato (#FF6347), steelblue (#4682B4), slategray (#708090), mediumseagreen (#3CB371)
• Modern UI: dodgerblue (#1E90FF), crimson (#DC143C), darkorange (#FF8C00), indigo (#4B0082)

Named colors are convenient for prototyping and readability but hex codes offer more precise control over your exact desired shade. Most production CSS uses hex or HSL notation.

Color Trends in Web Design (2026)

Web design color trends in 2026 emphasize intentional, balanced palettes. According to industry surveys, 93 percent of buyers focus on visual appearance and color influences 85 percent of purchasing decisions:

• Earth tones: Pantone's Mocha Mousse (#A47864), clay browns, olive greens, and sandstone beiges dominate as brands seek warmth and authenticity.
• Soft neutrals: Pantone's Cloud Dancer (#F0EEE9) leads neutral web backgrounds, replacing stark white.
• Dark mode: Dark backgrounds (#121212 to #1E1E1E) with controlled neon accents for interactive elements.
• Green trust signals: Websites using green tones report a 20 percent increase in trust scores among users under 35, according to Adobe research.

The Bottom Line

Hex color codes are the foundation of digital color specification. The #RRGGBB format uses hexadecimal notation to encode 16.7 million unique colors, with each pair representing red, green, and blue intensity from 00 (none) to FF (maximum). Understanding hex codes enables you to precisely control colors in CSS, convert between color formats, ensure accessibility through proper contrast ratios, and stay current with design trends. For designers and developers, hex is the language of color on the web.

Convert and explore colors with our free hex to RGB converter and color palette generator.

Frequently Asked Questions