<hex-color>

Cú pháp

#RGB        // Cú pháp ba giá trị
#RGBA       // Cú pháp bốn giá trị
#RRGGBB     // Cú pháp sáu giá trị
#RRGGBBAA   // Cú pháp tám giá trị

Giá trị

R hoặc RR

Thành phần đỏ của màu, là một số thập lục phân không phân biệt chữ hoa chữ thường từ 0 đến ff (255). Nếu chỉ có một chữ số, nó được nhân đôi: 1 nghĩa là 11.

G hoặc GG

Thành phần xanh lá của màu, là một số thập lục phân không phân biệt chữ hoa chữ thường từ 0 đến ff (255). Nếu chỉ có một chữ số, nó được nhân đôi: c nghĩa là cc.

B hoặc BB

Thành phần xanh dương của màu, là một số thập lục phân không phân biệt chữ hoa chữ thường từ 0 đến ff (255). Nếu chỉ có một chữ số, nó được nhân đôi: 9 nghĩa là 99.

A hoặc AA Optional

Thành phần alpha của màu, biểu thị độ trong suốt của nó, là một số thập lục phân không phân biệt chữ hoa chữ thường từ 0 đến ff (255). Nếu chỉ có một chữ số, nó được nhân đôi: e nghĩa là ee. 0 hoặc 00 đại diện cho màu hoàn toàn trong suốt, và f hoặc ff đại diện cho màu hoàn toàn không trong suốt.

Ví dụ

Màu hồng đậm thập lục phân

Ví dụ này bao gồm bốn ô vuông màu hồng đậm, với nền hoàn toàn không trong suốt hoặc bán trong suốt được tạo bằng cách sử dụng bốn cú pháp hex-color có độ dài khác nhau, không phân biệt chữ hoa chữ thường.

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

Các màu nền hồng đậm được tạo bằng cách sử dụng ký hiệu hex ba, bốn, sáu và tám giá trị, sử dụng cả chữ hoa và chữ thường.

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;
}

Kết quả

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• Kiểu dữ liệu <color>
• Kiểu dữ liệu <named-color>
• Hàm màu rgb()
• Module màu CSS