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

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

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

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

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

Chrome รองรับช่วงสีและ พื้นที่สี CSS Color 4 ขณะนี้ CSS สามารถรองรับจอแสดงผล HD (ความละเอียดสูง) โดยระบุสีจากขอบเขต HD ขณะเดียวกันก็มอบพื้นที่สีที่มีความเชี่ยวชาญพิเศษด้วย

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

ภาพรวม

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

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

นอกจากนี้ การไล่ระดับสีและการผสมผสานยังได้รับการอัปเกรดด้วย เช่น การรองรับพื้นที่สี ตัวเลือกการปรับสี และลดแถบสี

ภาพต่อไปนี้แสดงการอัปเกรดที่หลากหลาย

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

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

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

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

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

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

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

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

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

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

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

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

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

ข้อกำหนดระดับ 4 แนะนำพื้นที่สีใหม่ 12 รายการ สำหรับการค้นหาสี ต่อไปนี้คือพื้นที่สี 4 พื้นที่ก่อนหน้��นี้

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

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

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

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

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

รีวิวพื้นที่สีแบบคลาสสิก {#classic-color-spaces}

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

ตั้งแต่ช่วงทศวรรษที่ 2000 คุณสา��ารถใช้ค่าต่อไปนี้สำหรับพร็อพเพอร์ตี้ CSS ที่ยอมรับสีเป็นค่า เช่น เลขฐานสิบหก (เลขฐานสิบหก), rgb(), rgba(), ตามชื่อ เช่น hotpink หรือกับคีย��เ��ิ��์�� เช่น currentColor

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

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

เลขฐานสิบหก

พื้นที่สีแบบเลขฐาน 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

พื้นที่สี 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

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

พื้นที่สีแบบ 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%);
}

ขั้นตอนถัดไป

อ่านเกี่ยวกับพื้นที่สี ไวยากรณ์ และเครื่องมือใหม่ๆ แล้วดูวิธีเปลี่ยนไปใช้สีแบบ HD

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

แหล่งข้อมูล

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

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

และสามารถหาอ่านเพิ่มเติมได้ในเว็บต่อไปนี้

• โมดูลสี CSS ระดับ 4 จาก W3C

• โมดูลสี CSS ระดับ 5 จาก W3C

• สี LCH ใน CSS: อะไร ทำไม และอย่างไร

• ดีกว่า Lab หรือ การลดขอบเขต: CIE Lab และ OKLab

• นำเสนอสีสันที่สมจริงบนเว็บ

• Okhsv และ Okhsl: พื้นที่สีใหม่ 2 รายการสำหรับการเลือกสี

• เพื่อให้ได้มีสีสันมากขึ้นใน Chromium (PDF)

• LCH คือพื้นที่สีที่ดีที่สุด

• การออกแบบระบบสีที่เข้าถึงได้

• Color Spaces โดย Hannah Weller

• สีแบบขอบเขตกว้างใน CSS ด้วย Display-P3

• พื้นที่สี CIE 1931

• รูปแบบสีใน CSS

• Color Spaces โดย Bartosz Ciechanowski

และเครื่องมือต่างๆ:

• afc163.github.io/color3d/
• การแสดงภาพขอบเขต
• โปรแกรมสร้างการไล่ระดับสีสีสดใส