What Is a Hex Code? A Beginner’s Guide to Understanding Hexadecimal Color Codes

ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More

#	Preview	Product	Price
1		Sherwin Williams Colors collection Deck Complete Paint Colors	$35.00	Buy on Amazon
2		Benjamin Moore Collections Fan Deck	$33.99	Buy on Amazon
3		"BENJAMIN MOORE" CLASSIC COLORS FAN DECK [CASE OF 1]	$48.57	Buy on Amazon
4		DOITOOL 1 Set Deck Color Comparing Drawing Color Book Color Default Color Wheels for The Artist...	$23.59	Buy on Amazon
5		Ultimate 3-in-1 Color Tool, Updated 3rd Edition: - 24 Color Cards with Numbered Swatches - 5 Color...	$20.46	Buy on Amazon

A hex code is a compact way to describe a digital RGB color using the base-16 number system. In CSS and many design applications, it usually appears as #RRGGBB: two hexadecimal digits for red, two for green, and two for blue. For example, #3366CC represents RGB values of 51, 102, and 204.

Hex codes are useful for websites, digital illustrations, design handoffs, and color palettes. They describe numerical sRGB color values; they do not guarantee that a color will look identical on every screen or in print.

#1 Best Overall

Sale

Sherwin Williams Colors collection Deck Complete Paint Colors

$35.00

Buy on Amazon

What does “hexadecimal” mean?

Hexadecimal is a base-16 number system. Instead of using only the ten symbols used in decimal numbers, it uses 16:

0 1 2 3 4 5 6 7 8 9 A B C D E F

The letters represent values above 9:

A = 10   B = 11   C = 12   D = 13   E = 14   F = 15

Each pair of hexadecimal digits can represent a value from 00 to FF. For example:

3C = (3 × 16) + 12 = 60
FF = (15 × 16) + 15 = 255

So FF is not a special color. It is simply the largest number that two hexadecimal digits can represent. In an RGB color, it means maximum intensity for that channel.

What does the # symbol mean?

In CSS color notation, the hash symbol introduces a hexadecimal color value:

color: #3366CC;

The # is syntax, not part of the red, green, or blue values. It tells the browser to interpret the characters that follow as a CSS hexadecimal color.

How to read a six-digit hex code

The standard format is:

#RRGGBB

Read it as three separate pairs:

# 33 66 CC
  │  │  └─ Blue
  │  └──── Green
  └─────── Red

00 means no intensity, 80 is approximately half intensity, and FF means maximum intensity.

Because each of the three channels has 256 possible values, a six-digit RGB hex color can express 16,777,216 combinations:

256 × 256 × 256 = 16,777,216

For a worked example, decode #2A7FDB pair by pair:

2A = (2 × 16) + 10 = 42
7F = (7 × 16) + 15 = 127
DB = (13 × 16) + 11 = 219

Therefore, #2A7FDB is equivalent to rgb(42 127 219).

Rank #2

Benjamin Moore Collections Fan Deck

• Brand: Benjamin moore
• Container type: Box
• Finish type: Opa

$33.99

Buy on Amazon

Three-digit shorthand: #RGB

CSS also supports a shorter form:

#RGB

Each digit is duplicated to create the six-digit version:

#39C → #3399CC
#F0A → #FF00AA
#000 → #000000
#FFF → #FFFFFF

This is not the same as adding zeros at the end. For example, #39C expands to #3399CC, not #390C00.

Three-digit notation offers 4,096 possible colors, compared with approximately 16.7 million in six-digit notation. It is convenient for simple palettes but cannot represent every possible six-digit color.

Four- and eight-digit hex codes: adding transparency

CSS supports an alpha component for transparency. The full form is:

#RRGGBBAA

#  RR  GG  BB  AA
   red green blue alpha

The four-digit shorthand is:

#RGBA

As with RGB shorthand, each digit is duplicated:

#F008 → #FF000088

Alpha values range from 00, fully transparent, to FF, fully opaque. 80 equals 128 out of 255, or approximately 50.2% opacity.

background-color: #00000080; /* black at about 50% opacity */
color: #FF000000;            /* transparent red */
color: #FF0000FF;             /* opaque red */

An alpha value is not another RGB channel. RGB has three color channels—red, green, and blue—and alpha describes how strongly that color is composited with what is behind it.

Consequently, an eight-digit color does not have one fixed visible appearance by itself. #00000080 can look different over white, gray, a colored surface, or an image. Always test transparent colors against their actual background.

Using hex codes in CSS and HTML

A hex color can be used wherever CSS accepts a <color> value, including text, backgrounds, borders, shadows, gradients, and many SVG properties.

