Trang này được dịch bởi Cloud Translation API.

Các hàm và hệ màu của CSS mới trong tất cả các công cụ chính

Tất cả công cụ chính hiện đã hỗ trợ không gian màu và hàm CSS mới. Tìm hiểu cách chúng có thể mang lại sự sống động cho thiết kế của bạn.

Rachel Andrew

CSS hiện hỗ trợ hệ màu cho phép chúng ta truy cập vào các màu bên ngoài gamut sRGB. Điều này có nghĩa là bạn có thể hỗ trợ màn hình HD (độ phân giải cao), sử dụng các màu trong gam màu HD. Tính năng hỗ trợ này đi kèm với các hàm mới để giúp bạn sử dụng màu sắc trên web hiệu quả hơn.

Truy cập vào hệ màu không gian của CSS

Chúng ta đã có một số hàm cho phép truy cập vào các màu trong gam màu sRGB – rgb(), hsl() và hwb(). Hiện được hỗ trợ trong các trình duyệt là hàm color(). Đây là một cách chuẩn hoá để truy cập vào các màu trong không gian màu RGB bất kỳ. Bao gồm cả sRGB, Display P3 và Rec2020. Bạn có thể xem một số ví dụ trong CSS sau:

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

Hỗ trợ trình duyệt

Nguồn

Ngoài ra, một số hàm cho phép truy cập vào hệ màu (ngoài sRGB) bằng lch(), lab(), oklch() và oklab().

Hỗ trợ trình duyệt

Nguồn

Bạn có thể tìm hiểu về tất cả các hệ màu này trong Hướng dẫn về màu sắc có độ phân giải cao của CSS.

Hàm `color-mix()`

Cũng như các hệ màu mới này, tất cả công cụ hiện đều hỗ trợ hàm color-mix(). Hàm này cho phép kết hợp một màu với một màu khác, trong bất kỳ hệ màu nào. Trong CSS sau đây, 25% màu xanh lam được trộn thành màu trắng, trong không gian màu srgb.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

Hỗ trợ trình duyệt

Nguồn

Tìm hiểu thêm về color-mix()

Các chức năng và hệ màu mới này hứa hẹn mang lại màu sắc HD rực rỡ cho thế giới web. Để có nguồn cảm hứng, hãy bắt đầu bằng cách tạo một số dải chuyển màu đẹp mắt sử dụng trình tạo chuyển màu HD tại gradient.style.

Các hàm và hệ màu của CSS mới trong tất cả các công cụ chính

Truy cập vào hệ màu không gian của CSS

Hàm color-mix()

Hàm `color-mix()`