CSS colors

Mô-đun CSS colors định nghĩa màu sắc, các kiểu màu, pha trộn màu, độ trong suốt, và cách bạn có thể áp dụng những màu sắc và hiệu ứng này cho nội dung HTML.

Mặc dù mô-đun này chỉ có hai thuộc tính CSS là color và opacity, nhưng hơn 20 thuộc tính CSS và SVG, các CSS image, at-rule và @media rule đều phụ thuộc vào hai thuộc tính này.

Màu sắc trong thực tế

Bộ chuyển đổi cú pháp màu bên dưới hiển thị các giá trị của màu đang được chọn theo định dạng red-green-blue (RGB), thập lục phân (HEX), hue, saturation và lightness (HSL), và hue, whiteness và blackness (HWB). Tất cả các giá trị màu RGB, HEX, HSL và HWB ở đây, dù được viết khác nhau, đều đại diện cho cùng một giá trị màu.

Chọn màu qua color picker và điều chỉnh độ trong suốt qua slider sẽ cập nhật các giá trị RGB, HEX, HSL và HWB. Khi bạn chọn màu hoặc giá trị độ trong suốt mới, màu của nền và thanh trượt sẽ được cập nhật thông qua các thuộc tính CSS background-color và accent-color.

Để xem mã nguồn của bộ chuyển đổi cú pháp màu này, xem nguồn trên GitHub.

Tham chiếu

Thuộc tính

At-rule và descriptor

Mô-đun CSS colors cũng giới thiệu at-rule @color-profile, cùng với các descriptor components, rendering-intent và src. Hiện tại, chưa có trình duyệt nào hỗ trợ các tính năng này.

Hàm

Hàm màu:
- rgb()
- hsl()
- hwb()
- lab()
- lch()
- oklab()
- oklch()
- color()
color-mix()
contrast-color()
light-dark()

Mô-đun CSS colors cũng giới thiệu hàm device-cmyk(). Hiện tại, chưa có trình duyệt nào hỗ trợ tính năng này.

Áp dụng màu sắc cho các phần tử HTML bằng CSS: Hướng dẫn sử dụng CSS để áp dụng màu sắc cho nhiều loại nội dung khác nhau, bao gồm tất cả các thuộc tính CSS chấp nhận <color> làm giá trị.
Giá trị màu CSS: Tổng quan về các color space và các ký hiệu hàm <color> khác nhau có sẵn trong CSS.
Sử dụng màu sắc một cách khôn ngoan: Lý thuyết màu sắc và các tài nguyên, bao gồm tìm màu phù hợp để tạo bảng màu có thể truy cập, độ tương phản và in màu.
Sử dụng relative colors: Bài viết này giải thích cú pháp relative color trong CSS, trình bày các tùy chọn và đưa ra một số ví dụ minh họa.
Hiểu về màu sắc và luminance: Nhận thức về màu sắc và sử dụng màu sắc với người dùng mù màu, người dùng thị lực kém và người dùng có rối loạn tiền đình hoặc rối loạn thần kinh khác.
WCAG 1.4.1: Độ tương phản màu sắc: Giải thích yêu cầu về độ tương phản giữa nội dung nền và tiền cảnh để đảm bảo khả năng đọc.
Tuần tự hóa giá trị CSS: Cách CSSOM API tuần tự hóa màu sắc và các giá trị khác thành biểu diễn chuỗi chuẩn hóa.