HEX Color Codes Explained: A Complete Guide

What Is a HEX Color Code?

A HEX color code is a six-digit hexadecimal number preceded by a hash symbol (#) that represents a color in web design and digital graphics. The six digits encode three color channels: red, green, and blue (RGB). Each channel uses two hexadecimal digits, giving 256 possible intensity levels (00 to FF) per channel and over 16.7 million possible color combinations.

HEX codes are the most widely used color notation in CSS, HTML, and graphic design software. Their compact format and universal support make them the default choice for specifying colors in web development.

Reading HEX Codes

The six digits break into three pairs: positions 1-2 control red, 3-4 control green, and 5-6 control blue. Higher values mean more of that color component.

• #FF0000: Maximum red (FF), no green (00), no blue (00) = pure red
• #00FF00: No red, maximum green, no blue = pure green
• #0000FF: No red, no green, maximum blue = pure blue
• #FFFFFF: All channels at maximum = white
• #000000: All channels at zero = black
• #808080: All channels at midpoint = medium gray

When all three channels have equal values, the result is always a shade of gray. The higher the value, the lighter the gray.

Shorthand Notation

When each pair consists of repeated digits, CSS allows a three-digit shorthand. #FF6600 becomes #F60, #AABBCC becomes #ABC, and #000000 becomes #000. This shorthand only works when every pair has matching digits. #F08 expands to #FF0088, not #F00088.

Four-digit shorthand adds transparency: #F60A expands to #FF6600AA, where the last pair controls alpha (opacity). Eight-digit HEX codes provide full alpha specification: #FF660080 is the color #FF6600 at approximately 50% opacity.

How to Create Custom Colors

Understanding the channel structure lets you create colors intuitively. Want a warm orange? Start with high red (E or F), medium green (8-A), and low blue (0-3). Adjusting channels produces variations: increasing green lightens toward yellow, decreasing red darkens toward brown.

For grays, use identical values across all channels. For pure hues, set one or two channels high and the rest to zero. For pastel shades, use high values (C0-FF) across all channels with one slightly higher than the others. For dark, rich tones, use low-to-medium values (30-80) with one channel dominant.

Common Web Colors

Several HEX values appear frequently in web design:

• #333333: Dark gray, common for body text (softer than pure black)
• #666666: Medium gray, used for secondary text
• #F5F5F5: Very light gray, common background color
• #007BFF: Bootstrap primary blue
• #28A745: Bootstrap success green
• #DC3545: Bootstrap danger red
• #FFC107: Bootstrap warning yellow

Design systems typically define a palette of HEX codes for consistent use across a project. Tools like Figma, Sketch, and Adobe XD display and accept HEX codes natively.

HEX in CSS

CSS accepts HEX codes in property values: color, background-color, border-color, box-shadow, and any property that takes a color value. HEX codes are case-insensitive (#ff6600 and #FF6600 are identical) and can be used alongside other color formats in the same stylesheet.

Modern CSS also supports the newer color() function and color spaces beyond sRGB, but HEX codes remain the most universally understood and supported format.

Use the color tools on CalcHub to explore HEX colors, convert between formats, and build palettes, or check our CSS tools for design utilities.

Explore and convert HEX colors with CalcHub’s color tools.