ข้ามไปยังเครื่องมือเลือกสี

ขอบเขตสี (gamut) คืออะไร: sRGB, Display P3 และสีที่อยู่นอกขอบเขต

ขอบเขตสี (gamut) คือชุดของสีที่หน้าจอหรือปริภูมิสีหนึ่งแสดงได้ เว็บถูกสร้างบน sRGB แต่ปัจจุบันมือถือส่วนใหญ่และแล็ปท็อปหลายรุ่นแสดง Display P3 ได้ ซึ่งมีแดง เขียว และส้มที่สดกว่าอย่างเห็นได้ชัด

อ่าน 1 นาที

ขอบเขตสีคืออะไร

หน้าจอทุกจอผสมแสงสีแดง เขียว และน้ำเงิน สีแดง เขียว และน้ำเงินที่บริสุทธิ์ที่สุดที่จอสร้างได้คือมุมทั้งสามของสามเหลี่ยม ทุกสีที่อยู่ในสามเหลี่ยมนั้นอยู่ในขอบเขตสีของจอ ส่วนสีที่อยู่นอกสามเหลี่ยมไม่สามารถแสดงบนจอนั้นได้เลย

sRGB, Display P3 และ Rec. 2020

sRGB เป็นค่าเริ่มต้นของเว็บ และของจอส่วนใหญ่ที่ขายก่อนปี 2016 ทั้ง HEX, rgb() และ hsl() ล้วนอธิบายสีใน sRGB

Display P3 ครอบคลุมสีมากกว่า sRGB ประมาณหนึ่งในสี่ ส่วนใหญ่เป็นเขียว แดง และส้มที่สด ใช้ใน iPhone, iPad, Mac รวมถึงมือถือ Android และแล็ปท็อประดับพรีเมียมหลายรุ่น ใน CSS เขียนเป็น color(display-p3 r g b) หรือเป็นค่า OKLCH ที่มีความสดสูง

Rec. 2020 กว้างกว่านั้นอีก ใช้กับวิดีโอ HDR มีจอน้อยมากที่ครอบคลุมได้ครบ

ตัวอย่าง: #ff5733
รูปแบบค่า
HEX
Display P3
OKLCH
Rec. 2020

สีที่อยู่นอกขอบเขตสีจะเป็นอย่างไร

ถ้าสีใน CSS อยู่นอกขอบเขตสีของจอ เบราว์เซอร์ต้องแสดงสีอื่นแทน การตัดค่าแบบง่าย (clipping) จะตัดแต่ละช่องสีให้อยู่ในขีดจำกัด ซึ่งอาจทำให้ฮิวเปลี่ยน CSS Color 4 จึงแนะนำให้ปรับสีเข้าขอบเขต (gamut mapping) ใน OKLCH แทน คือคงความสว่างและฮิวไว้ แล้วลดความสดลงจนสีเข้าไปอยู่ในขอบเขต

PickShade ทำเครื่องหมายทุกสีที่หลุดออกนอก sRGB และแสดงสีสำรองที่ปรับเข้าขอบเขตแล้ว จึงรู้ได้ชัดเจนว่าคนที่ใช้จอรุ่นเก่าจะเห็นสีอะไร

ใช้สี P3 ใน CSS อย่างปลอดภัย

เขียนค่าสำรองแบบ sRGB ก่อน แล้วตามด้วยค่าที่ใช้ขอบเขตสีกว้าง หรือครอบค่าสีสดไว้ใน media query color-gamut

CSS

.button {
    background: #ff5733;
    background: oklch(68% 0.24 33.7);
}

@media (color-gamut: p3) {
    .hero {
        color: color(display-p3 1 0.3 0.15);
    }
}

คำถามที่พบบ่อย

จะรู้ได้อย่างไรว่าสีอยู่ใน sRGB

วางสีลงใน PickShade สีใดที่อยู่นอก sRGB จะมีคำเตือนเรื่องขอบเขตสี พร้อมสีที่ใกล้ที่สุดที่อยู่ในขอบเขต

สี P3 ใช้บน Windows ได้ไหม

ได้ ถ้าจอครอบคลุม P3 และเบราว์เซอร์รู้จักโปรไฟล์ของจอ บนจอ sRGB เบราว์เซอร์จะปรับสีเข้ามาใน sRGB จึงไม่มีอะไรพัง

HEX จำกัดอยู่แค่ sRGB หรือไม่

ใช่ HEX, rgb(), hsl() และ hwb() อธิบายสีใน sRGB เสมอ ถ้าต้องการสีในขอบเขตสีกว้างให้ใช้ oklch() หรือ color(display-p3 ...)

ลองใช้ใน PickShade

คู่มือที่เกี่ยวข้อง