Gam màu là gì: sRGB, Display P3 và màu nằm ngoài gam

Gam màu là gì

Mọi màn hình đều pha trộn ánh sáng đỏ, xanh lá và xanh dương. Màu đỏ, xanh lá và xanh dương thuần nhất mà màn hình tạo ra được là ba đỉnh của một tam giác, và mọi màu nằm trong tam giác đó thuộc gam màu của nó. Những màu nằm ngoài thì màn hình đó đơn giản là không thể hiển thị.

sRGB, Display P3 và Rec. 2020

sRGB là chuẩn mặc định của web và của phần lớn màn hình bán ra trước năm 2016. HEX, rgb() và hsl() đều mô tả màu sRGB.

Display P3 bao phủ nhiều hơn sRGB khoảng một phần tư số màu, chủ yếu là xanh lá, đỏ và cam rực. iPhone, iPad, Mac cùng nhiều điện thoại Android và laptop cao cấp dùng chuẩn này. Trong CSS, màu P3 được viết là color(display-p3 r g b) hoặc là một giá trị OKLCH có độ rực cao.

Rec. 2020 còn rộng hơn nữa và được dùng cho video HDR. Rất ít màn hình bao phủ trọn vẹn gam này.

Chuyện gì xảy ra với màu nằm ngoài gam

Nếu một màu CSS nằm ngoài gam của màn hình, trình duyệt buộc phải hiển thị một màu khác. Cách cắt đơn giản (clipping) đưa từng kênh về giới hạn và có thể làm đổi sắc màu. CSS Color 4 khuyến nghị ánh xạ gam màu trong OKLCH: giữ độ sáng và sắc màu, giảm độ rực cho đến khi màu nằm vừa trong gam.

PickShade đánh dấu mọi màu nằm ngoài sRGB và hiển thị màu thay thế sau khi ánh xạ, để bạn biết chính xác người dùng màn hình cũ sẽ thấy gì.

Dùng màu P3 an toàn trong CSS

Viết giá trị sRGB dự phòng trước và giá trị gam rộng sau, hoặc đặt giá trị màu rực trong media query color-gamut.

.button {
    background: #ff5733;
    background: oklch(68% 0.24 33.7);
}

@media (color-gamut: p3) {
    .hero {
        color: color(display-p3 1 0.3 0.15);
    }
}

Hỏi đáp