สี

พอดแคสต์ CSS - 006: Color ส่วนที่ 1

สีเป็นส่วนสำคัญของเว็บไซต์ และใน CSS ก็มีตัวเลือกมากมายสำหรับประเภทสี ฟังก์ชันและการรักษา

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

CSS มีข้อมูลหลายประเภท เช่น สตริงและตัวเลข สีจัดอยู่ในประเภทเหล่านี้และใช้ประเภทอื่นๆ เช่น ตัวเลขสำหรับคำจำกัดความ

สีตัวเลข

เป็นไปได้มากว่าการเห็นสีใน CSS เป็นครั้งแรกคือการใช้สีที่เป็นตัวเลข เราสามารถทำงานกับค่าสีตัวเลขได้ใน 2-3 รูปแบบ

สีแบบเลขฐาน 16

h1 {
  color: #b71540;
}

สัญกรณ์เลขฐานสิบหก (มักจะย่อเป็นเลขฐานสิบหก) เป็นไวยากรณ์แบบย่อสำหรับ RGB ซึ่งกำหนดค่าตัวเลขเป็นสีแดงและน้ำเงิน ซึ่งเป็นสีหลัก 3 สี

ช่วงเลขฐานสิบหกคือ 0-9 และ A-F เมื่อใช้เป็นลำดับตัวเลข 6 หลัก จะแปลงเป็นช่วงตัวเลข RGB ซึ่งก็คือ 0-255 ซึ่งจะสอดคล้องกับช่องสีแดง เขียว และน้ำเงินตามลำดับ

และคุณยังกำหนดค่าอัลฟ่าด้วยสีตัวเลขได้อีกด้วย ค่าอัลฟ่าคือเปอร์เซ็นต์ของความโปร่งใส ในช่องรหัสเลขฐานสิบหก ให้เพิ่มอีก 2 หลักในลำดับ 6 หลัก สร้างลำดับเป็นเลข 8 หลัก เช่น หากต้องการตั้งค่าสีดำในรหัสฐานสิบหก ให้เขียน #000000 หากต้องการเพิ่มความโปร่งใส 50% โปรดเปลี่ยนเป็น #00000080

เนื่องจากสเกลเลขฐาน 16 คือ 0-9 และ A-F ค่าความโปร่งใสจึงอาจไม่ใช่ค่าที่คุณคาดหวัง ต่อไปนี้เป็นคีย์ ค่าทั่วไปที่เพิ่มลงในรหัสฐานสิบหกสีดำ #000000

  • อัลฟ่า 0% ซึ่งโปร่งใสทั้งหมด มีค่า 00: #00000000
  • อัลฟ่า 50% คือ 80: #00000080
  • 75% ของอัลฟ่าคือ BF: #000000BF

หากต้องการแปลงเลขฐานสิบหกสองหลักเป็นเลขฐานสิบ นำตัวเลขแรกมาคูณด้วย 16 (เนื่องจากเลขฐาน 16 เป็นฐาน 16) จากนั้นให้บวกตัวเลขที่สอง การใช้ BF เป็นตัวอย่างของอัลฟ่า 75%

  1. B เท่ากับ 11 ซึ่งเมื่อคูณด้วย 16 จะเท่ากับ 176
  2. F เท่ากับ 15
  3. 176 + 15 = 191
  4. ค่าอัลฟ่าคือ 191—75% ของ 255

RGB (แดง เขียว น้ำเงิน)

h1 {
  color: rgb(183, 21, 64);
}

สี RGB จะกำหนดด้วยค่า ฟังก์ชันสี rgb() โดยใช้ตัวเลขหรือเปอร์เซ็นต์เป็นพารามิเตอร์ ตัวเลขต้องอยู่ในช่วง 0-255 และเปอร์เซ็นต์ต้องอยู่ระหว่าง 0% ถึง 100% RGB ทำงานได้ในระดับ 0-255 ดังนั้น 255 จะเท่ากับ 100% และ 0 ถึง 0%

