P3 Blaze Red
Super saturated na pula
P3 Apple Green
Super saturated green
P3 Sinehan Orange
Orange na may grade sa sine
P3 Neon Pink
Super saturated pink
P3 Jade Cyan
Super saturated cyan
P3 Lila
Super saturated purple
/* 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 mga patch na mas matingkad → True P3 na suporta
P3 pinutol → sRGB gamut lang
Propesyonal DCI-P3 Pagsusuri sa Kulay
Tumpak na i-verify kung ang iyong display ay tunay na sumusuporta sa P3 wide gamut sa pamamagitan ng P3-exclusive color swatch, sRGB boundary visualization, at per-channel saturation test.
P3-Exclusive Mga Swatches
Nagpapakita ng mga kulay na tanging P3 monitor lang ang makakapag-render nang tama: ultra-saturated na pula, Apple green, cinema-grade orange. Sa mga display ng sRGB, ang mga kulay na ito ay napuputol sa pinakamalapit na mga halaga ng sRGB, na nawawala ang kanilang sigla.
sRGB Boundary Visualization
Ang mga gradient bar ay lumipat mula sa sRGB gamut boundary patungo sa P3 gamut extremes. Sa mga display ng P3, ang gradient ay nagpapatuloy sa paglampas ng sRGB na hangganan; sa mga display ng sRGB, hihinto ang gradient sa hangganan (hindi na nagbabago ang mga kulay).
CSS P3 Pag-verify ng Kulay
Lahat ng swatch ay na-render gamit ang CSS color(display-p3 ...) syntax — ang native na P3 color support ng browser. Kasama ng mga query sa @media (color-gamut: p3), ang mga frontend developer ay makakapaghatid ng mas makulay na mga kulay ng interface sa mga user na may malawak na gamut.
Ano Ang DCI-P3?
Pag-unawa sa mga pinagmulan at aplikasyon ng P3 color gamut standard.
Pamantayan sa Industriya ng Sinehan
DCI-P3 ay itinatag sa 2005 ng Digital Cinema Initiatives, na orihinal para sa digital cinema projection. Sinasaklaw nito ang humigit-kumulang 45% ng mga kulay na nakikita ng tao, halos 25% na mas malaki kaysa sa sRGB ng 35%.
Apple Ecosystem Preferred
Tinanggap ng Apple ang P3 na ganap na nagsimula sa 2015: iMac 5K, iPhone 7+, iPad Pro, MacBook Pro, at Pro Display XDR lahat ay sumusuporta sa P3. Perpektong pinangangasiwaan ng macOS color management ang P3 content, na ginagawa itong pinaka-mature na P3 ecosystem.
HDR Pamantayang Nilalaman
Ang HDR na mga format tulad ng HDR10 at Dolby Vision ay gumagamit ng P3 bilang kanilang lalagyan ng kulay. Netflix, Disney+, at Apple TV+ master HDR content sa P3 gamut. Ang mga display na walang P3 ay hindi maaaring ganap na mag-render ng mga kulay ng HDR.
Paano Matukoy ang Suporta ng P3.
Tatlong hakbang upang i-verify ang kakayahan ng kulay ng iyong display na P3.
Tingnan ang Mga Resulta ng Detection
Awtomatikong nade-detect ng page ang color-gamut media query ng browser sa pag-load. Kung nagpapakita ito ng "P3 Supported," ang iyong display + OS + browser combination ay maaaring mag-render ng P3 na mga kulay.
Ihambing ang mga Eksklusibong Swatch
Pagmasdan ang P3-exclusive swatch area. Kung ang mga swatch na ito ay kapansin-pansing mas matingkad kaysa sa katabing sRGB na mga kontrol (lalo na ang pula at berde), ang iyong display ay aktwal na nagpapakita ng P3 mga pinahabang kulay kaysa sa pag-clipping sa sRGB.
Suriin ang Gradient Extension
Hanapin ang sRGB boundary marker sa mga gradient bar. Sa mga display ng P3, ang gradient ay patuloy na nagiging mas matingkad lampas sa marker; sa mga display ng sRGB, hihinto ang pagbabago ng mga kulay lampas sa marker — iyon ang pisikal na limitasyon ng gamut na sRGB.
P3 Color Key Terminology
color(display-p3)
CSS Level 4 function ng kulay na nagbibigay-daan sa pagtukoy ng mga kulay ng P3 nang direkta sa mga web page. Syntax: kulay(display-p3 r g b) na may RGB na mga value na sumasaklaw sa 0-1. Safari ang unang sumuporta; Sinusuportahan na rin ito ng Chrome 111+ at Firefox 113+.
Kulay Gamut Media Query
@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.
Pag-clip
Kapag ang mga kulay ng P3 ay ipinakita sa isang sRGB monitor, ang mga halagang lumalampas sa hanay ng sRGB ay mapuputol sa pinakamalapit na mga halaga ng hangganan ng sRGB. Nagdudulot ito ng pagkawala ng saturation — isang matingkad na P3 orange ay nagiging ordinaryong sRGB orange.
Malapad na Gamut
Malawakang tumutukoy sa mga kakayahan ng gamut na lumalampas sa sRGB. DCI-P3 ay ang pinakakaraniwang malawak na pamantayan ng gamut, na sinusundan ng Adobe RGB. Ang Display P3 ay ang display variant ng Apple ng DCI-P3, gamit ang D65 white point.
Aling Mga Device ang Sumusuporta P3
P3 suporta sa gamut sa mga pangunahing device.
Mga Apple Device
P3 Suporta:
• iPad Pro (lahat): 100% P3.
• MacBook Pro 2016+: 100% P3.
• Pro Display XDR / Studio Display: 100% P3.
Windows Mga Monitor
P3 Suporta:
• Gaming monitor (high-end): 90-95% P3.
• Mga karaniwang monitor ng opisina: karaniwang sRGB lang.
• Tandaan: Nangangailangan ang pamamahala ng kulay ng Windows ng suporta sa profile ng ICC.
Mga Android Device
P3 Suporta:
• Google Pixel 6+: P3 suporta sa gamut.
• Mga mid-range na device: karaniwang sRGB lang o mas mababa nang bahagya.
• Pinahusay ang pamamahala ng kulay ng Android simula sa Android 10.
Suporta sa Browser
Pag-render ng Kulay:
• Chrome 111+: CSS P3 suporta sa color function.
• Firefox 113+: CSS P3 suporta sa color function.
• Edge: sumusunod sa Chromium, na naka-sync sa suporta ng Chrome.
Frontend P3 Mga Kasanayan sa Kulay
CSS P3 Mga Kulay
Gumamit ng kulay(display-p3 1 0.2 0.1) para sa mga ultra-saturated na kulay ng brand. Pagsamahin sa @supports at fallback values para sa backward compatibility.
Media Query Detection
@media (color-gamut: p3) { } provides enhanced colors for P3 devices. In JS: matchMedia("(color-gamut: p3)") for dynamic detection.
Mga Asset ng Larawan
Ihatid ang Display P3 na mga larawang may profile na may kulay sa mga device na P3. Gumamit ng <picture> + media query para mag-load ng iba't ibang gamut na imahe ayon sa kakayahan ng device.
Magandang Pagkasira
Palaging magbigay ng sRGB fallback bago ang mga value ng P3. CSS: kulay: #ff4500; kulay: kulay(display-p3 1 0.3 0); — pinalampas ng pangalawang linya ang una.
Mga Madalas Itanong
Q.Ang browser ay nag-uulat ng "P3 suportado" ngunit ang aking screen ay sRGB?
Kino-convert ng macOS ang mga kulay ng P3 sa display na sRGB, kaya nag-uulat pa rin ang browser ng suporta sa antas ng system P3. Ngunit pisikal na hindi maipakita ng screen ang mga kulay ng P3-extended — ang mga labis na halaga ay na-clip. Nakakatulong ang mga swatch na paghahambing ng page na ito na i-verify ang aktwal na kakayahan sa pagpapakita.
Q.Nakakaapekto ba ang mga kulay ng P3 sa bilis ng pag-load ng page?
Hindi. color(display-p3) ay isang native na CSS property na hindi nangangailangan ng karagdagang JS library o resources. Ang tanging epekto sa pagganap ay maaaring magmula sa mga larawang may naka-embed na P3 na mga profile ng kulay, na karaniwang bahagyang mas malaki kaysa sa mga bersyon ng sRGB.
Q.Pinapanatili ba ng mga screenshot ng iPhone ang mga kulay ng P3?
Oo. Ang mga screenshot at larawan ng iPhone ay default sa Display P3 color space. Kapag ipinadala sa mga device na sRGB, mako-convert ang mga kulay. Ang pagtingin sa mga screenshot na ito sa P3-capable na mga device ay nagpapakita ng mas makulay na mga kulay.
Q.Bakit nagbibigay ng parehong P3 at sRGB na mga halaga?
Ang karamihan sa mga display sa buong mundo ay sRGB pa rin. Ang paggamit lamang ng mga value ng P3 ay nangangahulugang babalewalain ng mga hindi sinusuportahang browser ang mga ito o magpapakita ng mga maling kulay. Hinahayaan ka ng CSS cascading na magsulat muna ng sRGB fallback, pagkatapos ay P3 enhancement — awtomatikong pinipili ng browser ang sinusuportahang bersyon.
Q.Sapat na ba ang "95% DCI-P3" ng aking display?
Oo. Maaaring ipakita ng saklaw ng 95%+ DCI-P3 ang karamihan sa mga kulay ng P3-extended. Lumilitaw lamang ang mga pagkakaiba sa sobrang puspos na mga rehiyon ng red-green na hangganan. Ang 100% coverage ay higit pa sa isang marketing point — sa totoong paggamit, 95% at 100% ay halos hindi matukoy.
Q.Ano ang pagkakaiba ng Display P3 at DCI-P3?
Ang Display P3 ay ang variant ng Apple gamit ang D65 white point (kapareho ng sRGB), na angkop para sa mga display. Gumagamit ang DCI-P3 ng bahagyang maberde na puting punto bilang pamantayan ng projection ng sinehan. Parehong may halos magkaparehong hanay ng gamut — tanging ang puting punto ang naiiba.
P3 Mga Tip sa Pag-develop ng Kulay
- • CSS Syntax: color: color(display-p3 1 0.3 0); — note RGB values range 0-1, not 0-255.
- • Paatras na Pagkatugma: Palaging magsulat ng sRGB fallback sa linya bago ang iyong P3 value. Awtomatikong pinipili ng browser ang sinusuportahang panuntunan.
- • Mga Debug Tool: Chrome Sinusuportahan na ng tagapili ng kulay ng DevTools ang P3 gamut preview at conversion.
- • Payo sa Disenyo: Gamitin lang ang P3 pagpapahusay para sa mga kulay ng brand, CTA button, at pangunahing larawan — hindi para sa bawat solong kulay.