Hex Code Color Guide

Master hex code colors for your web design projects. Find the perfect colors, learn how to use them in your HTML and CSS, and understand how hexadecimal colors work.

#FF0000 → Red

#00FF00 → Green

#0000FF → Blue

FIND HEX COLORS NOW →

Hex Color Code Picker

Use our interactive tool below to find the perfect hex color code for your project. Simply select a color and get the corresponding hex code instantly.

HEX

RGB

HSL

What is a Hex Code Color?

A hex code color is a way of specifying color using hexadecimal values. In web design, hex color codes are widely used in HTML and CSS to set colors for text, backgrounds, borders, and other elements.

Each hex code begins with a hash symbol (#) followed by six hexadecimal digits (0-9, A-F). These six digits represent the intensity of red, green, and blue light that make up the color:

First two digits: Amount of red (00-FF)
Middle two digits: Amount of green (00-FF)
Last two digits: Amount of blue (00-FF)

For example, #FF0000 represents pure red, as FF (255 in decimal) is the maximum value for red, while green and blue are set to 00 (0).

Hex Code Structure

#FF0000 = Pure Red

#00FF00 = Pure Green

#0000FF = Pure Blue

Why Use Hex Code Colors?

Precision

Hex codes provide precise color specification with over 16.7 million possible colors, allowing for exact color matching in your designs.

Universal Support

Hex color codes are supported by all modern browsers and web technologies, making them the standard for web design and development.

Compact Format

Hex codes provide a compact way to represent colors, making your code cleaner and easier to read than other color formats.

How to Use Hex Code Colors in Web Development

Using Hex Codes in CSS

.header {
  background-color: #3498db;
  color: #ffffff;
}

.button {
  background-color: #2ecc71;
  border: 2px solid #27ae60;
}

.warning {
  color: #e74c3c; /* Red text */
}

Hex codes are the most common color format in CSS and work universally across all browsers.

Using Hex Codes in HTML

<!-- Inline styling with hex codes -->
<div style="color: #3498db;">
  This text is blue
</div>

<p style="background-color: #f5f5f5; 
          color: #333333;">
  Gray text on light gray background
</p>

<span style="border: 3px solid #e74c3c;">
  This has a red border
</span>

While it's generally better to separate content (HTML) from presentation (CSS), you can use hex codes directly in HTML for quick styling needs.

Hex Code Color Tips

•
Shorthand notation: If each channel has repeated digits (e.g., #RRGGBB), you can use a 3-digit shorthand (e.g., #RGB). For example, #FF0000 can be written as #F00.
•
Alpha transparency: Modern browsers support 8-digit hex codes where the last two digits represent opacity (e.g., #3498DB80 for semi-transparent blue).
•
CSS variables: Store your brand's hex codes as CSS variables for easy maintenance: :root { --primary-color: #3498db; }
•
Accessibility: Ensure sufficient contrast between text and background colors for better readability. Aim for a contrast ratio of at least 4.5:1 for normal text.

Popular Hex Code Colors

Here are some commonly used hex code colors that you might find useful in your projects:

Name	Hex Code	RGB Value
Pure Red	#FF0000	rgb(255, 0, 0)
Pure Green	#00FF00	rgb(0, 255, 0)
Pure Blue	#0000FF	rgb(0, 0, 255)
Yellow	#FFFF00	rgb(255, 255, 0)
Cyan	#00FFFF	rgb(0, 255, 255)
Magenta	#FF00FF	rgb(255, 0, 255)
Black	#000000	rgb(0, 0, 0)
White	#FFFFFF	rgb(255, 255, 255)

View Full Color Chart

Frequently Asked Questions

What is a hex code color?

A hex code color is a way of specifying color using hexadecimal values. The code starts with a pound sign (#) followed by six hexadecimal digits, which specify the amounts of red, green, and blue that make up the color. For example, #FF0000 represents pure red, #00FF00 represents pure green, and #0000FF represents pure blue.

How do I use hex code colors in my website?

To use hex code colors in your website, include them in your CSS or HTML where color properties are specified. For example, in CSS you can write: body { background-color: #3498db; color: #ffffff; }. In HTML, you can use inline styling like: <div style="color: #3498db;">This text is blue</div>. Modern browsers support all valid hex color codes.

Can I use shortened hex codes?

Yes, you can use shortened 3-digit hex codes when each channel has repeated digits. For example, #F00 is equivalent to #FF0000 (red), #0F0 is the same as #00FF00 (green), and #00F equals #0000FF (blue). This shorthand only works when both digits in each color pair are the same.

How many different colors can be represented with hex codes?

Hex color codes can represent 16,777,216 different colors. This is because each of the three color channels (red, green, and blue) can have 256 different values (0-255 in decimal, or 00-FF in hexadecimal), and 256³ equals 16,777,216. This range is often referred to as "24-bit color" because it takes 24 bits (3 bytes) to store all these color possibilities.

What's the difference between hex codes and RGB values?

Hex codes and RGB values represent the same colors but in different formats. Hex codes use hexadecimal notation (base-16) with a # symbol, like #FF5733, while RGB uses decimal values from 0-255 for each channel, like rgb(255, 87, 51). The main differences are: 1) Hex is more compact, 2) RGB can include alpha transparency with rgba(), and 3) Some designers find RGB more intuitive since the values range from 0-255 rather than 00-FF.

Ready to Use Hex Code Colors?

Try our color picker to find the perfect colors for your next web project

Start Picking Colors