หากต้องการตั้งค่าสีดำใน RGB ให้กำหนดเป็น rgb(0 0 0) นั่นคือสีแดง 0 สีเขียว 0 และสีน้ำเงิน 0 สีดำหมายถึง rgb(0%, 0%, 0%) ด้วยเช่นกัน สีขาวตรงข้ามกับ rgb(255, 255, 255) หรือ rgb(100%, 100%, 100%) ทุกประการ

การตั้งค่าอัลฟ่าใน rgb() ด้วย 1 ใน 2 วิธี เพิ่ม / หลังพารามิเตอร์สีแดง เขียว และน้ำเงิน หรือใช้ฟังก์ชัน rgba() คุณกำหนดอัลฟ่าได้ด้วยเปอร์เซ็นต์หรือทศนิยมระหว่าง 0 ถึง 1 ได้ เช่น หากต้องการตั้งค่าอัลฟ่าสีดำ 50% ในเบราว์เซอร์สมัยใหม่ ให้เขียนว่า rgb(0 0 0 / 50%) หรือ rgb(0 0 0 / 0.5) หากต้องการรับการสนับสนุนที่กว้างขึ้น ให้ใช้ฟังก์ชัน rgba() เขียน: rgba(0, 0, 0, 50%) หรือ rgba(0, 0, 0, 0.5)

HSL (โทนสี ความอิ่มตัว ความสว่าง)

h1 {
  color: hsl(344, 79%, 40%);
}

HSL ย่อมาจาก Hue, saturation (ความอิ่มตัว) และ Lightness (ความสว่าง) โทนสีจะอธิบายค่าในวงล้อสีตั้งแต่ 0 ถึง 360 องศา โดยเริ่มด้วยสีแดง (เป็นทั้ง 0 และ 360) สี 180 หรือ 50% จะอยู่ในช่วงสีน้ำเงิน นี่คือต้นกำเนิดของสีที่เราเห็น

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

ความอิ่มตัวคือความสว่างของสีที่เลือก สีที่อิ่มตัวเต็มที่ (มีความอิ่มตัวเป็น 0%) จะปรากฏเป็นโทนสีเทา และสุดท้ายคือความสว่างคือพารามิเตอร์ที่อธิบายสเกลจากสีขาวเป็นสีดำของแสงที่เพิ่มเข้ามา ความสว่างของ 100% จะเป็นสีขาวเสมอ

ใช้ฟังก์ชันสี hsl() คุณกำหนดสีที่แท้จริงได้โดยเขียน hsl(0 0% 0%) หรือแม้แต่ hsl(0deg 0% 0%) นั่นเป็นเพราะพารามิเตอร์ Hue กำหนดองศาของวงล้อสี ซึ่งหากคุณใช้ประเภทตัวเลข คือ 0-360 คุณยังใช้ประเภทมุม ซึ่งก็คือ (0deg) หรือ (0turn) ได้ด้วย ทั้งความอิ่มตัวและความสว่างจะกำหนดด้วยเปอร์เซ็นต์

ฟังก์ชันสี HSL ที่แจกแจงรายละเอียดแบบเห็นภาพ โทนสีจะใช้วงล้อสี ความอิ่มตัวจะแสดงเป็นสีเทาที่ผสมเข้ากับสีน้ำเงินอมเขียว ความสว่างจะแสดงสีดำเป็นสีขาว

อัลฟ่ากำหนดไว้ใน hsl() ในลักษณะเดียวกับ rgb() ด้วยการเพิ่ม / หลังพารามิเตอร์โทนสี ความอิ่มตัว และความสว่าง หรือ โดยใช้พารามิเตอร์ hsla() คุณกำหนดอัลฟ่าได้ด้วยเปอร์เซ็นต์หรือทศนิยมระหว่าง 0 ถึง 1 ได้ เช่น หากต้องการตั้งค่าอัลฟ่าสีดำ 50% ให้ใช้ hsl(0 0% 0% / 50%) หรือ hsl(0 0% 0% / 0.5) ใช้ฟังก์ชัน hsla() เขียนว่า hsla(0, 0%, 0%, 50%) หรือ hsla(0, 0%, 0%, 0.5)

