หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

Adam Argyle

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

รูปแบบสีที่ได้รับความนิยมมากที่สุดตามเปอร์เซ็นต์ของจำนวนครั้งที่ปรากฏ — https://almanac.httparchive.org/en/2022/css#colors

เนื่องจากจอแสดงผลสามารถแสดงสีได้หลากหลายยิ่งขึ้น 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 ยังไม่มีค่า — ดูตัวอย่างสำหรับตัวคุณเอง บน Codepen

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

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

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

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

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

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

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

ขอบเขตของสีจะถูกเปรียบเทียบเคียงข้างกันเป็นรูปสามเหลี่ยม
sRGB เป็นส่วนที่เล็กที่สุดและ Rec2020 มีขนาดใหญ่ที่สุด

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

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

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

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

รูปรองเท้าม้าที่มีการไล่ระดับสีสีสันสดใสโดยมีรูปสามเหลี่ยมกลวงอยู่ตรงกลาง — ที่มา: Wikipedia

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

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

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

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

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

ลูกบาศก์ RGB แบบตัดครึ่งเปิดและตัดเป็นทรงกระบอก HSL แสดงคู่กัน เพื่อแสดงให้เห็นการบรรจุสีเป็นรูปร่างต่างๆ ในแต่ละพื้นที่ — https://en.wikipedia.org/wiki/HSL_and_HSV

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

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

สรุปขอบเขตของสีและปริภูมิสี

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

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

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

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

รีวิวพื้นที่สีแบบคลาสสิก {#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 เพิ่มเติม

และคุณยังอ่านเพิ่มเติมได้ที่เว็บต่อไปนี้

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