คู่มือสี CSS ความละเอียดสูง

CSS Color 4 นำเครื่องมือสีและความสามารถต่างๆ มาปรับใช้กับเว็บ ไม่ว่าจะเป็นการใส่สี ฟังก์ชันการไล่ระดับสี และการไล่ระดับสีที่ดียิ่งขึ้น

Adam Argyle

เป็นเวลากว่า 25 ปีแล้ว ที่ sRGB (สีน้ำเงินแดงมาตรฐาน) เป็นสีเดียว ขอบเขตสำหรับการไล่ระดับสีและสีของ CSS โดยมีพื้นที่สีอยู่ภายใน เช่น rgb(), hsl() และเลขฐาน 16 เป็นความสามารถด้านขอบเขตสีที่นิยมใช้กันมากที่สุดในหมู่จอแสดงผล ซึ่งเป็นตัวส่วนที่ใช้กันทั่วไป เราเริ่ม คุ้นเคยกับการระบุสีภายในขอบเขตนี้มาก

https://almanac.httparchive.org/th/2022/css#colors

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

หาก CSS ไม่อัปเดต CSS จะคงอยู่ในช่วงสี 90 ตลอดไป จะถูกบังคับให้ไม่จับคู่กับข้อเสนอในขอบเขตกว้างที่พบในรูปภาพและวิดีโอ ถูกดัก แสดงสีที่มนุษย์มองเห็นได้เพียง 30% ขอขอบคุณ CSS Color Level 4 ที่ช่วยเราหลบหนีกับดักนี้ เขียนโดย Lea Verou และ Chris Liley เป็นหลัก

จาก Chrome 111 รองรับ CSS Color 4 และขอบเขตสี โดยเข้าร่วมกับ Safari ซึ่งรองรับการใช้ display-p3 ตั้งแต่ปี 2016 ขณะนี้ CSS สามารถรองรับการแสดงผลแบบ HD (ความละเอียดสูง) ที่ระบุสีจากขอบเขต HD ในขณะเดียวกันก็มอบพื้นที่สีที่มีความเชี่ยวชาญพิเศษด้วย คู่มือนี้จะอธิบายถึงวิธีการ เริ่มใช้ประโยชน์จากสีในโลกยุคใหม่

ชุดรูปภาพจะแสดงการเปลี่ยนระหว่างช่วงสีที่กว้างและแคบ ซึ่งแสดงให้เห็นถึงความสดใสของสีและเอฟเฟกต์
ทดลองด้วยตัวเอง

ในเบราว์เซอร์ที่รองรับ จะมีสีให้เลือกเพิ่มขึ้น 50%! คุณคงเคยคิดว่าสี 16 ล้านสีฟังดูดีมาก เพราะฉะนั้น รอจนกว่าคุณจะเห็นจำนวนสีที่พื้นที่ใหม่เหล่านี้สามารถแสดง นอกจากนี้ ให้คำนึงถึงการไล่ระดับสีทั้งหมดที่รวมเนื่องจากมีความลึกของบิตไม่เพียงพอ ปัญหานี้ได้รับการแก้ไขแล้วเช่นกัน

นอกจากสีที่เพิ่มมากขึ้น น่าจะเห็นได้ชัดว่าสีที่สดใสที่สุดของหน้าจอนั้น พื้นที่สีใหม่จะให้เครื่องมือและวิธีการที่ไม่เหมือนใครในการจัดการและสร้างระบบสี ตัวอย่างเช่น ก่อนหน้านี้เรามี HSL และช่องทาง "ความง่าย" ซึ่งเป็น เว็บที่ดีที่สุดที่นักพัฒนาเว็บมี ขณะนี้ใน CSS เรามี "perceptual lightness" ของ LCH

ดูตัวอย่างด้วยตัวคุณเองได้ที่ https://codepen.io/web-dot-dev/pen/poZgXxy

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

การผสมสี 2 อันดับแรกเป็นแบบ sRGB และ sRGB การผสมสี 2 แบบด้านล่างอยู่ในจอแสดงผล p3 Display p3 มีสีที่สดใสกว่าและมิกซ์จะเป็นสีขาวและดำตรงกลาง ซึ่ง sRGB จะจางลงเล็กน้อยและมิกซ์ที่อยู่ตรงกลางจะไม่เปลี่ยนเป็นสีขาวดำ
https://codepen.io/web-dot-dev/pen/poZgXQb

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

ภาพรวม

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

ยังมีอะไรอีกมากมายนอกเหนือจาก "สี" เช่นกัน เมื่อจบบทความนี้ คุณจะสามารถระบุสีเพิ่มเติม ปรับปรุงการไล่ระดับสี และเลือกพื้นที่สีและช่วงสีที่เหมาะสมที่สุดสำหรับแต่ละงานได้

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

ขอบเขตแสดงถึงขนาดของบางสิ่ง วลี "นับล้านสี" เป็นความคิดเห็นเกี่ยวกับขอบเขตของการแสดงผลหรือช่วงสีที่หน้าจอต้องเลือก ในภาพต่อไปนี้ ระบบจะเปรียบเทียบ 3 ขอบเขต และขนาดยิ่งใหญ่ยิ่งแสดงสีมาก

ขอบเขตสีก็มีชื่อได้เช่นกัน เช่น ระหว่างบาสเกตบอลกับเบสบอล หรือถ้วยกาแฟเวนเต้กับแกรนด์ ชื่อขนาดจะช่วยให้ผู้คนสื่อสารได้ การเรียนรู้ชื่อขอบเขตสีเหล่านี้จะช่วยให้คุณสื่อสารและ เข้าใจช่วงสีต่างๆ ได้อย่างรวดเร็ว

บทความนี้จะแนะนำให้คุณรู้จักกับขอบเขตของสีใหม่ 7 แบบ ซึ่งทั้งหมดมีช่วงกว้างกว่า sRGB และอธิบายฟีเจอร์ต่างๆ ที่จะช่วยในการเลือกว่าจะใช้แบบใด

• sRGB
• RGB 98
• จอแสดงผล p3
• Rec2020
• ProPhoto
• CIE
• HVS (ขอบเขตการมองเห็นของมนุษย์)

หมายเหตุ: คุณอาจทราบแล้วว่าแล็ปท็อปหรือทีวีของคุณอยู่ในช่วงใด

ขอบเขตการมองเห็นของมนุษย์

ขอบเขตสีมักถูกเปรียบเทียบกับขอบเขตการมองเห็นของมนุษย์ ซึ่งเป็นสีทั้งหมดที่เราคิดว่ามนุษย์มองเห็น HVS มักจะแสดงด้วยแผนภาพสี ดังนี้

แหล่งที่มา: Wikipedia

รูปร่างด้านนอกสุดคือสิ่งที่เราเห็นเป็นมนุษย์ และสามเหลี่ยมด้านในคือช่วงฟังก์ชัน rgb() หรือพื้นที่สี sRGB

ตามที่คุณเห็นสามเหลี่ยมด้านบน เป็นการเปรียบเทียบขนาดขอบเขต จากนั้นคุณจะเห็นสามเหลี่ยมด้านล่าง นี่เป็นวิธีการสื่อสารของอุตสาหกรรมเกี่ยวกับขอบเขตสี และเปรียบเทียบขอบเขตสี

พื้นที่สีคืออะไร

พื้นที่สีคือการจัดเรียงช่วงสี สร้างรูปร่างและวิธีเข้าถึงสี ซึ่งส่วนใหญ่จะมีรูปทรง 3 มิติที่เรียบง่าย เช่น ลูกบาศก์หรือทรงกระบอก การจัดเรียงสีนี้กำหนดว่าสีใดอยู่ติดกัน และวิธีการในการเข้าถึงและการเติมสี

RGB เป็นเหมือนพื้นที่สีสี่เหลี่ยมผืนผ้า ซึ่งเข้าถึงสีได้โดยการระบุพิกัดบน 3 แกน HSL คือพื้นที่สีทรงกระบอก ซึ่งมีการเข้าถึงสีด้วยมุมเฉดสีและพิกัดบน 2 แกน