คีย์เวิร์ดสี

มีสีที่มีชื่อ 148 สีใน CSS ชื่อเหล่านี้เป็นชื่อภาษาอังกฤษง่ายๆ เช่น สีม่วง มะเขือเทศ และโกลเด้นร็อด ตัวอย่างชื่อที่ได้รับความนิยมมากที่สุด ตามหนังสือสรุปเว็บ ได้แก่ สีดำ สีขาว สีแดง สีน้ำเงิน และสีเทา เกมโปรดของเรามีทั้ง Goldenrod, Aliceblue และ hotpink

นอกเหนือจากสีมาตรฐานแล้ว ยังมีคีย์เวิร์ดพิเศษที่ใช้ได้ดังนี้

  • transparent เป็นสีที่โปร่งใสทั้งหมด และยังเป็นค่าเริ่มต้นของ background-color
  • currentColor คือมูลค่าแบบไดนามิกที่คำนวณตามบริบทของพร็อพเพอร์ตี้ color หากคุณมีสีข้อความ red แล้วตั้งค่า border-color เป็น currentColor สีดังกล่าวจะเป็นสีแดงด้วย หากองค์ประกอบที่คุณกำหนด currentColor ไม่มีค่าสำหรับ color ที่กำหนดไว้ currentColor จะได้รับการคำนวณโดย Cascade แทน

ตำแหน่งที่ควรใช้สีในกฎ CSS

หากพร็อพเพอร์ตี้ CSS ยอมรับ <color> เป็นประเภทข้อมูล ก็จะยอมรับการแสดงสีด้วยวิธีใดวิธีหนึ่งข้างต้น สำหรับการจัดรูปแบบข้อความ ให้ใช้พร็อพเพอร์ตี้ color, text-shadow และ text-decoration-color ซึ่งยอมรับสีเป็นค่าหรือสีเป็นส่วนหนึ่งของค่า

สำหรับพื้นหลัง คุณตั้งค่าสีเป็นค่าสำหรับ background หรือ background-color ได้ สียังใช้ในการไล่ระดับสีได้ด้วย เช่น linear-gradient การไล่ระดับสีคือรูปภาพประเภทหนึ่งที่สามารถกำหนดแบบเป็นโปรแกรมได้ใน CSS การไล่ระดับสียอมรับสีอย่างน้อย 2 สีโดยใช้รูปแบบสีร่วมกัน เช่น hex, rgb หรือ hsl

สุดท้าย border-color และ outline-color กำหนดสีเส้นขอบและโครงร่างบนกล่อง พร็อพเพอร์ตี้ box-shadow ยังยอมรับสีเป็นค่าหนึ่งด้วย

ตรวจสอบความเข้าใจ

ทดสอบความรู้เรื่องสีของคุณ

สีใดต่อไปนี้ถูกต้อง

rbga(400 0 1)
rbga เป็นการพิมพ์ที่ผิดของ RGBA และ 400 มีค่าที่เกินกว่าที่ Rbga ยอมรับได้ ซึ่งทำให้เป็นโมฆะ
#0f08
🎉
#OOFZ2
ซึ่งไม่ใช่ค่าเลขฐาน 16 แต่เป็นตัวเลข 5 ตัวและมี Z ซึ่งทำให้ค่าไม่ถูกต้อง
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

ตรวจหาสี HSL ที่ไม่ถูกต้อง

hsl(5, 0%, 90%)
นี่คือค่า HSL ที่ถูกต้อง
hsl(.5turn 40% 60%)
นี่คือค่า HSL ที่ถูกต้อง
hsl(0, 0, 0)
🎉 คุณเห็นแล้ว ค่าที่ 2 และ 3 ควรเป็นเปอร์เซ็นต์
hsl(2rad 50% 50%)
นี่คือค่า HSL ที่ถูกต้อง
hsl(0 0% 0% / 20%)
นี่คือค่า HSL ที่ถูกต้อง

แหล่งข้อมูล