Rank #3

"BENJAMIN MOORE" CLASSIC COLORS FAN DECK [CASE OF 1]

• Very good condition
• Benjamin Moore Classic Colors Fan Deck
• Classic Colors
• Includes the American Classic Colors (AC)

$48.57

Buy on Amazon

body {
  background-color: #F5F7FA;
  color: #1F2937;
}

.button {
  background: #2563EB;
  border-color: #1D4ED8;
}

.notice {
  color: #92400E;
  background-color: #FEF3C7;
}

For a small HTML example:

<p style="color: #2563EB;">Blue text</p>

Inline styles are useful for demonstrations, but stylesheets or CSS custom properties are easier to maintain:

:root {
  --brand-blue: #2563EB;
  --text-dark: #111827;
  --surface-light: #F9FAFB;
}

body {
  color: var(--text-dark);
  background: var(--surface-light);
}

To let a user choose a color in a browser, use the HTML color input:

<label>
  Choose a color:
  <input type="color" value="#3366CC">
</label>

Browser and operating-system interfaces vary, but the color input provides a built-in color picker.

Converting hex to RGB

To convert a six-digit hex color to decimal RGB:

1. Remove the #, if necessary.
2. Split the value into red, green, and blue pairs.
3. Convert each pair from base 16 to base 10.
4. Read the three results as red, green, and blue.

For #2A7FDB:

Red:   2A = 42
Green: 7F = 127
Blue:  DB = 219

#2A7FDB = rgb(42, 127, 219)

These are two notations for the same sRGB channel values:

color: #3366CC;
color: rgb(51 102 204);

The older comma-separated form is also valid in common CSS usage:

color: rgb(51, 102, 204);

Converting RGB to hex

Convert each decimal channel independently. Divide by 16; the quotient is the first hexadecimal digit and the remainder is the second. Add a leading zero when needed.

For RGB values of 42, 127, and 219:

42  = 2A
127 = 7F
219 = DB

RGB(42, 127, 219) = #2A7FDB

A simple JavaScript converter can automate six-digit, opaque colors:

