CSS Color 4 มีเครื่องมือและความสามารถเกี่ยวกับสีที่หลากหลายบนเว็บและอีกมากมาย สี ฟังก์ชันการปรับแต่ง และการไล่ระดับสีที่ดีขึ้น
สำหรับผู้ที่มีอายุเกิน 25 ปี sRGB
(สีน้ำเงินอมเขียวมาตรฐานสีแดง) เป็นสีเพียงสีเดียว
gamut สำหรับการไล่ระดับสีและสี CSS พร้อมพื้นที่สี
ที่อยู่ในนั้น เช่น rgb()
, hsl()
และเลขฐานสิบหก เป็นสีที่ใช้มากที่สุด
ความสามารถในการครอบคลุมระหว่างจอแสดงผล ตัวส่วนร่วม เราเติบโตแล้ว
เคยชินกับการระบุสีในรูปของสี
![รูปแบบสีที่ได้รับความนิยมมากที่สุดตามเปอร์เซ็นต์ของจำนวนครั้งที่ปรากฏ](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/the-popular-color-format-b5aab67b4d3de.png?authuser=0000&hl=th)
เนื่องจากจอแสดงผลสามารถแสดงสีได้หลากหลายยิ่งขึ้น CSS จึงต้อง วิธีระบุสีจากภายในช่วงที่กว้างขึ้น รูปแบบสีปัจจุบัน ไม่มีภาษาสำหรับช่วงสีที่กว้าง
หาก CSS ไม่เคยอัปเดต CSS ดังกล่าวจะอยู่ในช่วงสียุค 90 ตลอดไป และไม่ตรงกับข้อเสนอในวงกว้างที่พบในรูปภาพและวิดีโอ ถูกดักไว้ แสดงเฉพาะ สี 30% ที่ตามนุษย์เห็นได้ ขอบคุณ Color Level 4 ของ CSS ที่ช่วยเราแก้ปัญหา เขียนโดย Lea Verou และ Chris Liley เป็นหลัก
Chrome รองรับหลากหลายภาษา CSS Color 4 และ พื้นที่สี CSS รองรับ HD (ความละเอียดสูง) ได้แล้ว จะปรากฏขึ้น โดยระบุสีจากช่วงระดับ HD และยังให้พื้นที่สีที่มี ความเชี่ยวชาญพิเศษ
ทดลองด้วยตัวคุณเอง
คู่มือนี้ประกอบด้วย 3 ส่วน โปรดอ่านต่อไปเพื่อจดจำว่าสีจะปรากฏที่ใด จากนั้นให้ทำดังนี้ อ่านสถานที่ที่สีไปไหนมาและ วิธีจัดการสีในอนาคตโดยเปลี่ยนไปใช้สี HD
ภาพรวม
ในเบราว์เซอร์ที่สนับสนุน จะมีสีให้เลือกมากขึ้น 50% ถ้าคุณคิดว่า ล้านสีฟังดูคล้ายมาก รอจนกว่าคุณจะเห็น ที่จะแสดงพื้นที่ใหม่เหล่านี้ได้ด้วย และให้คำนึงถึงการไล่ระดับสีทั้งหมดที่ แถบสี เพราะไม่เพียงพอ ความลึกบางส่วน คุณก็แก้ไขปัญหาได้เช่นกัน
นอกจากสีที่เพิ่มมากขึ้น เราคิดว่าสีที่สดใสที่สุดที่จอแสดงผลนั้นทำได้ พื้นที่สีใหม่มีเครื่องมือและวิธีการที่ไม่เหมือนใครสำหรับการจัดการและสร้าง ระบบสี เช่น เมื่อก่อนเรามี HSL และ "ความสว่าง" ช่อง ซึ่งเป็นนักพัฒนาเว็บที่ดีที่สุด ตอนนี้ใน CSS เรามี "perceptual lightness" ของ LCH
![ตารางสี 2 ตารางแสดงคู่กัน ตารางแรกจะแสดง HSL
รุ้งมีสีประมาณ 10 สี และถัดจากนั้นจะเป็นโทนสีเทา
ความสว่างของสี HSL ตารางที่ 2 จะแสดงสายรุ้ง LCH
ฉูดฉาดน้อยกว่ามาก แต่สีโทนสีเทาที่อยู่ข้างๆ จะสม่ำเสมอ
วิธีนี้แสดงให้เห็นว่า LCH มีค่าความสว่างคงที่ที่ดีต่อสุขภาพ ในขณะที่ HSL ยังไม่มีค่า](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/two-tables-color-are-sid-d7829619631b7.png?authuser=0000&hl=th)
นอกจากนี้ การไล่ระดับสีและการผสมยังมีการอัปเกรดบางอย่าง เช่น การรองรับพื้นที่สี โทนสี ตัวเลือกการประมาณค่า และแถบสีน้อยลง
รูปภาพต่อไปนี้แสดงการอัปเกรดแบบผสมบางส่วน
![](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/kleavbJG5AA2namwim8y.png?authuser=0000&hl=th)
https://codepen.io/web-dot-dev/pen/poZgXQb
ปัญหาเรื่องสีและเว็บคือ CSS ไม่ได้รองรับความละเอียดสูง ในขณะที่จอแสดงผลที่ผู้คนส่วนใหญ่ติดกระเป๋า ติดบนผนัง หรือติดไว้กับที่บนผนัง มีขอบเขตกว้าง สีความละเอียดสูงพร้อมแล้ว ความสามารถในการแสดงสีของจอแสดงผล เติบโตเร็วกว่า CSS ตอนนี้ CSS พร้อมก้าวทันเทคโนโลยีใหม่ๆ แล้ว
มีมากกว่าแค่ "สีที่มากขึ้น" ในตอนท้ายของเอกสารเหล่านี้ คุณจะสามารถระบุสีเพิ่มเติม ปรับปรุงการไล่ระดับสี และเลือกสีที่ดีที่สุด พื้นที่สีและขอบเขตสีสำหรับแต่ละงาน
ขอบเขตสีคืออะไร
ขอบเขตแสดงถึงขนาดของบางสิ่ง วลี "นับล้านของสี" เป็น ความคิดเห็นเกี่ยวกับขอบเขตของจอแสดงผลหรือช่วงสีต้องเลือก จาก ในรูปภาพต่อไปนี้ มีการเปรียบเทียบ 3 ขอบเขต และขนาดที่ใหญ่ขึ้น ยิ่งมีสีมากเท่าไร
ขอบเขตของสีสามารถมีชื่อได้เช่นกัน เช่น บาสเกตบอล กับ เบสบอล หรือ การระบายอากาศระหว่างถ้วยกาแฟกับความแกรนด์ ชื่อขนาดสามารถช่วยให้ผู้ใช้ สื่อสาร การเรียนรู้ชื่อขอบเขตสีเหล่านี้จะช่วยให้คุณสื่อสารได้อย่างรวดเร็ว เข้าใจช่วงของสีต่างๆ
บทความนี้จะอธิบายช่วงสีก่อนหน้านี้ คุณสามารถอ่านเกี่ยวกับ 7 ขอบเขตใหม่ในหัวข้อเข้าถึงสีและพื้นที่ใหม่ๆ ได้มากขึ้น
ขอบเขตการมองเห็นของมนุษย์
ขอบเขตของสีมักถูกเปรียบเทียบกับขอบเขตของการมองเห็นมนุษย์ ทั้งหมด เป็นสีที่เราเชื่อว่าดวงตามนุษย์มองเห็นได้ HVS มักจะแสดงด้วย แผนภาพของสี ดังนี้
![รูปรองเท้าม้าที่มีการไล่ระดับสีสีสันสดใสโดยมีรูปสามเหลี่ยมกลวงอยู่ตรงกลาง](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/a-horse-shoe-shape-is-fil-c574400e794bc.png?authuser=0000&hl=th)
รูปร่างด้านนอกสุดคือรูปร่างที่เราเห็นเหมือนมนุษย์ และสามเหลี่ยมด้านในคือ
ช่วงของฟังก์ชัน rgb()
หรือพื้นที่สี sRGB
ตามที่คุณเห็นรูปสามเหลี่ยมด้านบน หรือเปรียบเทียบขนาดขอบเขต ดังนั้นคุณจะเห็นรูปสามเหลี่ยม ที่ด้านล่าง นี่คือวิธีสื่อสารของอุตสาหกรรมเกี่ยวกับขอบเขตของสี มาเปรียบเทียบกัน
พื้นที่สีคืออะไร
พื้นที่สีคือการจัดเรียงขอบเขตของ การสร้างรูปร่างและวิธีการ เข้าถึงสีต่างๆ หลายชิ้นเป็นรูปทรง 3 มิติแบบเรียบง่าย เช่น ลูกบาศก์หรือทรงกระบอก สีนี้ การจัดเรียงจะกำหนดสีที่อยู่ติดกัน และวิธีการเข้าถึง และสีที่สอดประสาน จะได้ผล
RGB เปรียบเสมือนพื้นที่สีสี่เหลี่ยมผืนผ้า ซึ่งสามารถเข้าถึงสีได้ด้วยการระบุ พิกัดบนแกน 3 แกน HSL คือพื้นที่สีทรงกระบอก ตำแหน่งที่เข้าถึงได้สีด้วยมุมโทนสีและพิกัดบน 2 แกน
![ลูกบาศก์ RGB แบบตัดครึ่งเปิดและตัดเป็นทรงกระบอก HSL แสดงคู่กัน เพื่อแสดงให้เห็นการบรรจุสีเป็นรูปร่างต่างๆ ในแต่ละพื้นที่](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/a-half-cut-open-rgb-cube-53a16bc324d2a.png?authuser=0000&hl=th)
ข้อกำหนดระดับ 4 แนะนำ 12 พื้นที่สีใหม่สำหรับการค้นหาสี ทั้งหมดนี้นอกเหนือจาก 4 สี พื้นที่ทำงานที่พร้อมใช้งานก่อนหน้านี้:
สรุปขอบเขตของสีและปริภูมิสี
พื้นที่สีคือการจับคู่สีซึ่งมีขอบเขตสีเป็นช่วงของสี ถือว่าขอบเขตสีเป็นจำนวนรวมของอนุภาคและพื้นที่สีเหมือนขวด ที่ช่วยรองรับอนุภาคต่างๆ
นี่คือภาพแบบอินเทอร์แอกทีฟจาก Alexey Ardov ที่แสดงให้เห็นว่า พื้นที่สี ชี้นิ้ว ลาก และซูมไปรอบๆ ในการสาธิตนี้ เปลี่ยนพื้นที่สี เพื่อดูภาพของพื้นที่ทำงานอื่นๆ
- ใช้ช่วงสีเพื่อพูดถึงช่วงสีต่างๆ เช่น ช่วงสีต่ำหรือแบบแคบ ขอบเขตเทียบกับช่วงสูงหรือขอบเขตกว้าง
- ใช้พื้นที่สีเพื่อพูดถึงการจัดเรียงสี ไวยากรณ์ที่ใช้ระบุ ปรับสี ปรับเปลี่ยนสี และแทรกค่าของสี
![ลูกบาศก์ที่เต็มไปด้วยจุดสีหลายจุด](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/a-cube-filled-many-multi-2ecb2e34ca6.png?authuser=0000&hl=th)
รีวิวพื้นที่สีแบบคลาสสิก {#classic-color-spaces}
สี CSS 4 จะระบุเส้นขอบใหม่ และเครื่องมือสำหรับ CSS และสี อย่างแรก สรุปว่าสีอยู่ตรงไหนก่อนหน้านี้ ฟีเจอร์ใหม่ๆ เหล่านี้
นับตั้งแต่ช่วงปี 2000 คุณสามารถใช้รายการต่อไปนี้สำหรับพร็อพเพอร์ตี้ CSS
ที่ยอมรับสีเป็นค่าหนึ่ง ได้แก่ เลขฐานสิบหก (เลขฐานสิบหก), rgb()
, rgba()
ตาม
เช่น hotpink
หรือคีย์เวิร์ดอย่าง
currentColor
ประมาณปี 2010 CSS สามารถใช้ได้ ทั้งนี้ขึ้นอยู่กับเบราว์เซอร์ของคุณ
hsl()
สี จากนั้นในปี 2017
เลขฐานสิบหกที่มีอัลฟาปรากฏขึ้น สุดท้าย เฉพาะ
เมื่อเร็วๆ นี้ hwb()
เริ่มได้รับ
ที่รองรับในเบราว์เซอร์
สีอ้างอิงของพื้นที่สีแบบคลาสสิกเหล่านี้ทั้งหมดในช่วงสี sRGB เดียวกัน
HEX
พื้นที่สีแบบเลขฐาน 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 (ความอิ่มตัวของสีและความสว่าง) จะให้ทุกสีในการแสดงผล ขอบเขต 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
และเครื่องมือ: