P3 Đỏ rực
Màu đỏ siêu bão hòa
P3 Táo Xanh
Màu xanh lá cây siêu bão hòa
P3 Màu cam điện ảnh
Màu cam chuẩn điện ảnh
P3 Hồng Neon
Màu hồng siêu bão hòa
P3 Ngọc lục lam
Màu lục lam siêu bão hòa
P3 Tím
Màu tím siêu bão hòa
/* sRGB fallback */
color: #ff4500;
/* P3 enhanced */
color: color(display-p3 1 0.3 0);
/* Media query detect */
@media (color-gamut: p3) {
.brand { color: color(display-p3 ...); }
}
P3 các bản vá sống động hơn → Hỗ trợ True P3
P3 bị cắt bớt → chỉ gam màu sRGB
Kiểm tra màu sắc DCI-P3 chuyên nghiệp
Xác minh chính xác xem màn hình của bạn có thực sự hỗ trợ gam màu rộng P3 thông qua các mẫu màu P3-exclusive, hiển thị ranh giới sRGB và kiểm tra độ bão hòa trên mỗi kênh hay không.
P3-Exclusive Mẫu màu
Hiển thị các màu mà chỉ màn hình P3 mới có thể hiển thị chính xác: màu đỏ cực bão hòa, màu xanh lá cây Apple, màu cam ở cấp độ rạp chiếu phim. Trên màn hình sRGB, các màu này bị cắt bớt về giá trị sRGB gần nhất, làm mất độ sống động của chúng.
sRGB Trực quan hóa ranh giới
Các thanh chuyển màu chuyển từ ranh giới gam màu sRGB sang các điểm cực trị của gam màu P3. Trên màn hình P3, độ dốc tiếp tục vượt qua ranh giới sRGB; trên màn hình sRGB, độ dốc dừng ở ranh giới (màu sắc không còn thay đổi).
CSS P3 Xác minh màu sắc
Tất cả các mẫu màu được hiển thị bằng cú pháp CSS color(display-p3 ...) — hỗ trợ màu gốc P3 của trình duyệt. Kết hợp với truy vấn @media (gam màu: p3), các nhà phát triển giao diện người dùng có thể cung cấp màu sắc giao diện sống động hơn cho người dùng có nhiều gam màu.
DCI-P3 là gì?
Tìm hiểu nguồn gốc và ứng dụng của tiêu chuẩn gam màu P3.
Tiêu chuẩn ngành điện ảnh
DCI-P3 được thành lập tại 2005 bởi Digital Cinema Initiatives, ban đầu dành cho chiếu phim kỹ thuật số. Nó bao phủ khoảng 45% màu sắc mà con người có thể nhìn thấy, lớn hơn khoảng 25% so với 35 của sRGB%.
Hệ sinh thái Apple được ưu tiên
Apple đã sử dụng P3 hoàn toàn bắt đầu từ 2015: iMac 5K, iPhone 7+, iPad Pro, MacBook Pro và Pro Display XDR đều hỗ trợ P3. Chức năng quản lý màu macOS xử lý nội dung P3 một cách hoàn hảo, biến nó thành hệ sinh thái P3 trưởng thành nhất.
HDR Tiêu chuẩn nội dung
Các định dạng HDR như HDR10 và Dolby Vision sử dụng P3 làm vùng chứa màu của chúng. Netflix, Disney+ và Apple TV+ làm chủ nội dung HDR trong gam P3. Màn hình không có P3 không thể hiển thị đầy đủ màu HDR.
Cách xác định P3
Ba bước để xác minh khả năng màu P3 của màn hình của bạn.
Xem kết quả phát hiện
Trang tự động phát hiện truy vấn phương tiện gam màu của trình duyệt khi tải. Nếu nó hiển thị "P3 Supported", sự kết hợp giữa màn hình + OS + trình duyệt của bạn có thể hiển thị màu P3.
So sánh các mẫu độc quyền
Quan sát vùng mẫu P3-exclusive. Nếu các mẫu màu này trông sống động hơn đáng kể so với các điều khiển sRGB liền kề (đặc biệt là màu đỏ và xanh lục), thì màn hình của bạn thực sự đang hiển thị các màu mở rộng P3 thay vì cắt thành sRGB.
Kiểm tra phần mở rộng chuyển màu
Tìm điểm đánh dấu ranh giới sRGB trong thanh chuyển màu. Trên màn hình P3, dải màu tiếp tục trở nên sống động hơn qua điểm đánh dấu; trên màn hình sRGB, màu sắc sẽ ngừng thay đổi sau điểm đánh dấu — đó là giới hạn vật lý của gam màu sRGB.
P3 Thuật ngữ khóa màu
color(display-p3)
CSS Chức năng màu cấp độ 4 cho phép chỉ định màu P3 trực tiếp trong các trang web. Cú pháp: color(display-p3 r g b) với các giá trị RGB nằm trong khoảng 0-1. Safari là người đầu tiên hỗ trợ; Chrome 111+ và Firefox 113+ hiện cũng hỗ trợ tính năng này.
Truy vấn phương tiện gam màu
@media (color-gamut: p3) detects whether the user's device supports P3. Use in CSS or JavaScript's window.matchMedia to implement graceful degradation or progressive enhancement for different gamut devices.
Cắt
Khi các màu P3 được hiển thị trên màn hình sRGB, các giá trị vượt quá phạm vi sRGB sẽ bị cắt bớt về giá trị biên sRGB gần nhất. Điều này gây ra mất độ bão hòa - màu cam P3 sống động trở thành màu cam sRGB bình thường.
Gam màu rộng
Nói rộng ra là khả năng gam màu vượt quá sRGB. DCI-P3 là tiêu chuẩn gam màu rộng phổ biến nhất, tiếp theo là Adobe RGB. Display P3 là biến thể hiển thị của DCI-P3 của Apple, sử dụng điểm trắng D65.
Thiết bị nào hỗ trợ P3
Hỗ trợ gam màu P3 trên các thiết bị phổ thông.
Thiết bị Apple
P3 Hỗ trợ:
• iPad Pro (tất cả): 100% P3.
• MacBook Pro 2016+: 100% P3.
• Màn hình Pro XDR / Màn hình Studio: 100% P3.
Windows Màn hình
P3 Hỗ trợ:
• Màn hình chơi game (cao cấp): 90-95% P3.
• Màn hình văn phòng tiêu chuẩn: thường chỉ có sRGB.
• Lưu ý: Quản lý màu Windows yêu cầu hỗ trợ cấu hình ICC.
Thiết bị Android
P3 Hỗ trợ:
• Hỗ trợ gam màu Google Pixel 6+: P3.
• Thiết bị tầm trung: thường chỉ sRGB hoặc thấp hơn một chút.
• Tính năng quản lý màu của Android được cải thiện bắt đầu từ Android 10.
Hỗ trợ trình duyệt
Hiển thị màu:
• Chrome 111+: CSS P3 hỗ trợ chức năng màu.
• Firefox 113+: CSS P3 hỗ trợ chức năng màu.
• Edge: đi theo Chrome, được đồng bộ hóa với hỗ trợ Chrome.
Giao diện người dùng P3 Thực hành màu sắc
CSS P3 Màu sắc
Sử dụng màu(display-p3 1 0.2 0.1) cho màu thương hiệu cực kỳ bão hòa. Kết hợp với @supports và giá trị dự phòng để có khả năng tương thích ngược.
Phát hiện truy vấn phương tiện
@media (color-gamut: p3) { } provides enhanced colors for P3 devices. In JS: matchMedia("(color-gamut: p3)") for dynamic detection.
Nội dung hình ảnh
Cung cấp hình ảnh có cấu hình màu Display P3 cho các thiết bị P3. Sử dụng <picture> + truy vấn phương tiện để tải các hình ảnh có gam màu khác nhau theo khả năng của thiết bị.
Sự xuống cấp duyên dáng
Luôn cung cấp dự phòng sRGB trước các giá trị P3. CSS: màu: #ff4500; màu sắc: màu sắc(hiển thị-p3 1 0.3 0); - dòng thứ hai ghi đè dòng đầu tiên.
Câu hỏi thường gặp
Q.Trình duyệt báo cáo "P3 được hỗ trợ" nhưng màn hình của tôi là sRGB?
macOS chuyển đổi màu P3 thành hiển thị sRGB, do đó trình duyệt vẫn báo cáo hỗ trợ P3 cấp hệ thống. Nhưng về mặt vật lý, màn hình không thể hiển thị màu P3-extended - các giá trị vượt quá sẽ bị cắt bớt. So sánh mẫu màu của trang này giúp xác minh khả năng hiển thị thực tế.
Q.Màu sắc của P3 có ảnh hưởng đến tốc độ tải trang không?
No. color(display-p3) là thuộc tính CSS gốc không yêu cầu thêm tài nguyên hoặc thư viện JS. Tác động hiệu suất duy nhất có thể đến từ các hình ảnh có cấu hình màu P3 được nhúng, thường lớn hơn một chút so với phiên bản sRGB.
Q.Ảnh chụp màn hình iPhone có giữ nguyên màu P3 không?
Có. Ảnh chụp màn hình và ảnh chụp màn hình iPhone mặc định có không gian màu Display P3. Khi được gửi tới thiết bị sRGB, màu sắc sẽ được chuyển đổi. Xem những ảnh chụp màn hình này trên thiết bị P3-capable sẽ hiển thị màu sắc rực rỡ hơn.
Q.Tại sao lại cung cấp cả giá trị P3 và sRGB?
Phần lớn màn hình trên toàn thế giới vẫn là sRGB. Chỉ sử dụng giá trị P3 có nghĩa là các trình duyệt không được hỗ trợ sẽ bỏ qua chúng hoặc hiển thị màu không chính xác. Tính năng xếp tầng CSS cho phép bạn viết bản dự phòng sRGB trước, sau đó là tính năng nâng cao P3 — trình duyệt tự động chọn phiên bản được hỗ trợ.
Q."95% DCI-P3" của màn hình của tôi có đủ tốt không?
Có. Độ bao phủ 95%+ DCI-P3 có thể hiển thị phần lớn màu P3-extended. Sự khác biệt chỉ xuất hiện ở các vùng viền xanh đỏ cực kỳ bão hòa. Độ bao phủ của 100% mang tính chất tiếp thị nhiều hơn — trong sử dụng thực tế, 95% và 100% gần như không thể phân biệt được.
Q.Sự khác biệt giữa Display P3 và DCI-P3 là gì?
Display P3 là biến thể của Apple sử dụng điểm trắng D65 (giống như sRGB), phù hợp cho màn hình. DCI-P3 sử dụng điểm trắng hơi xanh làm tiêu chuẩn chiếu phim. Cả hai đều có phạm vi gam màu gần như giống hệt nhau - chỉ có điểm trắng là khác nhau.
P3 Mẹo phát triển màu sắc
- • CSS Cú pháp: color: color(display-p3 1 0.3 0); — note RGB values range 0-1, not 0-255.
- • Khả năng tương thích ngược: Luôn viết dự phòng sRGB trên dòng trước giá trị P3 của bạn. Trình duyệt tự động chọn quy tắc được hỗ trợ.
- • Công cụ gỡ lỗi: Chrome Bộ chọn màu DevTools đã hỗ trợ xem trước và chuyển đổi gam màu P3.
- • Tư vấn thiết kế: Chỉ sử dụng tính năng nâng cao P3 cho màu sắc thương hiệu, nút CTA và hình ảnh chính — không phải cho mọi màu đơn lẻ.