1. Home
  3. Docs
  5. CSS
  7. CSS Color Values
  9. CSS Hex Color

CSS Hex Color

CSS hex color is a way to represent colors using a 6-digit hexadecimal value. In this section, we'll introduce the basics of CSS Hex Colors. We'll explain the hexadecimal numbering system and the structure of the #RRGGBB notation.

In CSS, hexadecimal(hex) color values are widely used to specify colors in web development. Hexadecimal color values are represented using a six-digit combination of numbers and letters, preceded by a hash symbol (#). Each pair of digits represents the intensity of the red, green, and blue (RGB) components of the color. Each component can range from 00 (minimum intensity) to FF (maximum intensity), resulting in 16,777,216 possible colors.

The syntax for CSS hex color notation is as follows:

#RRGGBB
  • The # symbol indicates the beginning of the hex color notation.
  • RR represents the two-digit hexadecimal value for the red color channel.
  • GG represents the two-digit hexadecimal value for the green color channel.
  • BB represents the two-digit hexadecimal value for the blue color channel.

Each pair of digits in the hex value can range from 00 to FF, equivalent to decimal values from 0 to 255. For example, the hex color #FF0000 represents full-intensity red (FF), with zero intensity for green (00) and blue (00), resulting in the color red. By combining different values for the red, green, and blue channels, a vast range of colors can be achieved.

Here are a few examples of CSS hex color values:

  • Red: #FF0000
  • Green: #00FF00
  • Blue: #0000FF
  • Black: #000000
  • White: #FFFFFF
  • Yellow: #FFFF00
  • Cyan: #00FFFF
  • Magenta: #FF00FF

Hex colors are widely supported by web browsers and can be used across various CSS properties. You can set the text colors, backgrounds, borders, gradients, and more. For example:

h1 {
  color: #FF0000; /* Sets text color to red */
}

div {
  background-color: #00FF00; /* Sets background color to green */
}

button {
  border: 1px solid #0000FF; /* Sets border color to blue */
}

.header {
  background-image: linear-gradient(#FF0000, #0000FF); /* Applies a gradient from red to blue */
}

In addition to the 6-digit code, there are also 3-digit hex codes that can be used to represent colors in CSS.

3 Digit Hex Color

CSS 3-digit hex colors are a shorthand notation for representing colors using a three-digit hexadecimal format. Each digit represents a single channel for the red, green, and blue (RGB) color components. The syntax for a 3-digit HEX value is as follows:

#RGB
  • The # symbol indicates the beginning of the HEX notation.
  • R represents the hexadecimal value for the red color channel, ranging from 0 to F.
  • G represents the hexadecimal value for the green color channel, ranging from 0 to F.
  • B represents the hexadecimal value for the blue color channel, ranging from 0 to F.

The three-digit hex color notation is a shorthand form of the six-digit hex notation, where each digit is duplicated to represent the intensity of the respective color channel. For example, #F00 is equivalent to #FF0000, #0F0 is equivalent to #00FF00, and #00F is equivalent to #0000FF.

Here are some examples of CSS hex colors using both notations:

h1 {
  color: #FFA500; /* Orange using 6-digit notation */
  color: #FA0; /* Orange using 3-digit notation */
}

div {
  background-color: #008000; /* Green using 6-digit notation */
  background-color: #080; /* Green using 3-digit notation */
}

p {
  color: #000080; /* Navy using 6-digit notation */
  color: #00F; /* Navy using 3-digit notation */
}

It's important to note that CSS 3-digit hex colors have a limitation: they only support colors where the intensity for each color channel is the same. If you need to specify colors with varying channel intensities, you will still need to use the 6-digit hex notation or other color notations like RGB or RGBA.

The 6-digit notation is more versatile and can represent any color using a wide range of values for each color channel. The 6-digit hex color notation is recommended to use. It offers greater flexibility and accuracy. The 3-digit notation is a shorthand that can be useful in certain situations where the intensity of each color channel is the same, but it has limited applicability compared to the 6-digit notation. Remember that hex colors are case-insensitive, so #FF0000 is the same as #ff0000 or #Ff0000.

Advantages of CSS Hex Color

  • Cross-Browser Consistency: CSS Hex Colors ensure that your website's colors appear consistently across different web browsers. Hex Colors provide a standardized representation, unlike color names that may render differently.
  • Extensive Color Range: CSS Hex Colors allow web developers to access a vast range of 16,777,216 unique colors. This extensive palette empowers designers to create visually stunning websites that align perfectly with the brand identity.
  • Reduced File Sizes: CSS Hex Colors use a concise six-character representation, reducing the size of your CSS files compared to other color formats like RGB or HSL, thus improving website loading times.
  • Compatibility with Graphics Editors: CSS Hex Colors are widely compatible with graphics editors, allowing designers to easily transfer color choices between design tools and the CSS codebase seamlessly.

Overall, hexadecimal colors offer a straightforward, compact, and flexible way to define colors for web development. They have become a standard in the industry due to their compatibility, ease of use, and wide adoption in web technologies.