A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color below:

<hex-color> - CSS | MDN

Syntax
#RGB        // The three-value syntax
#RGBA       // The four-value syntax
#RRGGBB     // The six-value syntax
#RRGGBBAA   // The eight-value syntax
Value
R or RR

The red component of the color, as a case-insensitive hexadecimal number between 0 and ff (255). If there is only one number, it is duplicated: 1 means 11.

G or GG

The green component of the color, as a case-insensitive hexadecimal number between 0 and ff (255). If there is only one number, it is duplicated: c means cc.

B or BB

The blue component of the color, as a case-insensitive hexadecimal number between 0 and ff (255). If there is only one number, it is duplicated: 9 means 99.

A or AA Optional

The alpha component of the color, indicating its transparency, as a case-insensitive hexadecimal number between 0 and ff (255). If there is only one number, it is duplicated: e means ee. 0, or 00, represents a fully transparent color, and f, or ff, a fully opaque one.

Note: The syntax is case-insensitive: #00ff00 is the same as #00FF00.

Examples Hexadecimal hot pink

This example includes four hot pink squares, with fully opaque or semi-transparent backgrounds created using four different-length case-insensitive hex-color syntaxes.

HTML
<div>
  #F09
  <div class="c1"></div>
</div>
<div>
  #f09a
  <div class="c2"></div>
</div>
<div>
  #ff0099
  <div class="c3"></div>
</div>
<div>
  #FF0099AA
  <div class="c4"></div>
</div>
CSS

The hot pink background colors are created using the three-, four-, six-, and eight-value hex notations, using both uppercase and lowercase letters.

body {
  display: flex;
  justify-content: space-evenly;
  font-family: monospace;
}
div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
[class] {
  width: 40px;
  height: 40px;
}
.c1 {
  background: #f09;
}
.c2 {
  background: #f09a;
}
.c3 {
  background: #ff0099;
}
.c4 {
  background: #ff0099aa;
}
Result Specifications Browser compatibility

Loading…

See also

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.5