การทำแผนที่ Color Gamut: การแปลงระหว่างพื้นที่สี

เมื่อคุณถ่ายภาพพระอาทิตย์ตกที่สวยงามด้วยกล้องมืออาชีพและเปิดในเว็บเบราว์เซอร์ มีบางอย่างที่หายไป สีส้มและสีม่วงที่ลึกและอิ่มตัวซึ่งเซ็นเซอร์ wide-gamut ของกล้องบันทึกไว้ไม่สามารถผลิตซ้ำได้อย่างแม่นยำบนทุกจอแสดงผล กระบวนการปรับสีที่มีอยู่ในพื้นที่สีหนึ่งให้พอดีกับขอบเขตของอีกพื้นที่หนึ่งเรียกว่า การทำแผนที่ gamut

Color Gamut คืออะไร?

Color gamut คือช่วงสีทั้งหมดที่อุปกรณ์ รูปแบบ หรือพื้นที่สีเฉพาะสามารถแสดงได้

ปัญหาสีที่อยู่นอก Gamut

พิจารณาสีฟ้าอมเขียวที่สดใส: #00FFFF (#00FFFF) ใน sRGB สีนี้อยู่ใกล้ขอบของ gamut sRGB ใน Display P3 มีสีฟ้าอมเขียวที่อิ่มตัวมากกว่าที่ sRGB ไม่สามารถแสดงได้เลย

เมื่อผู้ใช้ดูสีที่อยู่นอก gamut บนจอ sRGB มาตรฐาน เบราว์เซอร์ต้องตัดสินใจ: สี sRGB ใดควรแทนสีเขียวที่ผลิตซ้ำไม่ได้นี้?

Clipping vs การบีบอัดแบบ Perceptual

Clipping

Clipping เป็นวิธีที่ง่ายที่สุด: สีที่อยู่นอก gamut ถูกดึงไปยังจุดที่ใกล้ที่สุดบนขอบ gamut

• สีใกล้ขอบ: การเปลี่ยนแปลงที่มองเห็นได้น้อยที่สุด
• สีที่อยู่นอก gamut ไกล: การสูญเสียความแม่นยำของ hue อย่างมีนัยสำคัญ

ปัญหาใหญ่ที่สุดของ clipping คือ การเปลี่ยน hue Clipping ยังสร้าง banding: สีต้นทางที่แตกต่างหลายสีล้วน clip ไปยังจุดขอบ gamut ที่มีความอิ่มตัวสูงสุดเดียวกัน

Perceptual Rendering Intent (การบีบอัด)

การบีบอัดแบบ perceptual ใช้วิธีที่แตกต่างออกไป แทนที่จะปรับเฉพาะสีที่อยู่นอก gamut มันจะสเกล gamut ทั้งหมดตามสัดส่วน

ข้อดีของการบีบอัดแบบ perceptual: - Gradient ที่ราบเรียบยังคงราบเรียบ (ไม่มี banding) - ความสัมพันธ์สัมพัทธ์ระหว่างสีได้รับการรักษาไว้ - โดยทั่วไปน่าพอใจทางสายตามากกว่าสำหรับการถ่ายภาพและ gradient

ข้อเสีย: - สีที่อยู่ใน gamut ก็เลื่อนเช่นกัน (สเกลลงเล็กน้อยในความอิ่มตัว) - สีอาจดูสดใสน้อยกว่าต้นฉบับเล็กน้อย

CSS Color Level 4 กับการทำแผนที่ Gamut

การระบุสี Wide-Gamut ใน CSS

/* sRGB (ดั้งเดิม) */
color: #22C55E;
color: rgb(34, 197, 94);

/* Display P3 (wide gamut) */
color: color(display-p3 0.05 0.8 0.35);

/* Rec. 2020 (ultra-wide) */
color: color(rec2020 0.1 0.7 0.2);

/* OKLCH (uniform perceptual สามารถระบุสี wide-gamut) */
color: oklch(0.75 0.25 150);

CSS Media Query color-gamut

/* ค่าเริ่มต้น: สี sRGB สำหรับทุกจอ */
.brand-color {
  color: #22C55E;
}

/* ปรับปรุง: สี P3 ที่สดใสกว่าสำหรับจอที่รองรับ */
@media (color-gamut: p3) {
  .brand-color {
    color: color(display-p3 0.05 0.8 0.35);
  }
}

/* Ultra-wide: ความสดใสสูงสุดสำหรับจอ Rec. 2020 */
@media (color-gamut: rec2020) {
  .brand-color {
    color: color(rec2020 0.1 0.7 0.2);
  }
}

OKLCH และ Wide Gamut

/* ใน sRGB: สีเขียวสดใส */
color: oklch(0.75 0.22 145);

/* นอก sRGB อยู่ใน Display P3: สีเขียวสดใสกว่า */
color: oklch(0.75 0.35 145);

/* ไกลนอก sRGB: เบราว์เซอร์จะทำ gamut mapping */
color: oklch(0.75 0.5 145);

ใช้ Color Converter เพื่อแปลงสีระหว่างพื้นที่สีและดูว่าค่าเปลี่ยนแปลงอย่างไร

วิธีแก้ปัญหาเชิงปฏิบัติสำหรับนักออกแบบ

1. ออกแบบใน Gamut เป้าหมาย

หากผลิตภัณฑ์ของคุณมุ่งเป้าไปที่ผู้ใช้บนอุปกรณ์ที่หลากหลาย ออกแบบใน sRGB หากผู้ชมของคุณส่วนใหญ่อยู่บนฮาร์ดแวร์ Apple สมัยใหม่ ให้พิจารณาออกแบบใน Display P3

2. รู้สถานะ Gamut ของสีสดใสของคุณ

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

3. ทดสอบการเปลี่ยนผ่าน Gradient ข้าม Gamut

หากคุณเห็น banding ใน gradient ให้ลอง: - ลด chroma ของจุดปลายทั้งสองเป็นระดับที่ปลอดภัยสำหรับ sRGB - เพิ่มจุดหยุด gradient ระดับกลางเพื่อกระจายการเปลี่ยนผ่าน - ส่ง gradient ผ่าน OKLCH เพื่อการกระจายที่สม่ำเสมอแบบ perceptual

ประเด็นสำคัญ

• Color gamut คือช่วงสีที่อุปกรณ์หรือพื้นที่สีสามารถแสดงได้ sRGB คือเว็บมาตรฐาน Display P3 ใหญ่กว่า ~26%
• Clipping ดึงสีที่อยู่นอก gamut ไปยังขอบ gamut — เร็วแต่อาจทำให้ hue เปลี่ยนและเกิด banding
• การบีบอัดแบบ perceptual สเกล gamut ทั้งหมดตามสัดส่วน — ช้ากว่าแต่รักษาความสัมพันธ์สีและ gradient
• CSS Color Level 4 กำหนดอัลกอริทึมการทำแผนที่ gamut ที่ใช้ OKLCH และ deltaE 2000
• Media query color-gamut ให้คุณแสดงสี color(display-p3) ที่สดใสกว่าให้กับจอที่รองรับ
• ใช้ Color Converter เพื่อตรวจสอบว่าสีใดๆ แปลอย่างไรใน sRGB, Display P3 และ OKLCH