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

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

แหล่งที่มา: https://pickshade.com/th/gamut
อัปเดต: 2026-09-28

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

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

## 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 มีจอน้อยมากที่ครอบคลุมได้ครบ

| รูปแบบ | ค่า |
| --- | --- |
| HEX | #ff5733 |
| Display P3 | color(display-p3 0.92577 0.38907 0.25797) |
| OKLCH | oklch(68.036% 0.21001 33.692) |
| Rec. 2020 | color(rec2020 0.81266 0.37868 0.19735) |

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

ถ้าสีใน 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 ...)

## เครื่องมือ

- [ตัวแปลง HEX เป็น Display P3](https://pickshade.com/th/convert/hex-to-p3)
- [เครื่องมือเลือกสี OKLCH พร้อมเตือนขอบเขตสี](https://pickshade.com/th)
- [OKLCH คืออะไร](https://pickshade.com/th/oklch)

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

- [OKLCH คืออะไร: รูปแบบสีที่ตรงกับการมองเห็นของดวงตาจริง ๆ](https://pickshade.com/th/oklch)
- [CSS color-mix() และ relative color: สีอ่อน สี hover และความโปร่งใส](https://pickshade.com/th/css-color-mix)
- [รูปแบบรหัสสีทั้งหมด: HEX, RGB, HSL, OKLCH และอื่น ๆ](https://pickshade.com/th/color-formats)