https://en.wikipedia.org/wiki/HSL_and_HSV

ข้อกำหนดระดับ 4 นำเสนอพื้นที่สีใหม่ 12 แบบสำหรับค้นหาสีจาก 7 ขอบเขตใหม่ที่แชร์ไว้ก่อนหน้านี้

• เชิงเส้น sRGB
• LCH
• okLCH
• ห้องทดลอง
• okLAB
• จอแสดงผล p3
• Rec2020
• A98 RGB
• RGB ของ Pro
• XYZ
• XYZ D50
• XYZ D65

ต่อไปนี้คือพื้นที่สีอีก 4 แบบที่เคยใช้ได้ก่อนหน้านี้

• เลขฐานสิบหก
• RGB
• HSL
• HWB

ขอบเขตสีและสรุปพื้นที่สี

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

นี่คือภาพแบบอินเทอร์แอกทีฟของ Alexey Ardov ที่แสดงให้เห็นพื้นที่สี ชี้ ลาก และซูมไปรอบๆ ในการสาธิตนี้ เปลี่ยนพื้นที่สีเพื่อดูภาพของพื้นที่อื่นๆ

• ใช้ขอบเขตสีเพื่อพูดถึงช่วงสี เช่น ช่วงต่ำหรือช่วงแคบ เทียบกับช่วงสีสูงหรือช่วงกว้าง
• ใช้พื้นที่สีเพื่อพูดคุยเกี่ยวกับการจัดเรียงสี ไวยากรณ์ที่ใช้เพื่อระบุสี จัดการกับสี และแทรกสลับสี

ด้านบนคือขอบเขต sRGB ของอนุภาคที่พอดีกับพื้นที่สีลูกบาศก์ RGB แหล่งที่มาของรูปภาพ

วิธีเข้าถึงสีเพิ่มเติม พื้นที่ทำงานใหม่ และผลการแก้ไขข้อบกพร่อง

CSS สี 4 ระบุคุณลักษณะและเครื่องมือใหม่ๆ จำนวนมากสำหรับ CSS และสี อย่างแรก มาสรุปว่าสีอยู่ตรงไหนก่อน ฟีเจอร์ใหม่ๆ เหล่านี้ จากนั้นจะเห็นภาพรวมของพื้นที่สี ไวยากรณ์ และเครื่องมือใหม่

Codepen ต่อไปนี้จะแสดงไวยากรณ์สีใหม่และเก่าทั้งหมดร่วมกัน

รีวิวพื้นที่สีแบบคลาสสิก

ตั้งแต่ช่วงทศวรรษที่ 2000 คุณสามารถใช้ค่าต่อไปนี้สำหรับพร็อพเพอร์ตี้ CSS ที่ยอมรับสีเป็นค่า เช่น เลขฐานสิบหก (เลขฐานสิบหก), rgb(), rgba(), ตามชื่อ เช่น hotpink หรือกับคีย์เวิร์ด เช่น currentColor ประมาณปี 2010 CSS อาจใช้สี hsl() ได้ ทั้งนี้ขึ้นอยู่กับเบราว์เซอร์ของคุณ จากนั้นในปี 2017 เลขฐานสิบหกที่มีอัลฟ่าก็ปรากฏขึ้น และเมื่อไม่นานมานี้ hwb() เริ่มได้รับการสนับสนุนในเบราว์เซอร์

สีอ้างอิงตามพื้นที่สีแบบคลาสสิกทั้งหมดเหล่านี้อยู่ภายในขอบเขตเดียวกัน ซึ่งก็คือ sRGB

เลขฐานสิบหก

การสนับสนุนเบราว์เซอร์

• 1
• 12
• 1
• 1

แหล่งที่มา

พื้นที่สีแบบเลขฐาน 16 จะระบุ R, G, B และ A ด้วยตัวเลขเลขฐานสิบหก ตัวอย่างโค้ดต่อไปนี้แสดงวิธีทั้งหมดที่ไวยากรณ์นี้ระบุเครื่องหมายบวกความทึบแสงสีแดง เขียว และน้ำเงิน

.valid-css-hex-colors {
  /* classic */
  --3-digits: #49b;
  --6-digits: #4499bb;

  /* hex with opacity */
  --4-digits-opaque: #f9bf;
  --8-digits-opaque: #ff99bbff;
  --4-digits-with-opacity: #49b8;
  --8-digits-with-opacity: #4499bb88;
}

RGB

การสนับสนุนเบราว์เซอร์

• 1
• 12
• 1
• 1

แหล่งที่มา

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

.valid-css-rgb-colors {
  --classic: rgb(64, 149, 191);
  --modern: rgb(64 149 191);
  --percents: rgb(25% 58% 75%);

  --classic-with-opacity-percent: rgba(64, 149, 191, 50%);
  --classic-with-opacity-decimal: rgba(64, 149, 191, .5);

  --modern-with-opacity-percent: rgb(64 149 191 / 50%);
  --modern-with-opacity-decimal: rgb(64 149 191 / .5);

  --percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
  --percents-with-opacity-decimal: rgb(25% 58% 75% / 50%);

  --empty-channels: rgb(none none none);
}

HSL

การสนับสนุนเบราว์เซอร์

• 1
• 12
• 1
• 3.1

แหล่งที่มา

HSL (ความอิ่มตัวของสีและความสว่าง) เป็น 1 ในสีแห่งแรกๆ ที่จะปรับตัวเองให้เข้ากับภาษาและการสื่อสารของมนุษย์ HSL (ความอิ่มตัวของสีและความสว่าง) นำเสนอทุกสีในโทนสี sRGB โดยที่ไม่ต้องใช้สมองรับรู้ถึงการโต้ตอบสีแดง เขียว และน้ำเงิน ในไวยากรณ์จะมีเครื่องหมายจุลภาคเหมือนกับ RGB ก็คงไม่ต้องใช้เครื่องหมายจุลภาคอีกแล้ว แต่นับจากนี้ไป

.valid-css-hsl-colors {
  --classic: hsl(200deg, 50%, 50%);
  --modern: hsl(200 50% 50%);

  --classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
  --classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);

  --modern-with-opacity-percent: hsl(200 50% 50% / 50%);
  --modern-with-opacity-decimal: hsl(200 50% 50% / .5);

  /* hueless and no saturation */
  --empty-channels-white: hsl(none none 100%);
  --empty-channels-black: hsl(none none 0%);
}

HWB

การสนับสนุนเบราว์เซอร์

• 101
• 101
• 96
• 15

แหล่งที่มา

พื้นที่สีแบบ sRGB อีกแบบหนึ่งที่มุ่งเน้นวิธีที่มนุษย์อธิบายสีคือ HWB (โทนสี ความขาว ความมืด) ผู้เขียนสามารถเลือกโทนสีและผสมสีขาวหรือดำเพื่อค้นหาสีที่ต้องการได้

.valid-css-hwb-colors {
  --modern: hwb(200deg 25% 25%);
  --modern2: hwb(200 25% 25%);

  --modern-with-opacity-percent: hwb(200 25% 25% / 50%);
  --modern-with-opacity-decimal: hwb(200 25% 25% / .5);

  /* hueless and no saturation */
  --empty-channels-white: hwb(none 100% none);
  --empty-channels-black: hwb(none none 100%);
}

พบกับพื้นที่สีใหม่สำหรับเว็บ

พื้นที่สีต่อไปนี้ช่วยให้เข้าถึงขอบเขตที่มีขนาดใหญ่กว่า sRGB พื้นที่สี Display-p3 มีสีมากกว่า RGB เกือบ 2 เท่า ขณะที่ Rec2020 มีสีมากกว่า Display-p3 เกือบ 2 เท่า มีสีให้เลือกเยอะเลย

ฟังก์ชัน color()

การสนับสนุนเบราว์เซอร์

