Color Guide

What is HEX?

A HEX color code is a compact way to represent a digital color using red, green, and blue (RGB) values. A typical six-digit code looks like #3366CC.

On the web, HEX uses sRGB, the standard RGB color space used by browsers and many design tools. A color space defines how numeric values correspond to colors, so you can share a code between tools that use sRGB.

How to read a HEX color code

A six-digit HEX code starts with a hash (#), followed by three pairs of characters: #RRGGBB. RR = Red, GG = Green, and BB = Blue: each pair represents the amount of that color channel.

33Red · 51
66Green · 102
CCBlue · 204

HEX is short for hexadecimal, a base-16 number system. Its 16 characters are 0 1 2 3 4 5 6 7 8 9 A B C D E F. Each pair ranges from 00 (0, no contribution) to FF (255, the maximum), giving each channel 256 possible values. For example, #3366CC is the same color as rgb(51, 102, 204).

Understanding HEX Values

HEX describes a mixture of light. #000000 has no red, green, or blue, so it is black. #FFFFFF sets all three channels to their maximum, producing white.

#FF0000 uses maximum red only; #00FF00 uses maximum green only (called lime in CSS); and #0000FF uses maximum blue only. The swatches below show these colors alongside their codes.

Neutral grays

When red, green, and blue have equal values, the result is a neutral gray. Lower values create darker grays; higher values create lighter grays.

Dark gray#333333
Medium gray#777777
Light gray#CCCCCC

Common HEX colors

Each RGB channel has 256 possible values. Combining the three channels gives 256 × 256 × 256 = 16,777,216 possible six-digit HEX combinations.

Black#000000
White#FFFFFF
Red#FF0000
Lime#00FF00
Blue#0000FF
Example Blue#3366CC

Why do some codes have three or eight digits?

Three-digit #RGB codes repeat each character: #F80 expands to #FF8800. Here, F → FF, 8 → 88, and 0 → 00. This shorthand only works when both characters in every pair match.

Eight-digit codes add an alpha pair for opacity: #RRGGBBAA. AA is alpha. This final pair ranges from 00 (fully transparent) to FF (fully opaque). For example, #3366CC80 is approximately 50% opaque: hexadecimal 80 is 128, and 128 / 255 ≈ 50.2%. Alpha changes transparency, not the underlying RGB values.

Four-digit #RGBA shorthand works the same way: #F008 expands to #FF000088.

HEX vs RGB

#3366CC and rgb(51, 102, 204) describe the same sRGB color. HEX uses hexadecimal notation; the RGB example uses decimal channel values from 0 to 255. Use whichever format your tool needs.

HEX

#3366CC

Common use: CSS, design tools, and palette sharing.

RGB

rgb(51, 102, 204)

Common use: CSS, programming, and color calculations.

Learn more about RGB → and how red, green, and blue light combine.

Convert HEX and RGB → with the Paletile Color Converter.

How to use HEX in your designs

  1. Choose a color from a Paletile palette and copy its HEX code.
  2. Paste it into the HEX field in your design tool, or use it as a CSS color value, such as color: #3366CC;.
  3. Check the color alongside your background and other palette colors. A HEX code specifies a color; it does not guarantee readable contrast.
.example {
    color: #3366CC;
    background-color: #F5F7FA;
    border-color: #D9E2F2;
}

Use HEX anywhere CSS accepts a color value, including color for text, background-color for backgrounds, and border-color for borders.

HEX letters are case-insensitive. Uppercase and lowercase letters mean the same thing: #3366CC and #3366cc are identical.

HEX Colors and Accessibility

A HEX value identifies a color, but it cannot tell you whether text will be readable against another color. Readability depends on the contrast between foreground and background colors, as well as factors such as text size.

When choosing colors for text, buttons, links, or interface elements, check their contrast together instead of judging them only by appearance. With transparent colors, the background also affects the visible result. Keep labels or other cues alongside color so that color alone does not carry the meaning.

Frequently Asked Questions

Is HEX the same as RGB?

They can represent the same RGB color using different notation. For example, #3366CC and rgb(51, 102, 204) represent the same color.

Does capitalization matter in HEX codes?

No. #3366CC and #3366cc represent the same color.

Can a HEX color include transparency?

Yes. Eight-digit HEX adds an alpha channel. For example, #3366CC80 is approximately 50% opaque.

Why are HEX color codes six digits?

In the six-digit format, two hexadecimal digits represent each RGB channel: RR, GG, and BB.

What is the difference between #FFF and #FFFFFF?

There is no color difference. #FFF is shorthand for #FFFFFF; both represent white.

Can I use HEX colors in CSS?

Yes. HEX is a standard CSS color notation for properties such as color, background-color, and border-color.