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

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

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

วันที่

เนื่องจากจอแสดงผลสามารถแสดงสีได้หลากหลายยิ่งขึ้น 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

วันที่

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

รูปภาพต่อไปนี้แสดงการอัปเกรดแบบผสมบางส่วน

วันที่

ปัญหาเรื่องสีและเว็บคือ 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 เดียวกัน

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
• การผสมสี 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/
• การแสดงภาพตามขอบเขต
• เครื่องมือสร้างการไล่ระดับสีที่สดใส