• 111
• 111
• 113
• 15

แหล่งที่มา

ฟังก์ชัน color() ใหม่สามารถใช้กับพื้นที่สีใดๆ ที่ระบุสีที่มีช่องสี R, G และ B color() จะใช้พารามิเตอร์พื้นที่สีก่อน จากนั้นตามด้วยชุดของค่าแชแนลสำหรับ RGB และอัลฟ่าบางตัว (ไม่บังคับ)

คุณจะพบว่าพื้นที่สีใหม่จำนวนมากใช้ฟังก์ชันนี้ เนื่องจากการมีฟังก์ชันพิเศษ เช่น rgb, srgb, hsl, hwb และอื่นๆ เพิ่มจำนวนขึ้นในรายการจำนวนมาก และทำให้พื้นที่สีเป็นพารามิเตอร์ได้ง่ายขึ้น

ข้อดี

• พื้นที่ที่ปรับให้เป็นมาตรฐานสำหรับการเข้าถึงพื้นที่สีที่ใช้ช่อง RGB
• สามารถปรับขนาดได้ทุกพื้นที่สีตาม RGB ที่กว้าง

ข้อเสีย

• ใช้ไม่ได้กับ HSL, HWB, LCH, okLCH หรือ okLAB

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

หมายเหตุ: สีต่างๆ อาจอยู่ในช่อง sRGB Gamut, Display P3 Gamut หรือ Rec2020 Gamut หรือกว้างถึง 77.6% ของสเปกตรัมที่มองเห็นได้

sRGB ผ่าน color()

พื้นที่สีนี้มีฟีเจอร์เหมือนกับ rgb() และยังมีทศนิยมระหว่าง 0 ถึง 1 ด้วย เช่น 0% ถึง 100%

ข้อดี

• จอแสดงผลเกือบทั้งหมดรองรับช่วงสีนี้
• การรองรับเครื่องมือออกแบบ

ข้อเสีย

• ไม่เป็นเชิงเส้นเชิงรับรู้ (เหมือนที่ lch() เป็น)
• ไม่มีสีโทนกว้าง
• การไล่ระดับสีมักจะผ่านโซนที่ไม่ทำงาน

.valid-css-srgb-colors {
  --percents: color(srgb 34% 58% 73%);
  --decimals: color(srgb .34 .58 .73);

  --percents-with-opacity: color(srgb 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb none none none);
  --empty-channels-black2: color(srgb);
}

sRGB เชิงเส้นผ่าน color()

ทางเลือกเชิงเส้นแทน RGB นี้มีความเข้มของแชแนลที่คาดการณ์ได้

ข้อดี

• เข้าถึงช่องสัญญาณ RGB โดยตรง เหมาะสำหรับการใช้งานอย่างเครื่องมือเกมหรือโชว์แสงสี

ข้อเสีย

• ไม่เป็นเชิงเส้นเชิงรับรู้
• สีขาวดำอยู่เต็มขอบ

.valid-css-srgb-linear-colors {
  --percents: color(srgb-linear 34% 58% 73%);
  --decimals: color(srgb-linear .34 .58 .73);

  --percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb-linear none none none);
  --empty-channels-black2: color(srgb-linear);
}

การไล่ระดับสีจะพูดถึงรายละเอียดในภายหลัง แต่การได้เห็นการไล่ระดับสี srgb และ linear-srgb สีดำถึงขาวก็มีประโยชน์อย่างมากเพื่อแสดงความแตกต่าง ดังนี้

LCH

การสนับสนุนเบราว์เซอร์

• 111
• 111
• 113
• 15

แหล่งที่มา

พื้นที่แรกของโพสต์นี้แนะนำไวยากรณ์สำหรับการเข้าถึงสีนอกขอบเขตของ RGB! และยังเป็นวิธีแรกที่ช่วยให้คุณสร้างสีนอกกรอบให้กับจอแสดงผลได้ง่ายมาก เนื่องจากสีทุกสีในพื้นที่ CIE (lch, oklch, lab, oklab) สามารถแสดงสเปกตรัมสีที่มองเห็นได้ทั้งหมดของมนุษย์

พื้นที่สีนี้จำลองมาจากการมองเห็นของมนุษย์และมีไวยากรณ์ในการระบุสีดังกล่าวและอื่นๆ ช่อง LCH คือความสว่าง สี และโทนสี โทนสีเป็นมุม เช่น ใน HSL และ HWB ความสว่างคือค่าระหว่าง 0 ถึง 100 แต่ไม่เหมือนกับความสว่างของ HSL เพราะเป็นความสว่างพิเศษที่ "มีความคล้ายคลึงเชิงเส้น" ที่เน้นมนุษย์เป็นหลัก ความอิ่มตัวของสีคล้ายกับความอิ่มตัว มีได้ตั้งแต่ 0 ถึง 230 แต่ในทางเทคนิคยังไม่มีการควบคุม

ข้อดี

• การบิดเบือนสีที่คาดการณ์ได้เนื่องจากการเป็นเชิงเส้นเชิงรับรู้เป็นส่วนใหญ่ (ดู oklch)
• ใช้ช่องที่คุ้นเคย
• มักจะมีการไล่ระดับสีที่มีชีวิตชีวา

ข้อเสีย

• นอกกรอบได้ง่ายดาย
• ในบางกรณีที่เกิดขึ้นไม่บ่อยนัก การไล่ระดับสีอาจต้องมีจุดกึ่งกลางของการปรับเพื่อป้องกันการเปลี่ยนแปลงของโทนสี

