Khuyến nghị khóa học:

Hàm color() của CSS

Định nghĩa và cách sử dụng của CSS color() Hàm cho phép chỉ định màu trong không gian màu cụ thể.

Mô hình

Ví dụ 1

Định nghĩa màu nền trong không gian màu display-p3 (màu trong suốt 0.3):

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(display-p3 0.6 0.6 0 / .3);
}

Thử ngay

Ví dụ 2

Sử dụng ngôn ngữ giá trị tương đối:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(from blue srgb r g b / 0.4);
}

Thử ngay

Ngôn ngữ CSS

Ngôn ngữ giá trị tuyệt đối

color(colorspace c1 c2 c3 / A)
Giá trị Mô tả
colorspace

Bắt buộc. Định nghĩa một trong các không gian màu đã định trước:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

Bắt buộc. Biểu thị giá trị phần tử của không gian màu.

Mỗi giá trị có thể được viết dưới dạng số (giữa 0 và 1), phần trăm (giữa 0% và 100%) hoặc từ khóa none.
/ A

Tùy chọn. Biểu thị giá trị kênh trong suốt của màu (0 biểu thị hoàn toàn trong suốt, 100 biểu thị hoàn toàn không trong suốt).

Cũng có thể sử dụng none (để biểu thị không có kênh trong suốt).

Giá trị mặc định là 100.

Ngôn ngữ giá trị tương đối

color(from color colorspace c1 c2 c3 / A)
Giá trị Mô tả
from color

Bắt đầu bằng từ khóa from, sau đó là giá trị màu biểu thị màu gốc.

Đây là màu gốc mà màu tương đối dựa trên.
colorspace

Bắt buộc. Định nghĩa một trong các không gian màu đã định trước:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

Bắt buộc. Biểu thị giá trị phần tử của không gian màu.

Mỗi giá trị có thể được viết dưới dạng số (giữa 0 và 1), phần trăm (giữa 0% và 100%) hoặc từ khóa none.
/ A

Tùy chọn. Biểu thị giá trị kênh trong suốt của màu (0 biểu thị hoàn toàn trong suốt, 100 biểu thị hoàn toàn không trong suốt).

Cũng có thể sử dụng none (để biểu thị không có kênh trong suốt).

Giá trị mặc định là 100.

Chi tiết kỹ thuật

Phiên bản: Mô đun CSS Color Level 5

Hỗ trợ trình duyệt

Số liệu trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ hàm này.

Chrome Edge Firefox Safari Opera
111 111 113 15 97

Trang liên quan

Tham khảo:Màu CSS