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ác công cụ chính hiện đều hỗ trợ các không gian màu và hàm CSS mới. Hãy tìm hiểu cách các màu này có thể làm sống động thiết kế của bạn.

Rachel Andrew

CSS hiện hỗ trợ các không gian màu cho phép chúng ta truy cập vào các màu nằm ngoài gam màu 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) bằng cách sử dụng màu sắc từ các gam màu HD. Tính năng hỗ trợ này đi kèm với các hàm mới để sử dụng màu sắc hiệu quả hơn trên web.

Truy cập không gian màu từ CSS

Chúng ta đã có một số hàm cho phép truy cập vào màu sắc trong gam màu sRGB – rgb(), hsl() và hwb(). Hiện tại, hàm color() được hỗ trợ trong trình duyệt, đây là cách chuẩn hoá để truy cập vào màu sắc trong bất kỳ không gian màu RGB nào. Bao gồm 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

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Nguồn

Ngoài ra, một số hàm cho phép truy cập vào các không gian màu khác ngoài sRGB bằng cách sử dụng lch(), lab(), oklch() và oklab().

Hỗ trợ trình duyệt

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Nguồn

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

Hàm color-mix()

Ngoài các không gian màu mới này, tất cả các công cụ hiện đều hỗ trợ hàm color-mix(). Hàm này cho phép trộn một màu vào một màu khác, trong bất kỳ không gian màu nào. Trong CSS sau đây, 25% màu xanh dương được trộn vào 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

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 16.2.

Nguồn

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

Các hàm và không gian màu mới này hứa hẹn sẽ mang màu sắc sống động ở độ phân giải cao đến với web. Để có cảm hứng, hãy bắt đầu bằng cách tạo một số hiệu ứng chuyển màu đẹp mắt bằng trình tạo hiệu ứng chuyển màu HD tại gradient.style.