P3 Merah menyala
Merah super jenuh
P3 Apel Hijau
Hijau super jenuh
P3 Bioskop Oranye
Oranye sekelas bioskop
P3 Merah Muda Neon
Merah muda super jenuh
P3 Giok Cyan
Cyan super jenuh
P3 Ungu
Ungu super jenuh
/* 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 menambal lebih jelas → Dukungan P3 yang sebenarnya
P3 terpotong → sRGB gamut saja
Tes Warna Profesional DCI-P3.
Verifikasi secara tepat apakah layar Anda benar-benar mendukung gamut lebar P3 melalui contoh warna P3-exclusive, visualisasi batas sRGB, dan pengujian saturasi per saluran.
P3-Exclusive Contoh
Menampilkan warna yang hanya dapat dirender dengan benar oleh monitor P3: merah sangat jenuh, hijau Apple, oranye setingkat bioskop. Pada tampilan sRGB, warna-warna ini terpotong ke nilai sRGB terdekat, sehingga kehilangan kecerahannya.
sRGB Visualisasi Batas
Transisi bilah gradien dari batas gamut sRGB ke batas gamut P3 ekstrem. Pada tampilan P3, gradien terus melewati batas sRGB; pada tampilan sRGB, gradien berhenti di batas (warna tidak lagi berubah).
CSS P3 Verifikasi Warna
Semua contoh dirender menggunakan sintaks CSS color(display-p3 ...) — dukungan warna asli browser P3. Dikombinasikan dengan kueri @media (color-gamut: p3), pengembang frontend dapat memberikan warna antarmuka yang lebih cerah kepada pengguna wide-gamut.
Apa itu DCI-P3?
Memahami asal usul dan penerapan standar gamut warna P3.
Standar Industri Bioskop
DCI-P3 didirikan pada 2005 oleh Digital Cinema Initiatives, awalnya untuk proyeksi sinema digital. Ini mencakup sekitar 45% warna yang terlihat oleh manusia, sekitar 25% lebih besar dari 35% sRGB%.
Ekosistem Apple Lebih Diutamakan
Apple menggunakan P3 sepenuhnya mulai dari 2015: iMac 5K, iPhone 7+, iPad Pro, MacBook Pro, dan Pro Display XDR semuanya mendukung P3. Manajemen warna macOS menangani konten P3 dengan sempurna, menjadikannya ekosistem P3 yang paling matang.
HDR Standar Konten
Format HDR seperti HDR10 dan Dolby Vision menggunakan P3 sebagai wadah warnanya. Netflix, Disney+, dan Apple TV+ menguasai konten HDR dalam keseluruhan P3. Tampilan tanpa P3 tidak dapat merender warna HDR sepenuhnya.
Cara Menentukan Dukungan P3.
Tiga langkah untuk memverifikasi kemampuan warna P3 layar Anda.
Lihat Hasil Deteksi
Laman secara otomatis mendeteksi kueri media gamut warna browser saat dimuat. Jika muncul "P3 Didukung", kombinasi tampilan + OS + browser Anda dapat merender warna P3.
Bandingkan Swatch Eksklusif
Amati area contoh P3-exclusive. Jika contoh ini tampak lebih jelas dibandingkan kontrol sRGB yang berdekatan (terutama merah dan hijau), tampilan Anda sebenarnya menampilkan warna yang diperluas P3 daripada terpotong ke sRGB.
Periksa Ekstensi Gradien
Temukan penanda batas sRGB di bilah gradien. Pada tampilan P3, gradien semakin jelas melewati penanda; pada tampilan sRGB, warna berhenti berubah melewati penanda — itulah batas fisik gamut sRGB.
P3 Terminologi Tombol Warna
color(display-p3)
CSS Fungsi warna Level 4 yang memungkinkan penentuan warna P3 secara langsung di halaman web. Sintaks: warna(tampilan-p3 rg b) dengan nilai RGB berkisar 0-1. Safari yang pertama mendukung; Chrome 111+ dan Firefox 113+ sekarang juga mendukungnya.
Kueri Media Gamut Warna
@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.
Kliping
Ketika warna P3 ditampilkan pada monitor sRGB, nilai yang melebihi rentang sRGB akan terpotong ke nilai batas sRGB terdekat. Hal ini menyebabkan hilangnya saturasi — warna oranye cerah P3 menjadi oranye sRGB biasa.
Gamut Lebar
Secara luas mengacu pada kemampuan gamut yang melebihi sRGB. DCI-P3 adalah standar gamut lebar yang paling umum, diikuti oleh Adobe RGB. Display P3 adalah varian tampilan DCI-P3 Apple, menggunakan titik putih D65.
Perangkat Mana yang Mendukung P3
P3 dukungan gamut di seluruh perangkat mainstream.
Perangkat Apple
P3 Dukungan:
• iPad Pro (semua): 100% P3.
• MacBook Pro 2016+: 100% P3.
• Tampilan Pro XDR / Tampilan Studio: 100% P3.
Windows Monitor
P3 Dukungan:
• Monitor gaming (kelas atas): 90-95% P3.
• Monitor kantor standar: biasanya sRGB saja.
• Catatan: manajemen warna Windows memerlukan dukungan profil ICC.
Perangkat Android
P3 Dukungan:
• Google Pixel 6+: dukungan keseluruhan P3.
• Perangkat kelas menengah: biasanya hanya sRGB atau sedikit di bawahnya.
• Manajemen warna Android ditingkatkan mulai dari Android 10.
Dukungan Peramban
Rendering Warna:
• Chrome 111+: CSS P3 mendukung fungsi warna.
• Firefox 113+: CSS P3 mendukung fungsi warna.
• Edge: mengikuti Chromium, disinkronkan dengan dukungan Chrome.
Frontend P3 Praktik Warna
CSS P3 Warna
Gunakan warna(tampilan-p3 1 0.2 0.1) untuk warna merek yang sangat jenuh. Gabungkan dengan @supports dan nilai cadangan untuk kompatibilitas mundur.
Deteksi Kueri Media
@media (color-gamut: p3) { } provides enhanced colors for P3 devices. In JS: matchMedia("(color-gamut: p3)") for dynamic detection.
Aset Gambar
Sajikan gambar profil warna Display P3 ke perangkat P3. Gunakan <picture> + kueri media untuk memuat gambar gamut yang berbeda berdasarkan kemampuan perangkat.
Degradasi yang Anggun
Selalu berikan fallback sRGB sebelum nilai P3. CSS: warna: #ff4500; warna: warna(tampilan-p3 1 0.3 0); — baris kedua menggantikan baris pertama.
Pertanyaan yang Sering Diajukan
Q.Browser melaporkan "P3 didukung" tetapi layar saya sRGB?
macOS mengonversi warna P3 menjadi tampilan sRGB, sehingga browser masih melaporkan dukungan P3 tingkat sistem. Namun layar secara fisik tidak dapat menampilkan warna P3-extended — nilai berlebih akan terpotong. Perbandingan contoh halaman ini membantu memverifikasi kemampuan tampilan sebenarnya.
Q.Apakah warna P3 mempengaruhi kecepatan memuat halaman?
Tidak. color(display-p3) adalah properti asli CSS yang tidak memerlukan perpustakaan atau sumber daya JS tambahan. Satu-satunya dampak kinerja mungkin berasal dari gambar dengan profil warna P3 yang tertanam, yang biasanya sedikit lebih besar daripada versi sRGB.
Q.Apakah tangkapan layar iPhone mempertahankan warna P3?
Ya. Tangkapan layar dan foto iPhone secara default menggunakan ruang warna Display P3. Saat dikirim ke perangkat sRGB, warna akan dikonversi. Melihat tangkapan layar ini di perangkat P3-capable menunjukkan warna yang lebih cerah.
Q.Mengapa memberikan nilai P3 dan sRGB?
Sebagian besar tampilan di seluruh dunia masih sRGB. Hanya menggunakan nilai P3 berarti browser yang tidak didukung akan mengabaikannya atau menampilkan warna yang salah. Cascading CSS memungkinkan Anda menulis fallback sRGB terlebih dahulu, lalu penyempurnaan P3 — browser secara otomatis memilih versi yang didukung.
Q.Apakah tampilan "95% DCI-P3" saya cukup bagus?
Ya. Cakupan 95%+ DCI-P3 dapat menampilkan sebagian besar warna P3-extended. Perbedaan hanya tampak di wilayah perbatasan merah-hijau yang sangat jenuh. Cakupan 100% lebih merupakan poin pemasaran — dalam penggunaan nyata, 95% dan 100% hampir tidak dapat dibedakan.
Q.Apa perbedaan antara Display P3 dan DCI-P3?
Display P3 adalah varian Apple yang menggunakan titik putih D65 (sama seperti sRGB), cocok untuk tampilan. DCI-P3 menggunakan titik putih agak kehijauan sebagai standar proyeksi bioskop. Keduanya memiliki rentang gamut yang hampir sama — hanya titik putihnya saja yang berbeda.
P3 Tip Pengembangan Warna
- • CSS Sintaks: color: color(display-p3 1 0.3 0); — note RGB values range 0-1, not 0-255.
- • Kompatibilitas Mundur: Selalu tulis fallback sRGB pada baris sebelum nilai P3 Anda. Browser secara otomatis memilih aturan yang didukung.
- • Alat Debug: Chrome Pemilih warna DevTools sudah mendukung pratinjau dan konversi gamut P3.
- • Saran Desain: Gunakan penyempurnaan P3 hanya untuk warna merek, tombol CTA, dan gambar utama — bukan untuk setiap warna.