P3 เบลซเรด
สีแดงอิ่มตัวมาก
P3 แอปเปิ้ลกรีน
สีเขียวอิ่มตัวมาก
P3 ซีนีมาออเร้นจ์
สีส้มเกรดภาพยนตร์
P3 ชมพูนีออน
สีชมพูอิ่มตัวสุดๆ
P3 สีฟ้าหยก
สีฟ้าอิ่มตัวมาก
P3 สีม่วง
สีม่วงเข้มสุดๆ
/* 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 แพตช์ที่สดใสยิ่งขึ้น → รองรับ True P3
ตัด P3 → ช่วง sRGB เท่านั้น
การทดสอบสี DCI-P3 ระดับมืออาชีพ
ตรวจสอบได้อย่างแม่นยำว่าจอแสดงผลของคุณรองรับช่วงสีกว้าง P3 อย่างแท้จริงหรือไม่ โดยใช้ตัวอย่างสี P3-exclusive การแสดงขอบเขต sRGB และการทดสอบความอิ่มตัวของสีต่อช่องสัญญาณ
P3-Exclusive ตัวอย่าง
แสดงสีที่มีเพียงจอภาพ P3 เท่านั้นที่สามารถเรนเดอร์ได้อย่างถูกต้อง: สีแดงอิ่มตัวเป็นพิเศษ, สีเขียวของ Apple, สีส้มเกรดภาพยนตร์ บนจอแสดงผล sRGB สีเหล่านี้ถูกตัดทอนเป็นค่า sRGB ที่ใกล้ที่สุด ทำให้สูญเสียความสดใสไป
sRGB การแสดงขอบเขต
แถบไล่ระดับสีเปลี่ยนจากขอบเขตขอบเขตสี sRGB ไปเป็นขอบเขตขอบเขตสีแบบสุดขั้ว P3 บนจอแสดงผล P3 การไล่ระดับสีจะดำเนินต่อไปเลยขอบเขต sRGB บนจอแสดงผล sRGB การไล่ระดับสีจะหยุดที่ขอบเขต (สีจะไม่เปลี่ยนอีกต่อไป)
CSS P3 การตรวจสอบสี
ตัวอย่างทั้งหมดเรนเดอร์โดยใช้ไวยากรณ์สี CSS (จอแสดงผล-p3 ...) — การรองรับสีดั้งเดิมของเบราว์เซอร์ P3 เมื่อรวมกับคำค้นหา @media (ขอบเขตสี: p3) นักพัฒนาส่วนหน้าสามารถมอบสีอินเทอร์เฟซที่มีชีวิตชีวามากขึ้นให้กับผู้ใช้ที่มีขอบเขตสีกว้าง
DCI-P3 คืออะไร?
ทำความเข้าใจต้นกำเนิดและการใช้งานของมาตรฐานขอบเขตสี P3
มาตรฐานอุตสาหกรรมภาพยนตร์
DCI-P3 ก่อตั้งขึ้นใน 2005 โดย Digital Cinema Initiatives โดยเดิมมีไว้สำหรับการฉายภาพยนตร์ดิจิทัล ครอบคลุมประมาณ 45% ของสีที่มนุษย์มองเห็น ซึ่งใหญ่กว่า 25% ของ sRGB ของ 35% ประมาณ
แนะนำให้ใช้ระบบนิเวศของ Apple
Apple ยอมรับ P3 โดยสมบูรณ์โดยเริ่มต้นใน 2015: iMac 5K, iPhone 7+, iPad Pro, MacBook Pro และ Pro Display XDR รองรับ P3 ทั้งหมด การจัดการสี macOS จัดการเนื้อหา P3 ได้อย่างสมบูรณ์แบบ ทำให้เป็นระบบนิเวศ P3 ที่เติบโตเต็มที่ที่สุด
HDR เนื้อหามาตรฐาน
รูปแบบ HDR เช่น HDR10 และ Dolby Vision จะใช้ P3 เป็นที่เก็บสี เนื้อหา Netflix, Disney+ และ Apple TV+ หลัก HDR อยู่ในช่วง P3 จอแสดงผลที่ไม่มี P3 จะไม่สามารถเรนเดอร์สี HDR ได้อย่างสมบูรณ์
วิธีตรวจสอบการสนับสนุน P3
สามขั้นตอนในการตรวจสอบความสามารถด้านสีของจอแสดงผล P3
ดูผลการตรวจจับ
หน้านี้ตรวจพบการสืบค้นสื่อขอบเขตสีของเบราว์เซอร์โดยอัตโนมัติขณะโหลด หากแสดงข้อความว่า "รองรับ "P3" แสดงว่าจอแสดงผล + OS + เบราว์เซอร์ของคุณสามารถแสดงสี P3 ได้
เปรียบเทียบนาฬิกา Swatches สุดพิเศษ
สังเกตบริเวณตัวอย่าง P3-exclusive หากตัวอย่างเหล่านี้ดูสดใสกว่าตัวควบคุม sRGB ที่อยู่ติดกันอย่างเห็นได้ชัด (โดยเฉพาะสีแดงและสีเขียว) แสดงว่าจอแสดงผลของคุณแสดงสีแบบขยาย P3 แทนที่จะตัดเป็น sRGB
ตรวจสอบส่วนขยายการไล่ระดับสี
ค้นหาเครื่องหมายขอบเขต sRGB ในแถบไล่ระดับสี บนจอแสดงผล P3 การไล่ระดับสียังคงชัดเจนยิ่งขึ้นเมื่อผ่านเครื่องหมาย บนจอแสดงผล sRGB สีจะหยุดเปลี่ยนเลยเครื่องหมาย — นั่นคือขีดจำกัดทางกายภาพของขอบเขต sRGB
P3 คำศัพท์เฉพาะของคีย์สี
color(display-p3)
CSS ฟังก์ชันสีระดับ 4 ที่ช่วยให้ระบุสี P3 ได้โดยตรงในหน้าเว็บ ไวยากรณ์: color(display-p3 r g b) ที่มีค่า RGB อยู่ในช่วง 0-1 Safari เป็นคนแรกที่สนับสนุน Chrome 111+ และ Firefox 113+ รองรับแล้วเช่นกัน
แบบสอบถามสื่อขอบเขตสี
@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.
การตัดภาพ
เมื่อสี P3 แสดงบนจอภาพ sRGB ค่าที่เกินช่วง sRGB จะถูกตัดให้เป็นค่าขอบเขต sRGB ที่ใกล้ที่สุด ซึ่งทำให้สูญเสียความอิ่มตัว — สีส้มสดใส P3 จะกลายเป็นสีส้มธรรมดา sRGB
ช่วงเสียงกว้าง
โดยทั่วไปหมายถึงความสามารถของขอบเขตเสียงที่เกิน sRGB DCI-P3 เป็นมาตรฐานขอบเขตสีกว้างที่พบบ่อยที่สุด รองลงมาคือ Adobe RGB Display P3 คือรูปแบบการแสดงผลของ DCI-P3 ของ Apple โดยใช้จุดสีขาว D65
อุปกรณ์ใดบ้างที่รองรับ P3
P3 รองรับขอบเขตเสียงในอุปกรณ์ทั่วไป
อุปกรณ์แอปเปิ้ล
P3 การสนับสนุน:
• iPad Pro (ทั้งหมด): 100% P3
• MacBook โปร 2016+: 100% P3
• Pro Display XDR / จอแสดงผลสตูดิโอ: 100% P3
Windows มอนิเตอร์
P3 การสนับสนุน:
• จอภาพสำหรับเล่นเกม (ระดับไฮเอนด์): 90-95% P3
• จอภาพสำนักงานมาตรฐาน: โดยทั่วไปคือ sRGB เท่านั้น
• หมายเหตุ: การจัดการสี Windows จำเป็นต้องรองรับโปรไฟล์ ICC
อุปกรณ์ Android
P3 การสนับสนุน:
• รองรับขอบเขต Google Pixel 6+: P3
• อุปกรณ์ระดับกลาง: โดยทั่วไปแล้วจะเป็น sRGB เท่านั้นหรือต่ำกว่าเล็กน้อย
• การจัดการสีของ Android ได้รับการปรับปรุงโดยเริ่มจาก Android 10
รองรับเบราว์เซอร์
การแสดงสี:
• Chrome 111+: รองรับฟังก์ชันสี CSS P3
• Firefox 113+: รองรับฟังก์ชันสี CSS P3
• Edge: ติดตาม Chromium ซึ่งซิงค์กับการสนับสนุน Chrome
ส่วนหน้า P3 แนวทางปฏิบัติด้านสี
CSS P3 สี
ใช้สี (จอแสดงผล-p3 1 0.2 0.1) สำหรับสีของแบรนด์ที่มีความอิ่มตัวสูงเป็นพิเศษ รวมกับ @supports และค่าสำรองเพื่อความเข้ากันได้แบบย้อนหลัง
การตรวจจับการสืบค้นสื่อ
@media (color-gamut: p3) { } provides enhanced colors for P3 devices. In JS: matchMedia("(color-gamut: p3)") for dynamic detection.
เนื้อหารูปภาพ
ให้บริการภาพโปรไฟล์สี Display P3 ไปยังอุปกรณ์ P3 ใช้ <picture> + คำสั่งสื่อเพื่อโหลดรูปภาพขอบเขตสีที่แตกต่างกันตามความสามารถของอุปกรณ์
การย่อยสลายอย่างสง่างาม
ระบุทางเลือกสำรอง sRGB ก่อนค่า P3 เสมอ CSS: สี: #ff4500; สี: สี(จอแสดงผล - p3 1 0.3 0); — บรรทัดที่สองแทนที่บรรทัดแรก
คำถามที่พบบ่อย
Q.เบราว์เซอร์รายงานว่ารองรับ "P3 แล้ว แต่หน้าจอของฉันเป็น sRGB?
macOS แปลงสี P3 เป็นจอแสดงผล sRGB ดังนั้นเบราว์เซอร์ยังคงรายงานการสนับสนุนระดับระบบ P3 แต่ทางกายภาพแล้วหน้าจอไม่สามารถแสดงสี P3-extended ได้ — ค่าที่มากเกินไปจะถูกตัดทอน การเปรียบเทียบสวอตช์ในหน้านี้ช่วยยืนยันความสามารถในการแสดงผลจริง
Q.สี P3 ส่งผลต่อความเร็วในการโหลดหน้าหรือไม่
No. color(display-p3) เป็นคุณสมบัติดั้งเดิมของ CSS ที่ไม่ต้องใช้ไลบรารีหรือทรัพยากร JS เพิ่มเติม ผลกระทบด้านประสิทธิภาพเพียงอย่างเดียวอาจมาจากรูปภาพที่มีโปรไฟล์สี P3 ฝังอยู่ ซึ่งโดยทั่วไปจะมีขนาดใหญ่กว่าเวอร์ชัน sRGB เล็กน้อย
Q.ภาพหน้าจอของ iPhone จะรักษาสี P3 ไว้หรือไม่
ใช่ ภาพหน้าจอและรูปถ่ายของ iPhone มีค่าเริ่มต้นเป็นปริภูมิสี Display P3 เมื่อส่งไปยังอุปกรณ์ sRGB สีจะถูกแปลง การดูภาพหน้าจอเหล่านี้บนอุปกรณ์ P3-capable จะแสดงสีสันที่สดใสยิ่งขึ้น
Q.เหตุใดจึงต้องระบุทั้งค่า P3 และ sRGB
จอแสดงผลส่วนใหญ่ทั่วโลกยังคงเป็น sRGB การใช้เฉพาะค่า P3 หมายความว่าเบราว์เซอร์ที่ไม่รองรับจะเพิกเฉยหรือแสดงสีที่ไม่ถูกต้อง CSS cascading ช่วยให้คุณเขียน sRGB ทางเลือกก่อน จากนั้นจึงเพิ่มประสิทธิภาพ P3 — เบราว์เซอร์จะเลือกเวอร์ชันที่รองรับโดยอัตโนมัติ
Q.จอแสดงผลของฉัน "95% DCI-P3" ดีพอหรือไม่
ใช่ การครอบคลุมของ 95%+ DCI-P3 สามารถแสดงสี P3-extended ส่วนใหญ่ได้ ความแตกต่างปรากฏเฉพาะในบริเวณขอบสีแดงเขียวที่อิ่มตัวมากเท่านั้น ความครอบคลุม 100% เป็นจุดทางการตลาดมากกว่า — ในการใช้งานจริง 95% และ 100% แทบจะแยกไม่ออก
Q.Display P3 และ DCI-P3 แตกต่างกันอย่างไร?
Display P3 เป็นรุ่นของ Apple ที่ใช้จุดสีขาว D65 (เหมือนกับ sRGB) เหมาะสำหรับจอแสดงผล DCI-P3 ใช้จุดสีขาวอมเขียวเล็กน้อยเป็นมาตรฐานการฉายภาพยนตร์ ทั้งสองมีช่วงโทนเสียงที่ใกล้เคียงกัน มีเพียงจุดสีขาวเท่านั้นที่แตกต่างกัน
P3 เคล็ดลับการพัฒนาสี
- • CSS ไวยากรณ์: color: color(display-p3 1 0.3 0); — note RGB values range 0-1, not 0-255.
- • ความเข้ากันได้แบบย้อนหลัง: เขียนทางเลือกสำรอง sRGB ในบรรทัดก่อนค่า P3 ของคุณเสมอ เบราว์เซอร์จะเลือกกฎที่รองรับโดยอัตโนมัติ
- • เครื่องมือดีบัก: Chrome เครื่องมือเลือกสี DevTools รองรับการแสดงตัวอย่างและการแปลงขอบเขต P3 แล้ว
- • คำแนะนำในการออกแบบ: ใช้การเพิ่มประสิทธิภาพ P3 สำหรับสีของแบรนด์ ปุ่ม CTA และรูปภาพหลักเท่านั้น ไม่ใช่สำหรับทุกสี