Hex Codes Colors

Find the perfect colors for your web design projects with our comprehensive hex code reference and interactive tools. Browse popular color palettes, generate color schemes, and learn how to use hex codes effectively.

#4285F4 → Google Blue

#34A853 → Google Green

#FBBC05 → Google Yellow

FIND COLOR HEX CODES →

Interactive Hex Code Color Picker

Use our interactive color picker to find the perfect hex codes for your design projects. Simply select a color and instantly get its hex code, RGB values, and color harmonies.

HEX

RGB

HSL

What Are Hex Codes Colors?

Hex codes colors (hexadecimal color codes) are a standardized way of representing colors in web design, digital art, and programming. They provide a precise and universal method to define specific colors for use in HTML, CSS, and other applications.

Each hex color code starts with a hash symbol (#) followed by six hexadecimal digits. These six digits represent the red, green, and blue components of a color, each ranging from 00 to FF in hexadecimal notation (0-255 in decimal).

Hex Code Structure:

#RRGGBB

RR: Red value (00-FF)
GG: Green value (00-FF)
BB: Blue value (00-FF)

Primary Colors in Hex

Pure Red

#FF0000

Pure Green

#00FF00

Pure Blue

#0000FF

Note: By mixing these primary colors in different proportions, you can create any of the 16,777,216 colors possible in the RGB color space.

Popular Hex Code Color Palettes

Red

Red 500

#F44336

Red 700

#D32F2F

Red 900

#B71C1C

Pink

Pink 500

#E91E63

Pink 700

#C2185B

Pink 900

#880E4F

Purple

Purple 500

#9C27B0

Purple 700

#7B1FA2

Purple 900

#4A148C

Blue

Blue 500

#2196F3

Blue 700

#1976D2

Blue 900

#0D47A1

Green

Green 500

#4CAF50

Green 700

#388E3C

Green 900

#1B5E20

View Our Complete Color Chart

How to Use Hex Codes in Web Development

Using Hex Codes in CSS

/* CSS color properties using hex codes */
body {
  background-color: #F9F9F9;
}

h1, h2, h3 {
  color: #333333;
}

.button-primary {
  background-color: #4285F4;
  color: #FFFFFF;
  border: 1px solid #2979FF;
}

.alert {
  color: #D32F2F;
  border-left: 4px solid #F44336;
  background-color: #FFEBEE;
}

CSS Properties That Accept Hex Colors:

color
background-color
border-color
outline-color
box-shadow
text-shadow

Using Hex Codes in HTML

<!-- Inline styles using hex color codes -->
<p style="color: #2196F3;">
  This text is blue
</p>

<div style="background-color: #F5F5F5;
            border: 1px solid #DDDDDD;
            padding: 15px;">
  This div has a light gray background
  with a darker gray border
</div>

<span style="color: #4CAF50; 
             font-weight: bold;">
  This text is green and bold
</span>

Best Practices for Using Hex Colors:

•
Use CSS variables to maintain consistent colors throughout your site:

:root {
  --primary-color: #4285F4;
  --secondary-color: #34A853;
  --text-color: #333333;
}

.button {
  background-color: var(--primary-color);
  color: white;
}

•
Ensure accessibility by maintaining sufficient contrast between text and background colors (WCAG recommends at least 4.5:1 ratio).
•
Use shorthand hex when possible: #RGB instead of #RRGGBB when each pair has identical digits (e.g., #F00 instead of #FF0000).

Advanced Hex Code Features

8-digit Hex Codes for Transparency

Modern browsers support 8-digit hex codes where the last two digits represent the alpha (transparency) channel:

#RRGGBBAA

Example: #FF000080 is red with 50% opacity (80 in hex is 128 in decimal, which is 50% of 255).

CSS Color Functions with Hex

You can use CSS color functions with hex codes:

color: color-mix(in srgb, #FF0000, #0000FF 50%);

This mixes red and blue to create purple.

Common Hex Color Codes Reference

Here's a quick reference of commonly used hex color codes for web design:

Black

#000000

White

#FFFFFF

Red

#F44336

Blue

#2196F3

Green

#4CAF50

Yellow

#FFEB3B

Orange

#FF9800

Purple

#9C27B0

Grayscale Hex Codes

#F5F5F5Very Light Gray

#EEEEEELight Gray

#DDDDDDGray

#9E9E9EMedium Gray

#616161Dark Gray

#212121Very Dark Gray

Common UI Color Hex Codes

#1976D2Primary Blue

#D32F2FError Red

#388E3CSuccess Green

#FFA000Warning Yellow

#29B6F6Info Blue

#7B1FA2Accent Purple

View our complete list of color names with hex codes →

Hex Code Tips and Tricks

Shorthand Hex Codes

If each channel has repeated digits, you can use a 3-digit shorthand hex code. For example, #FF0000 can be written as #F00.

Full Hex	Shorthand	Color
#FF0000	#F00
#00FF00	#0F0
#0000FF	#00F
#FFFF00	#FF0

Color Manipulation Techniques

Darkening a Color

To darken a color, decrease the values of all three channels proportionally.

→

#4285F4→#3B77D9→#2C5AA7

Lightening a Color

To lighten a color, increase the values of all three channels proportionally.

→

#4285F4→#6FA4F6→#9CC3F9

Creating Transparency

For transparency, use 8-digit hex codes or RGBA:

#4285F480 (50% opacity)
rgba(66, 133, 244, 0.5) (equivalent)

Accessibility with Hex Colors

When using hex colors for text and backgrounds, ensure sufficient contrast for readability. The Web Content Accessibility Guidelines (WCAG) recommend:

•
Minimum contrast ratio of 4.5:1 for normal text
•
Minimum contrast ratio of 3:1 for large text (18pt+) or bold text (14pt+)

Good Contrast✓ Accessible

White text (#FFFFFF) on blue (#1976D2)

Contrast ratio: 6.4:1

Poor Contrast✗ Not Accessible

Light blue text (#4FC3F7) on blue (#BBDEFB)

Contrast ratio: 1.4:1

Frequently Asked Questions

How do hex codes represent colors?

Hex codes represent colors by specifying the intensity of red, green, and blue components using hexadecimal values. Each hex code starts with a # symbol followed by six hexadecimal digits (0-9, A-F), where the first two digits represent the red component, the middle two represent the green component, and the last two represent the blue component. Each pair of digits can express values from 0 (00) to 255 (FF) in decimal, giving a total of 16,777,216 possible colors. For example, #FF0000 represents pure red, with maximum red (FF) and no green (00) or blue (00).

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

Hex codes and RGB values both represent the same colors but use different notation systems. Hex codes use a hexadecimal (base-16) system with format #RRGGBB, while RGB uses decimal values in the format rgb(R, G, B). For example, the color blue can be represented as #0000FF in hex or rgb(0, 0, 255) in RGB. The main advantages of hex codes are their compactness and widespread use in web development. RGB format is sometimes preferred when transparency is needed, as it can be extended to rgba() to include an alpha channel for opacity.

How do I find the hex code for a specific color?

There are several ways to find the hex code for a specific color:

1. Use our interactive color picker at the top of this page
2. Use the color picker tool in design software like Photoshop, Figma, or Sketch
3. Use browser developer tools to inspect elements with the color you want
4. Use an eyedropper tool or color picker browser extension to sample colors from any webpage
5. Use our image color extractor tool to pull colors from images
6. Browse our color charts and libraries of named colors

Most of these methods will provide the hex code (and often RGB and HSL values as well) for any color you select.

Are there any standard or "safe" hex colors for web design?

While modern displays can show millions of colors, there are still some standard color systems used in web design:

1. Web Safe Colors: A historical palette of 216 colors (using combinations of 00, 33, 66, 99, CC, and FF) designed to display consistently across older browsers. While less relevant today, some designers still use them for retro designs or maximum compatibility.

2. Material Design Colors: Google's design system includes a specific color palette with primary colors and various shades. These colors are widely used in modern web applications and have well-established hex codes.

3. Brand Colors: Many major brands have established specific hex codes for their brand colors that have become recognizable standards (like Facebook blue #3b5998 or Twitter blue #1DA1F2).

In general, modern web design isn't restricted to any specific color set, but using established color systems can help create a more cohesive and professional appearance.

Start Using Hex Codes in Your Projects

Find the perfect colors with our interactive color picker and implement them with confidence

Try Our Color Picker

Hex Codes Colors

Interactive Hex Code Color Picker

What Are Hex Codes Colors?

Hex Code Structure:

Primary Colors in Hex

Pure Red

Pure Green

Pure Blue

Popular Hex Code Color Palettes

Red

Pink

Purple

Blue

Green

How to Use Hex Codes in Web Development

Using Hex Codes in CSS

CSS Properties That Accept Hex Colors:

Using Hex Codes in HTML

Best Practices for Using Hex Colors:

Advanced Hex Code Features

8-digit Hex Codes for Transparency

CSS Color Functions with Hex

Common Hex Color Codes Reference

Grayscale Hex Codes

Common UI Color Hex Codes

Hex Code Tips and Tricks

Shorthand Hex Codes

Color Manipulation Techniques

Darkening a Color

Lightening a Color

Creating Transparency

Accessibility with Hex Colors

Frequently Asked Questions

How do hex codes represent colors?

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

How do I find the hex code for a specific color?

Are there any standard or "safe" hex colors for web design?

Related Color Tools

Color Chart

HEX to RGB Converter

Image Color Extractor

Start Using Hex Codes in Your Projects