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 đều hỗ trợ hàm và hệ màu CSS mới. Tìm hiểu cách chúng có thể mang lại sự rực rỡ 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 sắc từ gam màu HD. Sự hỗ trợ này đi kèm với các chức năng mới giúp sử dụng màu sắc tốt hơn trên web.

Truy cập hệ màu từ CSS

Chúng ta đã có một số hàm cho phép sử dụng các màu trong gam màu sRGB – rgb(), hsl() và hwb(). Hàm color() hiện được hỗ trợ trong các trình duyệt. Đây là một cách chuẩn hoá để truy cập vào các màu trong bất kỳ hệ màu RGB nào. Trong đó 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);
}

Ngoài ra, một số chức năng cũng được hỗ trợ để cho phép truy cập vào hệ màu ngoài sRGB bằng lch(), lab(), oklch() và oklab().

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 CSS có độ phân giải cao.

Hàm color-mix()

Ngoài 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àu này với màu khác, trong bất kỳ hệ màu nào. Trong CSS sau đây, 25% màu xanh dương được trộn vào màu trắng, trong hệ màu srgb.

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

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

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

Một phần của Loạt chương trình tương tác mới