function hexToRgb(hex) {
  const value = hex.replace(/^#/, "");

  if (!/^[0-9a-fA-F]{6}$/.test(value)) {
    throw new Error("Expected a six-digit hex color.");
  }

  return {
    r: parseInt(value.slice(0, 2), 16),
    g: parseInt(value.slice(2, 4), 16),
    b: parseInt(value.slice(4, 6), 16)
  };
}

console.log(hexToRgb("#2A7FDB"));
// { r: 42, g: 127, b: 219 }

This function intentionally does not handle shorthand, alpha, percentage-based RGB, whitespace variations, or modern non-sRGB color functions. A production converter should define which formats it accepts rather than silently guessing.

Rank #4

DOITOOL 1 Set Deck Color Comparing Drawing Color Book Color Default Color Wheels for The Artist Color Fan Deck Paper Drawing Tool Paint

• Painting tools-- wide range of use, can be used for painting, architectural paint, contrast and selection. professional and practical.
• -- easy to rotate into a small card shape for easy storage and portability.
• Color chart-- small size, light weight, easy to carry and store, will not take up of space.
• Color wheel poster-- the operation is simple, convenient and practical, and used for color identification and selection in the fields of architecture and painting.
• Painting supplies-- cards exquisite workmanship and good materials ensure a and perfect details.

$23.59

Buy on Amazon

Hex versus RGB, HSL, HSB, and named colors

Hex is not inherently more accurate than rgb(). If both specify the same sRGB channel values, they represent the same CSS color. rgb() may be easier to read when changing decimal channels, using alpha, or applying modern CSS color operations:

background-color: rgb(37 99 235 / 80%);

HSL can make adjustments such as “reduce saturation” feel more intuitive, but its lightness value is not a perfect model of perceived brightness. Similarly, RGB values measure channel intensity—not how bright a color necessarily looks. For example, #808080 is not automatically “50% brightness” in a perceptual sense.

Modern CSS color functions include HSL, HWB, Lab, OKLab, and other formats for cases where traditional sRGB hex is not the best fit.

Are hex colors accessible?

A hex code describes one color; it does not tell you whether a color combination is accessible. Test the foreground and background together with a contrast checker rather than judging them by eye.

Check:

• Normal-sized text separately from large text.
• Text against its actual background.
• Hover, focus, disabled, visited, and error states.
• Text over images, gradients, or changing backgrounds.
• Transparent colors after they are composited.
• Important borders, icons, controls, and focus indicators where applicable.

Exact contrast requirements depend on the applicable WCAG version and success criterion, as well as the type and size of the content. Poor color choices can make content difficult or impossible to use, especially for people with color-vision deficiencies. See MDN’s guidance on using color wisely.

Why a hex code may not look the same everywhere

In CSS, conventional hex notation identifies an sRGB value. That gives developers a precise numerical value, but numerical precision is not the same as identical visual appearance.

Appearance can vary because of:

• Display calibration, brightness, and viewing conditions.
• Browser and operating-system color management.
• Different color profiles.
• Conversion to print-oriented color spaces.
• Wide-gamut workflows such as Display P3.
• Transparency and the background beneath the color.

Design tools may work in more than one color profile. For example, Figma documents sRGB and Display P3 workflows. If you are moving a color from a painting or design application into CSS, confirm that the source color is being provided as sRGB when that is the intended target.

For print painting, a hex code is not a complete print specification. Printers use other color workflows, inks, paper, and profiles, so a screen color may need conversion and proofing before production.

Best Value

Sale

Ultimate 3-in-1 Color Tool, Updated 3rd Edition: - 24 Color Cards with Numbered Swatches - 5 Color Plans for each Color - 2 Value Finders Red & Green ... CMYK, RGB & HEX Formula (Reference Guide)

• Features numbered swatches
• 2 value finders -green and red
• Color guide and fabric preview window

$20.46

Buy on Amazon

Hex codes are not the same as web-safe colors

The historic web-safe palette contained 216 colors intended for displays limited to 256 colors. Modern browsers and displays generally do not require designers to restrict themselves to that palette. Hex notation can represent millions of colors, so “hex color” and “web-safe color” are not synonyms.

Adobe still documents an “Only Web Colors” option in Photoshop, but it is primarily a legacy compatibility feature. See Adobe’s web-safe color documentation.

Common hex-code mistakes

Leaving out the hash

color: 123456;  /* invalid as standard CSS hex syntax */
color: #123456; /* valid */

Using the wrong number of digits

#12345    /* invalid */
#1234567  /* invalid */
#123456   /* valid */

CSS hexadecimal notation uses three, four, six, or eight digits after the hash.

Using letters outside A–F

#GG0000  /* invalid: G is not hexadecimal */

Expanding shorthand incorrectly

#ABC → #AABBCC

Each original digit is repeated. It is not padded with zeros.

Assuming six digits include transparency

#RRGGBB is opaque by default. Use #RRGGBBAA, #RGBA, an alpha-bearing rgb() value, or a separate opacity property when transparency is needed.

Assuming #FFFFFF looks identical everywhere

It is maximum white for all three sRGB channels, but screen settings, color management, surrounding colors, and viewing conditions still affect appearance.

Confusing valid syntax with a good design choice

A color can be valid CSS and still have poor contrast, be hard to distinguish from nearby colors, or become unsuitable when printed. Validate the color in its actual context.

Quick hex-color reference

#RGB       = red, green, blue shorthand
#RGBA      = RGB shorthand plus alpha
#RRGGBB    = full red, green, blue values
#RRGGBBAA  = full RGB values plus alpha
00         = minimum channel value
FF         = maximum channel value
A–F        = hexadecimal digits

For day-to-day website and digital painting workflows, the key habit is to split a code into channel pairs. #3366CC means 33 red, 66 green, and CC blue—not one mysterious six-character color name. Once you understand base 16, you can read, convert, test, and use hex colors confidently.

Quick Recap

SaleBestseller No. 1

Sherwin Williams Colors collection Deck Complete Paint Colors

$35.00

Bestseller No. 2

Benjamin Moore Collections Fan Deck

Brand: Benjamin moore; Container type: Box; Finish type: Opa

$33.99

Bestseller No. 3

"BENJAMIN MOORE" CLASSIC COLORS FAN DECK [CASE OF 1]

Very good condition; Benjamin Moore Classic Colors Fan Deck; Classic Colors; Includes the American Classic Colors (AC)

$48.57

Bestseller No. 4

DOITOOL 1 Set Deck Color Comparing Drawing Color Book Color Default Color Wheels for The Artist Color Fan Deck Paper Drawing Tool Paint

-- easy to rotate into a small card shape for easy storage and portability.

$23.59

SaleBestseller No. 5

Ultimate 3-in-1 Color Tool, Updated 3rd Edition: - 24 Color Cards with Numbered Swatches - 5 Color Plans for each Color - 2 Value Finders Red & Green ... CMYK, RGB & HEX Formula (Reference Guide)

Features numbered swatches; 2 value finders -green and red; Color guide and fabric preview window

$20.46

ThatPainter Team

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.