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
นอกจากนี้ การไล่ระดับสีและการผสมผสานยังได้รับการอัปเกรดด้วย เช่น การรองรับพื้นที่สี ตัวเลือกการปรับสี และลดแถบสี
ภาพต่อไปนี้แสดงการอัปเกรดที่หลากหลาย
https://codepen.io/web-dot-dev/pen/poZgXQb
ปัญหาเรื่องสีและเว็บก็คือ CSS ยังไม่พร้อมใช้งานความละเอียดสูง ในขณะที่จอแสดงผลส่วนใหญ่อยู่ในกระเป๋า รอบ หรือติดตั้งบนผนัง มีขอบเขตกว้าง พร้อมให้ใช้สีความละเอียดสูง ความสามารถในการแสดงสีบนหน้าจอ เพิ่มขึ้นเร็วกว่า CSS ตอนนี้ CSS พร้อมช่วยคุณแล้ว
มีอะไรมากกว่าแค่ "สีอีกมากมาย" เมื่อเอกสารเหล่านี้สิ้นสุดลง คุณจะสามารถระบุสีเพิ่มเติม ปรับปรุงการไล่ระดับสี และเลือกพื้นที่สีและช่วงสีที่เหมาะสมที่สุดสำหรับแต่ละงานได้
ขอบเขตสีคืออะไร
ขอบเขตแสดงถึงขนาดของบางสิ่ง วลี "นับล้านสี" เป็นความคิดเห็นเกี่ยวกับขอบเขตของการแสดงผลหรือช่วงสีที่หน้าจอต้องเลือก ในภาพต่อไปนี้ ระบบจะเปรียบเทียบ 3 ขอบเขต และขนาดยิ่งใหญ่ยิ่งแสดงสีมาก
ขอบเขตสีก็มีชื่อได้เช่นกัน เช่น ระหว่างบาสเกตบอลกับเบสบอล หรือถ้วยกาแฟเวนเต้กับแกรนด์ ชื่อขนาดจะช่วยให้ผู้คนสื่อสารได้ การเรียนรู้ชื่อขอบเขตสีเหล่านี้จะช่วยให้คุณสื่อสารและ เข้าใจช่วงสีต่างๆ ได้อย่างรวดเร็ว
บทความนี้จะอธิบายขอบเขตสีก่อนหน้านี้ อ่านเกี่ยวกับ 7 ขอบเขตใหม่ได้ในเข้าถึงสีเพิ่มเติมและพื้นที่ทำงานใหม่
ขอบเขตการมองเห็นของมนุษย์
ขอบเขตสีมักถูกเปรียบเทียบกับขอบเขตการมองเห็นของมนุษย์ นั่นคือสีทั้งหมดที่เราคิดว่ามนุษย์มองเห็น HVS มักจะแสดงด้วยแผนภาพสี ดังนี้
รูปร่างด้านนอกสุดคือสิ่งที่เราเห็นเป็นมนุษย์ และสามเหลี่ยมด้านในคือช่วงฟังก์ชัน rgb() หรือพื้นที่สี sRGB
ตามที่คุณเห็นสามเหลี่ยมด้านบน เป็นการเปรียบเทียบขนาดขอบเขต จากนั้นคุณจะเห็นสามเหลี่ยมด้านล่าง นี่เป็นวิธีการสื่อสารของอุตสาหกรรมเกี่ยวกับขอบเขตสี และเปรียบเทียบขอบเขตสี
พื้นที่สีคืออะไร
พื้นที่สีคือการจัดเรียงช่วงสี สร้างรูปร่างและวิธีเข้าถึงสี ซึ่งส่วนใหญ่จะมีรูปทรง 3 มิติที่เรียบง่าย เช่น ลูกบาศก์หรือทรงกระบอก การจัดเรียงสีนี้กำหนดว่าสีใดอยู่ติดกัน และวิธีการในการเข้าถึงและการเติมสี
RGB เป็นเหมือนพื้นที่สีสี่เหลี่ยมผืนผ้า ซึ่งเข้าถึงสีได้โดยการระบุพิกัดบน 3 แกน HSL คือพื้นที่สีทรงกระบอก ซึ่งมีการเข้าถึงสีด้วยมุมเฉดสีและพิกัดบน 2 แกน
ข้อกำหนดระดับ 4 แนะนำพื้นที่สีใหม่ 12 รายการ สำหรับการค้นหาสี ต่อไปนี้คือพื้นที่สี 4 พื้นที่ก่อนหน้านี้
ขอบเขตสีและสรุปพื้นที่สี
พื้นที่สีคือการจับคู่สี โดยที่ขอบเขตสีคือช่วงของสี ลองพิจารณาขอบเขตสีซึ่งเป็นจำนวนอนุภาคทั้งหมดและพื้นที่สีเป็นขวดที่กักเก็บอนุภาคช่วงดังกล่าว
นี่คือภาพแบบอินเทอร์แอกทีฟของ 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 ระดับ 4 จาก W3C
โมดูลสี CSS ระดับ 5 จาก W3C
และเครื่องมือต่างๆ: