<named-color>

Cú pháp

color: red;
color: orange;
color: tan;
color: rebeccapurple;
color: transparent;

Giá trị

Màu sắc được đặt tên bao gồm các màu tiêu chuẩn, từ khóa transparent và currentColor.

Màu sắc tiêu chuẩn

Các màu cơ bản có tên tiêu chuẩn, dễ nhớ:

Ngoài 16 màu này, khoảng 150 màu khác có từ khóa tương ứng:

Ban đầu, trong CSS Level 1, chỉ có 16 màu cơ bản được định nghĩa, với orange được thêm vào trong CSS Level 2. Các nhà thiết kế web thấy danh sách này quá ngắn, và các nhà cung cấp trình duyệt đã thêm nhiều tên màu sắc dựa trên tên màu X11. Trong SVG 1, rồi trong CSS Colors Level 3, các tên này được chuẩn hóa, định nghĩa chính thức và thống nhất (một số có cách đánh vần khác nhau hiện là các bí danh). Chúng được gọi là từ khóa màu mở rộng, màu X11, hoặc màu SVG.

Trong CSS Colors Level 4, một màu bổ sung, rebeccapurple được thêm vào để vinh danh tiên phong web Eric Meyer.

transparent

Từ khóa transparent biểu thị một màu hoàn toàn trong suốt. Điều này làm cho nền phía sau mục có màu hoàn toàn hiển thị. Về mặt kỹ thuật, transparent là lối tắt cho rgb(0 0 0 / 0%).

Để tránh hành vi không mong muốn, chẳng hạn như trong <gradient>, thông số CSS hiện tại quy định rằng transparent phải được tính trong không gian màu alpha-premultiplied. Tuy nhiên, lưu ý rằng các trình duyệt cũ hơn có thể xử lý nó như màu đen với giá trị alpha là 0.

Từ khóa transparent không phải là màu thực trong CSS Level 2 (Revision 1). Đây là từ khóa đặc biệt có thể được dùng thay cho giá trị <color> thông thường trên hai thuộc tính CSS: background và border. Về cơ bản nó được thêm vào để cho phép các nhà phát triển ghi đè một màu đặc (solid) được kế thừa. Với sự ra đời của các kênh alpha trong CSS Colors Level 3, transparent đã được định nghĩa lại là màu thực. Nó có thể được dùng ở bất kỳ đâu mà giá trị <color> có thể được dùng.

Mô tả

Tất cả tên đều chỉ định một màu trong không gian màu sRGB. Mặc dù các tên mô tả ít nhiều màu sắc tương ứng của chúng, nhưng về cơ bản chúng là nhân tạo, không có lý do chặt chẽ đằng sau các thuật ngữ được dùng.

Tất cả các từ khóa màu đều biểu thị các màu đơn giản, đặc mà không có độ trong suốt.

Một số từ khóa là bí danh của nhau:

• aqua / cyan
• fuchsia / magenta
• darkgray / darkgrey
• darkslategray / darkslategrey
• dimgray / dimgrey
• lightgray / lightgrey
• lightslategray / lightslategrey
• gray / grey
• slategray / slategrey

Mặc dù nhiều từ khóa được điều chỉnh từ X11, giá trị RGB của chúng có thể khác với màu tương ứng trên hệ thống X11 vì các nhà sản xuất đôi khi điều chỉnh màu X11 cho phần cứng cụ thể của họ.

Ví dụ

Sử dụng màu sắc được đặt tên

HTML

<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>

CSS

#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}

Kết quả

Thông số kỹ thuật

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

Xem thêm

• <color>: kiểu dữ liệu mà <named-color> là một thành phần.