P3 Merah Marak
Merah super tepu
P3 Hijau Epal
Hijau super tepu
P3 Pawagam Jingga
Jingga gred pawagam
P3 Neon Merah Jambu
Merah jambu super tepu
P3 Jade Cyan
Sian super tepu
P3 Violet
Ungu super tepu
/* 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 ...); }
}
tampalan P3 lebih jelas → Sokongan P3 Benar
P3 dipotong → sRGB gamut sahaja
Ujian Warna Profesional DCI-P3.
Sahkan dengan tepat sama ada paparan anda benar-benar menyokong gamut lebar P3 melalui tangkapan warna P3-exclusive, visualisasi sempadan sRGB dan ujian ketepuan setiap saluran.
P3-Exclusive Swatch
Memaparkan warna yang hanya monitor P3 boleh dipaparkan dengan betul: merah ultra-tepu, hijau Apple, oren gred pawagam. Pada paparan sRGB, warna ini digunting ke nilai sRGB yang terdekat, kehilangan keceriaannya.
sRGB Visualisasi Sempadan
Bar kecerunan beralih daripada sempadan gamut sRGB kepada keterlaluan gamut P3. Pada paparan P3, kecerunan terus melepasi sempadan sRGB; pada paparan sRGB, kecerunan berhenti di sempadan (warna tidak lagi berubah).
CSS P3 Pengesahan Warna
Semua swatch diberikan menggunakan sintaks warna CSS (paparan-p3 ...) — sokongan warna asli P3 penyemak imbas. Digabungkan dengan pertanyaan @media (color-gamut: p3), pembangun bahagian hadapan boleh menyampaikan warna antara muka yang lebih bertenaga kepada pengguna dengan gamut lebar.
Apakah itu DCI-P3?
Memahami asal-usul dan aplikasi standard gamut warna P3.
Piawaian Industri Pawagam
DCI-P3 telah ditubuhkan di 2005 oleh Digital Cinema Initiatives, asalnya untuk unjuran pawagam digital. Ia meliputi kira-kira 45% daripada warna yang boleh dilihat oleh manusia, kira-kira 25% lebih besar daripada sRGB 35%.
Ekosistem Apple Diutamakan
Apple menerima P3 sepenuhnya bermula pada 2015: iMac 5K, iPhone 7+, iPad Pro, MacBook Pro dan Pro Display XDR semuanya menyokong P3. Pengurusan warna macOS mengendalikan kandungan P3 dengan sempurna, menjadikannya ekosistem P3 yang paling matang.
HDR Standard Kandungan
Format HDR seperti HDR10 dan Dolby Vision menggunakan P3 sebagai bekas warnanya. Kandungan HDR induk Netflix, Disney+ dan Apple TV+ dalam gamut P3. Paparan tanpa P3 tidak dapat menghasilkan warna HDR sepenuhnya.
Cara Menentukan Sokongan P3.
Tiga langkah untuk mengesahkan keupayaan warna P3 paparan anda.
Lihat Hasil Pengesanan
Halaman secara automatik mengesan pertanyaan media warna-gamut penyemak imbas semasa dimuatkan. Jika ia menunjukkan "P3 Disokong", gabungan paparan + OS + penyemak imbas anda boleh menghasilkan warna P3.
Bandingkan Swatch Eksklusif
Perhatikan kawasan swatch P3-exclusive. Jika swatch ini kelihatan lebih jelas daripada kawalan sRGB bersebelahan (terutamanya merah dan hijau), paparan anda sebenarnya menunjukkan warna lanjutan P3 dan bukannya menggunting ke sRGB.
Semak Sambungan Kecerunan
Cari penanda sempadan sRGB dalam bar kecerunan. Pada paparan P3, kecerunan terus menjadi lebih jelas melepasi penanda; pada paparan sRGB, warna berhenti berubah melepasi penanda — itulah had fizikal gamut sRGB.
P3 Terminologi Kunci Warna
color(display-p3)
CSS Tahap 4 fungsi warna yang membenarkan penetapan warna P3 terus dalam halaman web. Sintaks: warna(paparan-p3 r g b) dengan nilai RGB antara 0-1. Safari pertama kali menyokong; Chrome 111+ dan Firefox 113+ kini turut menyokongnya.
Pertanyaan 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.
Keratan
Apabila warna P3 dipaparkan pada monitor sRGB, nilai yang melebihi julat sRGB akan dipotong kepada nilai sempadan sRGB yang terdekat. Ini menyebabkan kehilangan tepu — oren P3 yang terang menjadi oren sRGB biasa.
Gamut Lebar
Secara umum merujuk kepada keupayaan gamut melebihi sRGB. DCI-P3 ialah standard gamut lebar yang paling biasa, diikuti oleh Adobe RGB. Display P3 ialah varian paparan Apple bagi DCI-P3, menggunakan titik putih D65.
Peranti Mana Yang Menyokong P3
Sokongan gamut P3 merentas peranti arus perdana.
Peranti Apple
P3 Sokongan:
• iPad Pro (semua): 100% P3.
• MacBook Pro 2016+: 100% P3.
• Paparan Pro XDR / Paparan Studio: 100% P3.
Windows Monitor
P3 Sokongan:
• Monitor permainan (kelas tinggi): 90-95% P3.
• Pemantau pejabat standard: biasanya sRGB sahaja.
• Nota: Pengurusan warna Windows memerlukan sokongan profil ICC.
Peranti Android
P3 Sokongan:
• Google Pixel 6+: P3 sokongan gamut.
• Peranti jarak pertengahan: biasanya sRGB sahaja atau di bawah sedikit.
• Pengurusan warna Android dipertingkatkan bermula dengan Android 10.
Sokongan Penyemak Imbas
Paparan Warna:
• Chrome 111+: CSS P3 sokongan fungsi warna.
• Firefox 113+: CSS P3 sokongan fungsi warna.
• Tepi: mengikut Chromium, disegerakkan dengan sokongan Chrome.
Bahagian Hadapan P3 Amalan Warna
CSS P3 Warna
Gunakan warna(paparan-p3 1 0.2 0.1) untuk warna jenama ultra-tepu. Gabungkan dengan @supports dan nilai sandaran untuk keserasian ke belakang.
Pengesanan Pertanyaan Media
@media (color-gamut: p3) { } provides enhanced colors for P3 devices. In JS: matchMedia("(color-gamut: p3)") for dynamic detection.
Aset Imej
Layankan imej berprofil warna Display P3 kepada peranti P3. Gunakan <picture> + pertanyaan media untuk memuatkan imej gamut yang berbeza mengikut keupayaan peranti.
Kemerosotan Anggun
Sentiasa berikan sandaran sRGB sebelum nilai P3. CSS: warna: #ff4500; warna: warna(paparan-p3 1 0.3 0); — baris kedua mengatasi yang pertama.
Soalan Lazim
Q.Penyemak imbas melaporkan "P3 disokong" tetapi skrin saya sRGB?
macOS menukar warna P3 kepada paparan sRGB, jadi penyemak imbas masih melaporkan sokongan P3 peringkat sistem. Tetapi skrin secara fizikal tidak boleh menunjukkan warna P3-extended — nilai lebihan akan dipotong. Perbandingan swatch halaman ini membantu mengesahkan keupayaan paparan sebenar.
Q.Adakah warna P3 mempengaruhi kelajuan pemuatan halaman?
No. color(display-p3) ialah sifat asli CSS yang tidak memerlukan perpustakaan atau sumber JS tambahan. Satu-satunya kesan prestasi mungkin datang daripada imej dengan profil warna P3 terbenam, yang biasanya lebih besar sedikit daripada versi sRGB.
Q.Adakah tangkapan skrin iPhone mengekalkan warna P3?
Ya. Tangkapan skrin dan foto iPhone lalai kepada ruang warna Display P3. Apabila dihantar ke peranti sRGB, warna akan ditukar. Melihat tangkapan skrin ini pada peranti P3-capable menunjukkan warna yang lebih terang.
Q.Mengapa menyediakan kedua-dua nilai P3 dan sRGB?
Sebahagian besar paparan di seluruh dunia masih sRGB. Hanya menggunakan nilai P3 bermakna pelayar yang tidak disokong akan mengabaikannya atau menunjukkan warna yang salah. Lata CSS membolehkan anda menulis sandaran sRGB dahulu, kemudian peningkatan P3 — penyemak imbas secara automatik memilih versi yang disokong.
Q.Adakah paparan saya "95% DCI-P3" cukup baik?
Ya. Liputan 95%+ DCI-P3 boleh menunjukkan sebahagian besar warna P3-extended. Perbezaan muncul hanya di kawasan sempadan merah-hijau yang sangat tepu. Liputan 100% lebih kepada titik pemasaran — dalam penggunaan sebenar, 95% dan 100% hampir tidak dapat dibezakan.
Q.Apakah perbezaan antara Display P3 dan DCI-P3?
Display P3 ialah varian Apple menggunakan titik putih D65 (sama seperti sRGB), sesuai untuk paparan. DCI-P3 menggunakan titik putih sedikit kehijauan sebagai standard unjuran pawagam. Kedua-duanya mempunyai julat gamut yang hampir sama - hanya titik putih yang berbeza.
P3 Petua Pembangunan Warna
- • CSS Sintaks: color: color(display-p3 1 0.3 0); — note RGB values range 0-1, not 0-255.
- • Keserasian Ke Belakang: Sentiasa tulis sandaran sRGB pada baris sebelum nilai P3 anda. Penyemak imbas secara automatik memilih peraturan yang disokong.
- • Alat Nyahpepijat: Chrome Pemilih warna DevTools sudah menyokong pratonton dan penukaran gamut P3.
- • Nasihat Reka Bentuk: Gunakan peningkatan P3 hanya untuk warna jenama, butang CTA dan imej utama — bukan untuk setiap warna tunggal.