A Hex color code, also called a hexadecimal color code, is a way of representing colors using hexadecimal numbers. It is widely used in HTML, CSS, web design, and digital graphics.
A standard six-digit HEX color code looks like #RRGGBB.
The first two characters represent the amount of red, the next two represent green, and the final two represent blue.
For example, #FF0000 represents pure red, #00FF00 represents pure green, and #0000FF represents pure blue.
- What a Hex color code is
- What
#RRGGBBmeans - How hexadecimal numbers represent colors
- How 3-digit HEX color codes work
- How 8-digit HEX color codes represent transparency
- HEX vs RGB differences
- How to use HEX colors in CSS
- Common HEX color examples
- How to convert HEX and RGB values
What Is a Hex Color Code?
A Hex color code is a notation used to represent a color with hexadecimal numbers. The term "HEX" comes from hexadecimal, which means a base-16 number system.
In web development, the most common HEX format is a six-digit code written as:
#RRGGBB
The # symbol indicates that the following value is a hexadecimal color code.
The six hexadecimal characters are divided into three pairs representing red, green, and blue.
Each pair can contain a value from 00 to FF.
These values correspond to decimal values from 0 to 255.
#3366CC represents:
- Red:
33= 51 - Green:
66= 102 - Blue:
CC= 204
What Does #RRGGBB Mean?
The six characters in a standard HEX color code are divided into three pairs. Each pair controls the intensity of one RGB color channel.
| Part | Color | Range |
|---|---|---|
RR |
Red | 00–FF |
GG |
Green | 00–FF |
BB |
Blue | 00–FF |
A value of 00 means that the color channel has no intensity.
A value of FF means that the channel has its maximum intensity.
For example:
-
#FF0000= Red -
#00FF00= Green -
#0000FF= Blue -
#FFFFFF= White -
#000000= Black
How Does Hexadecimal Color Work?
To understand HEX colors, it helps to understand the hexadecimal number system. Unlike the decimal system, which uses ten digits from 0 to 9, hexadecimal uses sixteen symbols.
| Decimal | Hexadecimal |
|---|---|
| 0 | 0 |
| 1 | 1 |
| 2 | 2 |
| 3 | 3 |
| 4 | 4 |
| 5 | 5 |
| 6 | 6 |
| 7 | 7 |
| 8 | 8 |
| 9 | 9 |
| 10 | A |
| 11 | B |
| 12 | C |
| 13 | D |
| 14 | E |
| 15 | F |
Because each RGB channel can have 256 possible values from 0 to 255, two hexadecimal digits are enough to represent each channel.
For example, decimal 255 is represented as hexadecimal FF.
Therefore:
RGB(255, 0, 0)
becomes:
#FF0000
The same conversion is performed independently for the red, green, and blue channels.
Common Hex Color Examples
Here are some commonly used HEX color codes and their RGB equivalents.
| Color | HEX | RGB |
|---|---|---|
| Red | #FF0000 |
rgb(255, 0, 0) |
| Green | #00FF00 |
rgb(0, 255, 0) |
| Blue | #0000FF |
rgb(0, 0, 255) |
| White | #FFFFFF |
rgb(255, 255, 255) |
| Black | #000000 |
rgb(0, 0, 0) |
| Yellow | #FFFF00 |
rgb(255, 255, 0) |
| Cyan | #00FFFF |
rgb(0, 255, 255) |
| Magenta | #FF00FF |
rgb(255, 0, 255) |
| Gray | #808080 |
rgb(128, 128, 128) |
| Orange | #FFA500 |
rgb(255, 165, 0) |
What Is a 3-Digit HEX Color Code?
CSS also supports a shortened three-digit HEX notation. Instead of using six hexadecimal characters, the code uses only three.
The format is:
#RGB
Each character is duplicated to create the corresponding six-digit value.
| 3-Digit HEX | 6-Digit HEX |
|---|---|
#F00 |
#FF0000 |
#0F0 |
#00FF00 |
#00F |
#0000FF |
#FFF |
#FFFFFF |
#000 |
#000000 |
For example, #36C is equivalent to #3366CC.
Three-digit notation is convenient for simple colors, while six-digit notation provides more precise control over each RGB channel.
What Is an 8-Digit HEX Color Code?
Modern CSS also supports an eight-digit HEX notation that adds an alpha channel for transparency.
The format is:
#RRGGBBAA
| Part | Meaning |
|---|---|
RR |
Red |
GG |
Green |
BB |
Blue |
AA |
Alpha / Transparency |
For example:
#FF000080
represents red with an alpha value of 80, which corresponds to roughly 50% opacity.
Eight-digit HEX notation can be useful when you want to specify both a color and its transparency directly in CSS.
A standard six-digit HEX color such as #FF0000 does not contain an alpha value.
Transparency requires an additional alpha channel or another CSS color notation.
HEX vs RGB
HEX and RGB are two different ways of writing the same basic RGB color information. They do not represent completely different color systems.
| Feature | HEX | RGB |
|---|---|---|
| Format | #RRGGBB |
rgb(R, G, B) |
| Number system | Hexadecimal | Decimal |
| Channel range | 00–FF |
0–255 |
| Common use | HTML / CSS | CSS / JavaScript / graphics |
| Example | #3366CC |
rgb(51, 102, 204) |
For example:
HEX: #3366CC
RGB: rgb(51, 102, 204)
Both values represent the same RGB color. The difference is simply how the red, green, and blue values are written.
How to Use HEX Colors in CSS
HEX color codes are commonly used in CSS to define text colors, backgrounds, borders, buttons, and other visual elements.
For example:
body {
background-color: #FFFFFF;
color: #333333;
}
.button {
background-color: #007BFF;
color: #FFFFFF;
}
.border {
border: 1px solid #CCCCCC;
}
In this example, #FFFFFF represents white, #333333 represents a dark gray, and #007BFF represents a blue color.
HEX notation is particularly convenient when you need to assign a fixed color directly in a stylesheet.
How to Convert HEX to RGB
Converting a HEX color code to RGB is relatively simple. Separate the six-digit HEX code into three pairs and convert each pair from hexadecimal to decimal.
For example:
HEX: #3366CC
33→ 5166→ 102CC→ 204
Therefore:
#3366CC = rgb(51, 102, 204)
You can perform this calculation manually, but a converter is more convenient when working with multiple colors.
Try the HEX to RGB Converter →
How to Convert RGB to HEX
The reverse process converts each RGB value from decimal notation into a two-digit hexadecimal value.
For example:
rgb(255, 0, 0)
becomes:
#FF0000
This conversion is useful when a color is provided as RGB but needs to be used as a HEX value in CSS or HTML.
Try the RGB to HEX Converter →
How to Choose HEX Colors for a Website
Choosing a HEX color is not only about finding a color that looks attractive. The relationship between colors is also important, especially for text, buttons, backgrounds, and other interactive elements.
Consider Text and Background Contrast
Text should have sufficient contrast against its background so that it remains easy to read. A visually attractive color combination may still be difficult to read if the contrast is too low.
Use a Consistent Color Palette
Websites generally look more organized when they use a limited and consistent color palette. For example, you can use one primary color, one secondary color, and several neutral colors for backgrounds and text.
Use a Color Chart When You Need Ideas
If you already know the general color you want but need a suitable HEX value, a color chart can make the process faster.
Browse the HEX Color Code Chart →
HEX Color Code Quick Reference
| HEX Format | Meaning | Example |
|---|---|---|
#RGB |
3-digit shorthand RGB color | #F00 |
#RRGGBB |
Standard 6-digit RGB color | #FF0000 |
#RGBA |
3-digit RGB with alpha shorthand | #F008 |
#RRGGBBAA |
6-digit RGB with alpha channel | #FF000080 |
The six-digit #RRGGBB format is the most familiar HEX notation for fixed RGB colors in web development.
The eight-digit #RRGGBBAA format can additionally represent transparency.
HEX Color Codes in Web Design
HEX colors are widely used in website interfaces because they provide a compact way to specify exact RGB colors.
Designers and developers can use the same HEX value across different elements to maintain consistent branding and visual styling.
For example, a website might use:
#007BFFfor primary buttons#333333for main text#666666for secondary text#FFFFFFfor backgrounds#F5F5F5for light interface sections
Using consistent color values can make a website easier to maintain and can help create a recognizable visual identity.
Why Are HEX Color Codes So Common?
HEX color codes are popular because they provide a compact and predictable representation of RGB colors. Each color channel uses exactly two hexadecimal characters in the standard six-digit format.
They are also directly supported by CSS, making them convenient for web developers.
A value such as #3366CC can be placed directly into a CSS color property without additional conversion.
For developers working with fixed design colors, HEX notation is often easy to read, copy, document, and reuse.
Frequently Asked Questions
What is a Hex color code?
A Hex color code is a hexadecimal notation used to represent an RGB color.
The standard six-digit format is #RRGGBB, where the three pairs represent red, green, and blue.
What does #RRGGBB mean?
RR represents red, GG represents green, and BB represents blue.
Each pair ranges from 00 to FF, corresponding to decimal values from 0 to 255.
What does #FFFFFF mean?
#FFFFFF represents white.
All three RGB channels are set to their maximum value of 255.
What does #000000 mean?
#000000 represents black.
All three RGB channels are set to 0.
What is the difference between HEX and RGB?
HEX and RGB can represent the same RGB color.
HEX uses hexadecimal values such as #3366CC, while RGB uses decimal values such as rgb(51, 102, 204).
What is a 3-digit HEX color code?
A 3-digit HEX color code is a shorthand version of the standard 6-digit format.
For example, #F00 is equivalent to #FF0000.
Can HEX color codes include transparency?
Yes.
Modern CSS supports 8-digit HEX notation such as #RRGGBBAA, where the final two hexadecimal digits represent the alpha channel.
Can HEX colors be used in CSS?
Yes.
HEX color codes can be used with CSS properties such as color, background-color, and border-color.
Can lowercase letters be used in HEX color codes?
Yes.
Hexadecimal letters are case-insensitive for CSS color notation.
For example, #FF0000 and #ff0000 represent the same color.
How can I convert HEX to RGB?
Separate the HEX value into its red, green, and blue pairs and convert each hexadecimal pair to a decimal number. You can also use an online HEX to RGB converter to perform the conversion instantly.
Summary
A Hex color code is a hexadecimal representation of an RGB color.
The most common format is #RRGGBB, where each pair represents red, green, and blue.
- HEX stands for hexadecimal color notation.
- The standard format is
#RRGGBB. - Each RGB channel ranges from
00toFF. #FF0000represents red.#FFFFFFrepresents white.#000000represents black.- CSS also supports 3-digit shorthand such as
#F00. - Modern CSS supports 8-digit HEX colors with an alpha channel.
- HEX and RGB can represent the same RGB colors using different notation.
- HEX values can be used directly in CSS.
Understanding HEX color codes makes it easier to work with website design, CSS, graphics, and digital interfaces.
Once you understand the #RRGGBB structure, reading and creating common web colors becomes much simpler.
Related Tools
- RGB to HEX Converter : Convert RGB values into HEX color codes.
- HEX to RGB Converter : Convert hexadecimal color codes into RGB values.
- Color Picker : Pick and identify colors visually.
- HEX Color Code Chart : Browse commonly used HEX colors and copy their codes.