.valid-css-lch-colors {
  --percent-and-degrees: lch(58% 32 241deg);
  --just-the-degrees: lch(58 32 241deg);
  --minimal: lch(58 32 241);

  --percent-opacity: lch(58% 32 241 / 50%);
  --decimal-opacity: lch(58% 32 241 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lch(100 none none);
  --empty-channels-black: lch(none none none);
}

คำเตือน: โครมาอาจเป็นตัวก่อกวน ทำให้ผู้เขียนใช้สิ่งต่างๆ ในขอบเขตของจอแสดงผลได้ง่าย โปรดระวังค่า C ที่มีความคมชัดสูง

ห้องทดลอง

การสนับสนุนเบราว์เซอร์

• 111
• 111
• 113
• 15

แหล่งที่มา

พื้นที่สีอีกแห่งในการเข้าถึงขอบเขต CIE อีกครั้งด้วยมิติข้อมูลความสว่าง (L) แบบรับรู้ได้ A และ B ใน LAB จะแสดงแกนเฉพาะของ การมองเห็นสีของมนุษย์ คือ แดง/เขียว และน้ำเงิน เหลือง ถ้าให้ค่า A เป็นค่าบวก จะเพิ่มสีแดงและเพิ่มสีเขียวเมื่อมีค่าต่ำกว่า 0 เมื่อให้ตัวเลข B เป็นจำนวนบวก จะเป็นการเพิ่มสีเหลือง โดยค่าลบจะเป็นสีน้ำเงิน

ข้อดี

• การไล่ระดับสีที่สม่ำเสมอและรับรู้
• ช่วงไดนามิกสูง

ข้อเสีย

• ศักยภาพที่สีอาจเปลี่ยนไป
• เขียนแบบด้วยมือยากหรือคาดเดาสีเวลาอ่านค่า

.valid-css-lab-colors {
  --percent-and-degrees: lab(58% -16 -30);
  --minimal: lab(58 -16 -30);

  --percent-opacity: lab(58% -16 -30 / 50%);
  --decimal-opacity: lab(58% -16 -30 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lab(100 none none);
  --empty-channels-black: lab(none none none);
}

โอเคแอล

การสนับสนุนเบราว์เซอร์

• 111
• 111
• 113
• 15.4

แหล่งที่มา

พื้นที่สีนี้แก้ไขเป็น LCH แล้ว และเช่นเดียวกับ LCH คือ (L) จะแสดงความสว่างตามเส้นตรง C สำหรับโครมาและ H แทนโทนสี

พื้นที่ทำงานนี้จะคุ้นเคยดีหากคุณเคยใช้ HSL หรือ LCH เลือกมุมบนวงล้อสีสำหรับ H เลือกความสว่างหรือความมืด โดยปรับ L แต่เราจะมีค่าสีแทนความอิ่มตัว ซึ่งค่อนข้างเหมือนกันทุกประการ ยกเว้นการปรับความสว่างและสี

ข้อดี

• ไม่ต้องกังวลเมื่อใช้เฉดสีน้ำเงินและม่วง
• ความสว่างที่รับรู้ได้แบบเชิงเส้น
• ใช้ช่องที่คุ้นเคย
• ช่วงไดนามิกสูง
• มีตัวเลือกสีสมัยใหม่ - โดย Evil Martians

ข้อเสีย

• นอกกรอบได้ง่ายดาย
• ใหม่และค่อนข้างที่ยังไม่มีการสำรวจ
• ตัวเลือกสีน้อยเกินไป

.valid-css-oklch-colors {
  --percent-and-degrees: oklch(64% .1 233deg);
  --just-the-degrees: oklch(64 .1 233deg);
  --minimal: oklch(64 .1 233);

  --percent-opacity: oklch(64% .1 233 / 50%);
  --decimal-opacity: oklch(64% .1 233 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklch(100 none none);
  --empty-channels-black: oklch(none none none);
}

ตกลงแล็บ

การสนับสนุนเบราว์เซอร์

• 111
• 111
• 113
• 15.4

แหล่งที่มา

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

ข้อดี

• พื้นที่เริ่มต้นสำหรับภาพเคลื่อนไหวและการประมาณค่าในช่วง
• ความสว่างที่รับรู้ได้แบบเชิงเส้น
• ไม่มีการเปลี่ยนแปลงโทนสีเหมือน LAB
• การไล่ระดับสีที่สม่ำเสมอและรับรู้

ข้อเสีย

• ใหม่และค่อนข้างที่ยังไม่มีการสำรวจ
• ตัวเลือกสีน้อยเกินไป

.valid-css-oklab-colors {
  --percent-and-degrees: oklab(64% -.1 -.1);
  --minimal: oklab(64 -.1 -.1);

  --percent-opacity: oklab(64% -.1 -.1 / 50%);
  --decimal-opacity: oklab(64% -.1 -.1 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklab(100 none none);
  --empty-channels-black: oklab(none none none);
}

จอแสดงผล P3

การสนับสนุนเบราว์เซอร์

• 111
• 111
• 113
• 15

แหล่งที่มา

หมายเหตุ: สีจะอยู่ในDisplay P3 Gamutหรือ 45.5% ของสเปกตรัมที่มองเห็นได้

ขอบเขตการแสดงผล P3 และพื้นที่สีได้รับความนิยมเพราะ Apple รองรับ iMac ของพวกเขามาตั้งแต่ปี 2015 Apple ยังรองรับ Display-p3 ในหน้าเว็บผ่าน CSS ตั้งแต่ปี 2016 ซึ่งเป็นเวลา 5 ปีก่อนเบราว์เซอร์อื่นๆ หากมาจาก sRGB จะเป็นพื้นที่สีที่ดีในการ เริ่มทำงานเมื่อคุณย้ายสไตล์ไปยังช่วงไดนามิกที่สูงขึ้น

ข้อดี

• รองรับการใช้งานที่ดีเยี่ยม ซึ่งถือเป็นเกณฑ์พื้นฐานสำหรับจอแสดงผล HDR
• มีสีมากกว่า sRGB 50%
• เครื่องมือสำหรับนักพัฒนาเว็บมีตัวเลือกสีที่ยอดเยี่ยม

ข้อเสีย

• ซึ่งท้ายที่สุดแล้วก็จะไม่อยู่ในพื้นที่ Rec2020 และ CIE

.valid-css-display-p3-colors {
  --percents: color(display-p3 34% 58% 73%);
  --decimals: color(display-p3 .34 .58 .73);

  --percent-opacity: color(display-p3 34% 58% 73% / 50%);
  --decimal-opacity: color(display-p3 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(display-p3 none none none);
  --empty-channels-black2: color(display-p3);
}

Rec2020

การสนับสนุนเบราว์เซอร์

• 111
• 111
• 113
• 15

แหล่งที่มา

หมายเหตุ: สีจะอยู่ในRec2020 Gamutหรือ 77.6% ของสเปกตรัมที่มองเห็นได้

Rec2020 เป็นส่วนหนึ่งของการเปลี่ยนไปใช้ UHDTV (ทีวีความละเอียดสูงพิเศษ) ซึ่งมาพร้อมสื่อที่มีระดับ 4K และ 8K Rec2020 เป็นอีกขอบเขตหนึ่งที่ใช้ RGB ซึ่งมีขนาดใหญ่กว่า Display-p3 แต่ผู้บริโภคทั่วไปก็ไม่ต่างกันเท่ากับ Display P3

ข้อดี

• สี Ultra HD

ข้อเสีย

• ไม่ค่อยพบได้ในหมู่ผู้บริโภค (ในขณะนี้)
• มักไม่พบในอุปกรณ์เคลื่อนที่หรือแท็บเล็ต

.valid-css-rec2020-colors {
  --percents: color(rec2020 34% 58% 73%);
  --decimals: color(rec2020 .34 .58 .73);

  --percent-opacity: color(rec2020 34% 58% 73% / 50%);
  --decimal-opacity: color(rec2020 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(rec2020 none none none);
  --empty-channels-black2: color(rec2020);
}

A98 RGB

การสนับสนุนเบราว์เซอร์

• 111
• 111
• 113
• 15

แหล่งที่มา

หมายเหตุ: สีจะอยู่ในRGB 98 Gamutหรือ 52.1% ของสเปกตรัมที่มองเห็นได้

Adobe เป็นชื่อย่อของ Adobe 1998 RGB ว่า A98 RGB สร้างขึ้นโดย Adobe เพื่อแสดงสีต่างๆ ที่สามารถหาได้จากเครื่องพิมพ์ CMYK เพราะมีสีมากกว่า sRGB โดยเฉพาะในโทนสีฟ้าและเขียว

ข้อดี

• มีขนาดใหญ่กว่าพื้นที่สี sRGB และ Display P3

ข้อเสีย

• ไม่ใช่พื้นที่ส่วนกลางสำหรับนักออกแบบดิจิทัล
• มีเพียงไม่กี่คนที่โอนจานสีจาก CMYK

.valid-css-a98-rgb-colors {
  --percents: color(a98-rgb 34% 58% 73%);
  --decimals: color(a98-rgb .34 .58 .73);

  --percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(a98-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(a98-rgb none none none);
  --empty-channels-black2: color(a98-rgb);
}

กล้อง RGB ของ Pro

การสนับสนุนเบราว์เซอร์

• 111
• 111
• 113
• 15

แหล่งที่มา

หมายเหตุ: สีจะอยู่ในProPhoto Gamutหรือ 90% ของสเปกตรัมที่มองเห็นได้

พื้นที่ที่กว้างมากซึ่งสร้างโดย Kodak นี้ให้สีหลักที่หลากหลายเป็นพิเศษและมีการปรับโทนสีน้อยที่สุดเมื่อเปลี่ยนความสว่าง และยังอ้างว่าครอบคลุมสีพื้นผิวจริง 100% ตามที่ Michael Pointer ได้บันทึกไว้ในปี 1980

ข้อดี

• สีเปลี่ยนไปเล็กน้อยเมื่อเปลี่ยนความสว่าง
• สีหลักสดใส

ข้อเสีย

• สีประมาณ 13% ของสีที่นำเสนอเป็นจินตนาการ ซึ่งหมายความว่าสีไม่ได้อยู่ในสเปกตรัมที่มองเห็นได้ของมนุษย์

.valid-css-prophoto-rgb-colors {
  --percents: color(prophoto-rgb 34% 58% 73%);
  --decimals: color(prophoto-rgb .34 .58 .73);

  --percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(prophoto-rgb none none none);
  --empty-channels-black2: color(prophoto-rgb);
}

XYZ, XYZ-D50, XYZ-d65

การสนับสนุนเบราว์เซอร์

• 111
• 111
• 113
• 15

แหล่งที่มา

หมายเหตุ: สีอยู่ในช่วงHVS Gamut ซึ่งเป็น 100% ของสเปกตรัมที่มองเห็นของมนุษย์ (HVS)

พื้นที่สี CIE XYZ ครอบคลุมทุกสีที่บุคคลที่มีสายตาปกติเห็นได้ นี่จึงเป็นเหตุผลที่ใช้เป็นการอ้างอิงมาตรฐานสำหรับพื้นที่สีอื่นๆ Y คือความสว่าง X และ Z เป็นสีโครเมียมที่ส่องสว่างได้ไม่เกิน Y

ความแตกต่างระหว่าง d50 และ d65 คือจุดสีขาว โดยที่ d50 ใช้จุดสีขาว d50 และ d65 ใช้จุดสีขาว d65

คำสำคัญ: จุดสีขาวเป็นแอตทริบิวต์ของพื้นที่สี โดยมีสีขาวจริงอยู่ภายในพื้นที่ทำงาน สำหรับหน้าจออิเล็กทรอนิกส์ D65 คือจุดสีขาว ที่พบมากที่สุดและสั้นถึง 6,500 เคลวิน การแปลงสีเป็นสิ่งสำคัญที่จุดสีขาวจะตรงกัน เพื่อไม่ให้ส่งผลต่ออุณหภูมิสี (ความอบอุ่นหรือความเย็น)

ข้อดี

• การเข้าถึงแสงเชิงเส้นมีกรณีการใช้งานที่มีประโยชน์
• เหมาะสำหรับการผสมสีจริง

ข้อเสีย

• ไม่ใช่แบบเชิงเส้นตรงๆ เช่น lch, oklch, lab และ oklab

.valid-css-xyz-colors {
  --percents: color(xyz 22% 26% 53%);
  --decimals: color(xyz .22 .26 .53);

  --percent-opacity: color(xyz .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz none none none);
  --empty-channels-black2: color(xyz);
}

.valid-css-xyz-d50-colors {
  --percents: color(xyz-d50 22% 26% 53%);
  --decimals: color(xyz-d50 .22 .26 .53);

  --percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d50 none none none);
  --empty-channels-black2: color(xyz-d50);
}

.valid-css-xyz-d65-colors {
  --percents: color(xyz-d65 22% 26% 53%);
  --decimals: color(xyz-d65 .22 .26 .53);

  --percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d65 none none none);
  --empty-channels-black2: color(xyz-d65);
}

พื้นที่สีที่กำหนดเอง

ข้อกำหนด CSS Color 5 ยังมี เส้นทางสำหรับสอนให้เบราว์เซอร์ใช้พื้นที่สีที่กำหนดเองอีกด้วย นี่คือโปรไฟล์ ICC ที่บอกวิธีการแก้สีเบราว์เซอร์

@color-profile --foo {
  src: url(path/to/custom.icc);
}

เมื่อโหลดแล้ว ให้เข้าถึงสีจากโปรไฟล์ที่กำหนดเองนี้ด้วยฟังก์ชัน color() และระบุค่าแชแนลสำหรับโปรไฟล์ดังกล่าว

.valid-css-color-from-a-custom-profile {
  background: color(--foo 1 0 0);
}

การประมาณค่าสี

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

เมื่อมีการไล่ระดับสี การประมาณค่าในช่วงคือชุดสีตามรูปร่าง ในส่วนของภาพเคลื่อนไหว จะเป็นการสร้างชุดสีตามช่วงเวลา

@keyframes bg {
  0%, 100% {
    background: orange;
  }
  25% {
    background: magenta;
  }
  50% {
    background: lime;
  }
  75% {
    background: cyan;
  }
}

.circle {
  animation: bg 5s ease-in-out infinite;
}

สำหรับการไล่ระดับสี ช่วงของสีจะแสดงพร้อมกันทั้งหมด

มีอะไรใหม่ในการประมาณค่าสี

เราได้เพิ่มขอบเขตและพื้นที่สีใหม่ๆ เพิ่มตัวเลือกใหม่ๆ สำหรับการประมาณค่าด้วย การเปลี่ยนสีin hslจากสีน้ำเงินเป็นสีขาว จะทำให้ได้สีที่ต่างจาก sRGB มาก

.classic-gradient-in-srgb {
  background: linear-gradient(to right, blue, white);
}

.new-gradient-in-hsl {
  background: linear-gradient(in hsl to right, blue, white);
}

หากไม่เห็นการสาธิต Codepen

จากนั้นจะเกิดอะไรขึ้นหากคุณเปลี่ยนจากสีในช่องว่างหนึ่งเป็นสีใน พื้นที่ที่แตกต่างกันอย่างสิ้นเชิง

.gradient {
  /* oklab will be the common space */
  background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}

.lch {
  /* lch is specified */
  background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}

หากไม่เห็นการสาธิต Codepen

โชคดีสำหรับคุณที่ข้อกำหนด Color 4 มีคำแนะนำเกี่ยวกับเบราว์เซอร์เกี่ยวกับวิธีจัดการกับการประมาณค่าพื้นที่สีข้ามสีเหล่านี้ ในกรณีข้างต้นสำหรับ .gradient เบราว์เซอร์จะสังเกตเห็นพื้นที่สีที่แตกต่างกันและใช้พื้นที่สีเริ่มต้น oklab คุณอาจคิดว่าเบราว์เซอร์จะใช้ lch เป็นพื้นที่สี เนื่องจากเป็นสีแรก แต่กลับไม่ใช้ ผมจึงแสดงการไล่ระดับสีแบบที่ 2 ของ .lch การไล่ระดับสี .lch เป็นการไล่ระดับสีจากพื้นที่สี LCH

ลดแถบสีด้วยสี 16 บิต

ก่อนใช้สีนี้ สีทั้งหมดจะถูกบันทึกในจำนวนเต็ม 32 บิต 1 ช่องเพื่อแสดงถึงช่องทั้ง 4 ช่อง ซึ่งได้แก่ แดง เขียว น้ำเงิน และอัลฟ่า นี่คือ 8 บิตต่อช่องสัญญาณและ 2^ 24 สีที่เป็นไปได้ (ไม่สนใจอัลฟ่า) 2 ^ 24 = 16,777,216, "หลายล้านสี"

หลังจากใช้สีนี้ ค่าจุดลอยตัว 16 บิต 4 ค่า แต่ละช่องจะมีแบบลอยของตัวเองแทนที่จะนำมารวมกัน ซึ่งก็คือข้อมูลรวมแบบ 64 บิต ซึ่งทำให้เกิดสีมากกว่าล้านสี

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

การไล่ระดับสีคือการไล่ระดับสีเมื่อมีสีไม่เพียงพอที่จะสร้างการไล่ระดับสีที่เรียบเนียนและมองเห็น "แถบ" สีได้ แถบสีจะลดลงอย่างมากเมื่ออัปเกรดเป็นสีที่มีความละเอียดสูงขึ้น

แหล่งที่มาของรูปภาพ

การควบคุมการประมาณค่าในช่วง

ระยะทางที่สั้นที่สุดระหว่าง 2 จุดจะเป็นเส้นตรงเสมอ เมื่อใช้การประมาณสี เบราว์เซอร์จะใช้เส้นทางสั้นๆ โดยค่าเริ่มต้น ลองนึกถึงสถานการณ์ที่มี 2 จุดในกระบอกสี HSL การไล่ระดับสีจะได้ขั้นตอนสีโดยเคลื่อนที่ไปตามเส้นที่อยู่ระหว่าง 2 จุด

linear-gradient(to right, #94e99c, #e06242)

(การสาธิตจำลอง)
มุมมองจากด้านบนของทรงกระบอก HSL ที่มีเส้นอยู่ระหว่างจุดสี

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

แต่พื้นที่ตรงกลางของการไล่ระดับสีสูญเสียความคมชัด นั่นเป็นเพราะสีที่สดใสที่สุดอยู่ที่ขอบของรูปร่างพื้นที่สี ไม่ใช่จุดศูนย์กลางที่การประมาณค่าใกล้เดินทางไป ซึ่งมักเรียกว่า "โซนเดด" ปัญหานี้มี 2-3 วิธีที่จะแก้ไขหรือแก้ปัญหานี้ได้

การระบุการหยุดไล่ระดับสีเพิ่มเติมเพื่อหลีกเลี่ยงโซนไม่ทำงาน

เทคนิคในการหลีกเลี่ยงโซนที่ไม่ทำงานในวันนี้คือการเพิ่มตัวหยุดสีเพิ่มเติมในการไล่ระดับสีที่จะนำทางการประมาณค่าในช่วงสีให้อยู่ภายในช่วงที่สว่างของพื้นที่สี จริงๆ แล้ววิธีนี้จะช่วยแก้ปัญหาได้ เนื่องจากการหยุดเพิ่มเติม จะช่วยแก้ไขปัญหาที่ขาดหายได้

มีเครื่องมือไล่ระดับสีที่สร้างโดย Erik Kennedy ที่จะคำนวณตัวหยุดสีเพิ่มเติมให้คุณ เพื่อช่วยคุณหลีกเลี่ยงพื้นที่อับสัญญาณแม้ในพื้นที่สีจะมีแนวโน้มทำให้เกิดจุดด่างดำ เมื่อใช้ค่านี้ การส่งผ่านสีเดียวกันจากตัวอย่างแรก แต่เปลี่ยนการประมาณค่าสีเป็น HSL จะส่งผลให้เกิดสิ่งต่อไปนี้

linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);

(การสาธิตจำลอง)
มุมมองจากด้านบนของทรงกระบอก HSL ที่มีเส้นโค้งและมีจุดสี 9 จุด

ด้วยจุดหยุดที่มีการนำทาง การประมาณค่าจะไม่เป็นเส้นตรงอีกต่อไป แต่จะปรากฏในบริเวณรอบๆ บริเวณที่เสียหาย ซึ่งจะรักษาความอิ่มตัวของสี ซึ่งส่งผลให้มีการไล่ระดับสีที่มีชีวิตชีวามากขึ้น

แม้ว่าเครื่องมือจะทำงานได้ดี แต่จะเกิดอะไรขึ้นหากคุณสามารถควบคุม CSS ให้คล้ายคลึงหรือมีประสิทธิภาพยิ่งขึ้นได้

การกำหนดการประมาณค่าสี

ในสีที่ 4 มีการเพิ่มความสามารถในการควบคุมกลยุทธ์การประมาณค่าสีและเป็นวิธีใหม่ในการหลบเลี่ยง (:wink:) บริเวณที่ไม่ทำงาน ลองนึกถึงมุมของโทนสีแล้วลองพิจารณาการไล่ระดับสีแบบ 2 จุด ซึ่งจะเปลี่ยนมุมเท่านั้น โดยจะเปลี่ยนโทนสีจาก 140deg เป็น 240deg

การประมาณค่าในช่วงโทนสีที่สั้นหรือยาว

โดยค่าเริ่มต้น การไล่ระดับสีจะใช้เส้นทาง shorter ที่สามารถวาดได้ เว้นแต่คุณจะกำหนดให้ใช้เส้นทาง longer ตัวเลือกการประมาณค่าสีจะกำหนดทิศทางการหมุนมุม เช่น บอกให้คนหันซ้าย แทนที่จะขวา (หรือ Zoolander)

ในภาพตัวอย่างด้านบนเกี่ยวกับระยะการประมาณค่าสี เราได้จำลองเส้นทางสั้นและเส้นทางยาวเพื่อแสดงให้เห็นความแตกต่างนี้ ระยะทางสั้นจะทำให้มีเฉดสีน้อยกว่าเพราะเป็นระยะทางที่เคลื่อนที่ผ่านระยะทางน้อยที่สุดเท่าที่จะเป็นไปได้ โดยระยะทางยาวจะเดินทางผ่านเฉดสีมากกว่า

การเพิ่มกับการลดการประมาณค่าสี

มีกลยุทธ์การประมาณค่าสีอีก 2 แบบในสี 4 แต่มีไว้สำหรับพื้นที่สีทรงกระบอกโดยเฉพาะ สำหรับภาพ 2 สีจากตัวอย่างก่อนหน้านี้ ภาพจะแสดงวิธีการทำงานของการเพิ่มขึ้นและลดลง

Codepen ข้างต้นใช้ ColorJS เพื่อแสดงผลลัพธ์ที่คาดหวัง CSS ที่คุณจะเขียนเพื่อให้ได้ผลลัพธ์เดียวกันโดยไม่ต้องมีไลบรารี JavaScript จะเป็นดังนี้

.longer-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl longer hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

.decreasing-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl decreasing hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

สำหรับการปิดค่าการประมาณค่าสี ลองใช้พื้นที่สนุกๆ เพื่อเปลี่ยนโทนสีระหว่างการหยุดสี 2 ช่วงและดูผลของตัวเลือกการประมาณค่าสี ตลอดจนดูว่าพื้นที่สีเปลี่ยนผลลัพธ์การไล่ระดับสีอย่างไร เอฟเฟกต์จะแตกต่างกันอย่างมาก ลองคิดว่านี่เป็นเทคนิคใหม่ 4 แบบที่เพิ่งจะเพิ่มลงในเครื่องมือสีของคุณ

การไล่ระดับสีในพื้นที่สีต่างๆ

พื้นที่สีแต่ละพื้นที่จะมีรูปร่างและการจัดเรียงสีที่ไม่ซ้ำกัน จะทำให้เกิดการไล่ระดับสีที่แตกต่างกัน ดูตัวอย่างด้านล่าง โดยเฉพาะที่ "น้ำเงินไปขาว" ลองดูว่าพื้นที่สีแต่ละพื้นที่จะจัดการกับความแตกต่างนี้อย่างไร สังเกตตัวเลขที่เปลี่ยนเป็นสีม่วง ตรงกลาง ซึ่งเรียกว่า "hue Shift" ระหว่างการประมาณค่าในช่วง

หากไม่เห็นการสาธิต Codepen

รูปภาพที่แสดงเป็นเพียง 1 ในตัวอย่างจำนวนมากจาก Codepen ขอแนะนำให้คุณลองใช้ Canary หรือ Safari Tech Preview เพื่อลองดูด้วยตัวคุณเอง

การไล่ระดับสีบางส่วนในพื้นที่เหล่านี้จะมีสีสันสดใสมากกว่าแบบอื่นๆ หรือเคลื่อนผ่านโซนที่เสียหายน้อยกว่า พื้นที่ทำงานอย่าง lab จะแพคสีเข้าด้วยกันในลักษณะที่ปรับความอิ่มตัวของสี ซึ่งตรงข้ามกับพื้นที่ที่เพิ่มประสิทธิภาพให้มนุษย์เขียนสีในรูปแบบ hwb()

.hwb {
  background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}

การสาธิตด้านบนแม้จะแสดงผลลัพธ์อย่างละเอียดยิ่งขึ้น แต่ก็แสดงให้เห็นว่ามีการประมาณค่าในห้องทดลองที่สม่ำเสมอกว่า ไวยากรณ์ของ Lab อ่านได้ไม่ง่ายนัก แต่มีตัวเลขติดลบที่ไม่คุ้นเคยเมื่อมาจาก RGB หรือ hsl ข่าวดี เราสามารถใช้ hwb สำหรับไวยากรณ์ที่คุ้นเคยได้ แต่ขอให้ใช้การไล่ระดับสีภายในพื้นที่สีอื่น เช่น oklab ทั้งหมด

.hwb {
  background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}

หากไม่เห็นการสาธิต Codepen

ตัวอย่างนี้ใช้สีเดียวกันใน hwb แต่ระบุพื้นที่สีสำหรับการประมาณค่าเป็น hwb หรือ oklab hwb เป็นพื้นที่สีที่ดีสำหรับความสดชื่นสูงแต่อาจมีจุดอับแสงหรือจุดสว่าง (ดูฮอตสปอตสีน้ำเงินเขียวในตัวอย่างด้านบน) oklab เหมาะสำหรับการไล่ระดับสีแบบเส้นตรงแบบรับรู้สีที่อิ่มตัว ฟีเจอร์นี้สนุกมาก คุณจะได้ลองใช้พื้นที่สีต่างๆ เพื่อดูว่าการไล่ระดับสีแบบใดที่คุณชอบมากที่สุด

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

หากไม่เห็นการสาธิต Codepen

การปรับขอบเขต

มีบางสถานการณ์ที่สีอาจขอข้อมูลบางอย่างนอกขอบเขต ลองใช้สีต่อไปนี้

rgb(300 255 255)

ค่าสูงสุดสำหรับช่องสีในพื้นที่สี rgb คือ 255 แต่มีการระบุ 300 สำหรับสีแดงที่นี่ สิ่งที่เกิดขึ้น การบีบขอบเขต

การยึดคือการนําข้อมูลเพิ่มเติมออก 300 จะกลายเป็น 255 ภายในเครื่องมือสี ตอนนี้สีก็ถูกบีบให้อยู่ภายในพื้นที่แล้ว

การเลือกพื้นที่สี

หลายคนหลังจากที่ได้เรียนรู้เกี่ยวกับพื้นที่สีและผลกระทบเหล่านี้แล้ว รู้สึกสับสนและอยากทราบว่าควรเลือก "สี" แบบใด จากการศึกษาและประสบการณ์ ผมไม่ได้เห็นว่าพื้นที่สีเดียวเป็นพื้นที่สีเดียวสำหรับงานทั้งหมด แต่ละแบบจะมีช่วงเวลาที่สร้างผลลัพธ์ที่ต้องการได้

หากมีพื้นที่ทำงานที่ดีที่สุดเพียงแห่งเดียว ก็คงไม่มีพื้นที่ทำงานใหม่ๆ เปิดตัวมากนัก

แต่ผมบอกได้ว่าพื้นที่ CIE ซึ่งได้แก่ lab, oklab, lch และ oklch คือจุดเริ่มต้นของฉัน ถ้าผลลัพธ์ของพวกเขาไม่ใช่สิ่งที่ผมต้องการ ผมก็จะทดสอบพื้นที่อื่น สำหรับการผสมสีและสร้างการไล่ระดับสี ฉันยอมรับตัวเลือกข้อกำหนดเริ่มต้นของ oklab สำหรับระบบสีและสี UI โดยรวม ผมชอบ oklch

นี่เป็นบทความบางส่วนที่มีคนแชร์กลยุทธ์สี ที่อัปเดตใหม่สำหรับพื้นที่สีและฟีเจอร์ใหม่ๆ เหล่านี้ ตัวอย่างเช่น Andrey Sitnik อาจพูดถึง oklch ทั้งหมด คุณอาจโน้มน้าวให้คุณทำแบบเดียวกันนี้

1. OKLCH ใน CSS: สาเหตุที่เราย้ายจาก RGB และ HSL โดย Andrey Sitnik
2. รูปแบบสี โดย Josh W. โคม่า
3. OK, OKLCH โดย Chris Coyier

การย้ายข้อมูลเป็นสี HD CSS

กลยุทธ์หลัก 2 ประการในการอัปเดตสีของโปรเจ็กต์เว็บเพื่อรองรับการแสดงผลแบบกว้างมีดังนี้

1. การเสื่อมสภาพอย่างนุ่มนวล
   ใช้พื้นที่สีใหม่ แล้วปล่อยให้เบราว์เซอร์และระบบปฏิบัติการทราบว่าจะแสดงสีใดตามความสามารถในการแสดงผล

2. การเพิ่มประสิทธิภาพแบบต่อเนื่อง
   ใช้ @supports และ @media เพื่อประเมินความสามารถของเบราว์เซอร์ของผู้ใช้ และหากเป็นไปตามเงื่อนไข ให้ใส่สีขอบเขตกว้าง

หากเบราว์เซอร์ไม่เข้าใจสี display-p3 ให้ทําดังนี้

color: red;
color: color(display-p3 1 0 0);

หากเบราว์เซอร์เข้าใจสีdisplay-p3 ให้ทําดังนี้

color: red;
color: color(display-p3 1 0 0);

แต่ละรูปแบบก็มีทั้งข้อดีและข้อเสีย มาดูข้อดีและข้อเสียแบบคร่าวๆ กัน

การเสื่อมสภาพอย่างนุ่มนวล

• ข้อดี
  • เส้นทางที่ง่ายที่สุด
  • เบราว์เซอร์จะแมปหรือปรับเป็น sRGB หากไม่ใช่การแสดงผลขอบเขตกว้าง ดังนั้นเบราว์เซอร์จึงมีหน้าที่ความรับผิดชอบ
• ข้อเสีย
  • เบราว์เซอร์อาจจำกัดขอบเขตหรือแมปขอบเขตเป็นสีที่คุณไม่ชอบ
  • เบราว์เซอร์อาจไม่เข้าใจคำขอสีและจะล้มเหลวโดยสิ้นเชิง อย่างไรก็ตาม สามารถลดปัญหาได้ด้วยการระบุสี 2 ครั้ง ซึ่งจะทำให้การเรียงซ้อนสำรองเป็นสีก่อนหน้าที่เข้าใจได้

การเพิ่มประสิทธิภาพแบบต่อเนื่อง

• ข้อดี
  • ควบคุมได้มากขึ้นด้วยความคมชัดของสีที่มีการจัดการ
  • กลยุทธ์เสริมที่ไม่ส่งผลต่อสีปัจจุบัน
• ข้อเสีย
  • คุณต้องจัดการไวยากรณ์ของสี 2 แบบแยกกัน
  • คุณจะต้องจัดการขอบเขตสี 2 ช่วงสี

กำลังตรวจหาการรองรับขอบเขตและพื้นที่สี

เบราว์เซอร์ช่วยให้ตรวจสอบการรองรับขอบเขตที่กว้างขึ้นและการรองรับไวยากรณ์สีจาก CSS และ JavaScript อย่างไรก็ตาม เราไม่ทำให้มีเฉดสีเช่นนี้เลย แต่เราได้ให้คำตอบทั่วไปไว้เพื่อรักษาความเป็นส่วนตัวของผู้ใช้ แต่เรามีการรองรับพื้นที่สีแบบที่แน่นอน เนื่องจากไม่ได้มีแค่ความสามารถของฮาร์ดแวร์ของผู้ใช้อย่างขอบเขต

การค้นหาการสนับสนุนขอบเขตสี

ตัวอย่างโค้ดต่อไปนี้จะตรวจสอบช่วงสีของผู้ใช้ที่เข้าชมบนจอแสดงผล

กำลังตรวจสอบจาก CSS

คำถามด้านการสนับสนุนที่เจาะจงน้อยที่สุดคือคำค้นหาสื่อ dynamic-range ดังนี้

การสนับสนุนเบราว์เซอร์

• 98
• 98
• 100
• 13.1

แหล่งที่มา

@media (dynamic-range: high) {
  /* safe to use HD colors */
}

คุณสามารถขอการสนับสนุนโดยประมาณหรือมากกว่านั้นได้โดยใช้คำค้นหาสื่อของ color-gamut ดังนี้

การสนับสนุนเบราว์เซอร์

• 58
• 79
• 110
• 10

แหล่งที่มา

@media (color-gamut: srgb) {
  /* safe to use srgb colors */
}

@media (color-gamut: p3) {
  /* safe to use p3 colors */
}

@media (color-gamut: rec2020) {
  /* safe to use rec2020 colors */
}

มีคำค้นหาสื่อเพิ่มเติม 2 รายการในการตรวจสอบการสนับสนุน ได้แก่

1. @media (color)
2. @media (color-index)

กำลังตรวจสอบจาก JavaScript

สำหรับ JavaScript ฟังก์ชัน window.matchMedia() สามารถเรียกใช้และผ่านคำค้นหาสื่อเพื่อการประเมิน

การสนับสนุนเบราว์เซอร์

• 9
• 12
• 6
• 5.1

แหล่งที่มา

const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;

console.log(hasHighDynamicRange); // true || false

const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;

console.log(hasP3Color); // true || false

สามารถคัดลอกรูปแบบข้างต้นสำหรับคำค้นหาสื่อที่เหลือ

การค้นหาการสนับสนุนพื้นที่สี

ตัวอย่างโค้ดต่อไปนี้จะตรวจสอบเบราว์เซอร์ของผู้ใช้และการเลือกพื้นที่สีที่จะใช้

กำลังตรวจสอบจาก CSS

คุณสอบถามการสนับสนุนพื้นที่สีส่วนบุคคลได้โดยใช้คำค้นหา @supports ดังนี้

การสนับสนุนเบราว์เซอร์

• 28
• 12
• 22
• 9

แหล่งที่มา

@supports (background: rgb(0 0 0)) {
  /* rgb color space supported */
}


@supports (background: color(display-p3 0 0 0)) {
  /* display-p3 color space supported */
}


@supports (background: oklch(0 0 0)) {
  /* oklch color space supported */
}

กำลังตรวจสอบจาก JavaScript

สำหรับ JavaScript ฟังก์ชัน CSS.supports() จะเรียกและส่งพร็อพเพอร์ตี้และคู่ค่าเพื่อดูว่าเบราว์เซอร์เข้าใจหรือไม่

CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')

การรวมฮาร์ดแวร์และการตรวจสอบการแยกวิเคราะห์เข้าด้วยกัน

ในระหว่างที่รอแต่ละเบราว์เซอร์ใช้ฟีเจอร์สีใหม่เหล่านี้ เป็นความคิดที่ดีที่จะตรวจสอบทั้งความสามารถของฮาร์ดแวร์และความสามารถในการแยกสี บ่อยครั้งที่ฉันใช้ในการเปลี่ยนสีเป็นความละเอียดสูง

:root {
  --neon-red: rgb(100% 0 0);
  --neon-blue: rgb(0 0 100%);
}

/* is the display HD? */
@media (dynamic-range: high) {

  /* does this browser understand display-p3? */
  @supports (color: color(display-p3 0 0 0)) {

    /* safe to use display-p3 colors */
    --neon-red: color(display-p3 1 0 0);
    --neon-blue: color(display-p3 0 0 1);
  }
}

แก้ไขข้อบกพร่องของสีด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ได้รับการอัปเดตและมีเครื่องมือใหม่ๆ เพื่อช่วยนักพัฒนาซอฟต์แวร์ในการสร้าง แปลง และแก้ไขข้อบกพร่องสี HD

อัปเดตตัวเลือกสีแล้ว

ตอนนี้ตัวเลือกสีรองรับพื้นที่สีใหม่ทั้งหมดแล้ว ทำให้ผู้เขียนโต้ตอบกับค่านิยมของช่องได้เหมือนที่ควร

ขอบเขตของขอบเขต

มีการเพิ่มเส้นแบ่งขอบเขตขอบเขตโดยลากเส้นระหว่าง srgb กับ display-p3 gamut แสดงให้เห็นอย่างชัดเจนว่าภายในสีที่เลือกอยู่ในขอบเขตของสีใด

วิธีนี้จะช่วยให้ผู้เขียนแยกความแตกต่างระหว่างสี HD และสีที่ไม่ใช่ HD ได้ และจะมีประโยชน์อย่างยิ่งเมื่อทำงานกับฟังก์ชัน color() และพื้นที่สีใหม่ เนื่องจากสามารถสร้างสีได้ทั้งแบบที่ไม่ใช่ HD และ HD หากต้องการตรวจสอบว่าสีอยู่ในขอบเขตใด ให้ป๊อปอัปตัวเลือกสี แล้วดูได้เลย!

กำลังแปลงสี

เครื่องมือสำหรับนักพัฒนาเว็บสามารถแปลงสีระหว่างรูปแบบที่รองรับ เช่น hsl, hwb, rgb และ hex มาหลายปีแล้ว shift + click บนตัวอย่างสีสี่เหลี่ยมจัตุรัสในแผงรูปแบบเพื่อดำเนินการแปลงนี้ เครื่องมือสีใหม่ไม่เพียงแค่วนดู Conversion เท่านั้น แต่จะแสดงป๊อปอัปที่ผู้เขียนสามารถดูและเลือก Conversion ที่ต้องการได้

ขณะทำ Conversion คุณต้องทราบว่ามีการตัด Conversion ออกให้พอดีกับพื้นที่หรือไม่ ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บมีไอคอนคำเตือนเป็นสีที่แปลงแล้วเพื่อแจ้งเตือนคุณเกี่ยวกับการตัดคลิปนี้

สำรวจฟีเจอร์การแก้ไขข้อบกพร่อง CSS เพิ่มเติมในเครื่องมือสำหรับนักพัฒนาเว็บในประกาศล่าสุด

บทสรุป

พื้นที่สีที่ไม่ใช่ sRGB ในเว็บเพิ่งเปิดตัวไปได้ไม่นาน แต่ผมเชื่อว่าเราจะเห็นการใช้งานจากนักออกแบบและนักพัฒนาซอฟต์แวร์มากขึ้นเมื่อเวลาผ่านไป เช่น การรู้ว่าควรสร้างระบบการออกแบบบนพื้นที่สีใดถือเป็นเครื่องมือที่แข็งแกร่งในการเป็นเครื่องมือสำหรับผู้สร้าง พื้นที่สีแต่ละพื้นที่มีฟีเจอร์เฉพาะตัวและเหตุผลที่เพิ่มไปยังข้อกำหนด CSS และสามารถเริ่มต้นด้วยจุดเล็กๆ น้อยๆ เหล่านี้และเพิ่มได้ตามต้องการ

สนุกกับการเล่นของเล่นสีใหม่ๆ เหล่านี้! ความแปรปรวนและการปรับเปลี่ยนที่สม่ำเสมอ มีความมีชีวิตชีวามากขึ้น การประมาณค่าที่สอดคล้องกัน และการมอบประสบการณ์ที่มีสีสันมากขึ้นให้กับผู้ใช้

อ่านเพิ่มเติม

• https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
• https://www.w3.org/Graphics/Color/Workshop/slides/lilley/lilley.html
• https://darker.ink/writings/Towards-richer-colors-on-the-Web
• https://bottosson.github.io/posts/colorpicker/
• https://www.w3.org/Graphics/Color/Workshop/slides/Erias.pdf
• https://atmos.style/blog/lch-color-space
• https://stripe.com/blog/accessible-color-systems
• https://cran.r-project.org/web/packages/colordistance/vignettes/color-spaces.html
• https://afc163.github.io/color3d/
• https://github.com/nschloe/colorio#gamut-visualization
• https://www.learnui.design/tools/gradient-generator.html
• https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
• https://www.w3.org/TR/css-color-4/
• https://www.w3.org/TR/css-color-5/
• https://en.wikipedia.org/wiki/CIE_1931_color_space
• https://www.joshwcomeau.com/css/color-formats/
• https://ciechanow.ski/color-spaces/

บทความเพิ่มเติมเกี่ยวกับระดับสี 5

• ไวยากรณ์สีสัมพัทธ์ CSS
• การผสมสีของ CSS