สี

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

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

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

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

สีตัวเลข

เป็นไปได้มากว่าการแสดงสีครั้งแรกใน CSS จะเป็นสีตัวเลข เราสามารถทำงานกับค่าสีที่เป็นตัวเลขในไม่กี่รูปแบบ

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

h1 {
  color: #b71540;
}

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

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

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

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

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

หากต้องการแปลงฐานสิบหก 2 หลักเป็นฐานสิบ ให้นำตัวเลขแรกแล้วคูณด้วย 16 (เพราะฐานสิบหกเป็นฐาน 16) จากนั้นให้บวกตัวเลขที่ 2 การใช้ 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() ด้วยวิธีใดวิธีหนึ่งจาก 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 ความอิ่มตัว และความสว่าง Hue จะอธิบายค่าในวงล้อสีตั้งแต่ 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) ชื่อที่ได้รับความนิยมสูงสุดบางชื่อ ตามการศึกษาบนเว็บ ได้แก่ สีดำ สีขาว สีแดง สีน้ำเงิน และสีเทา ทั้ง Goldenrod, Aliceblue และ Hotpink

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

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

ตำแหน่งที่จะใช้สีในกฎ 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 มากกว่าที่จะยอมรับ ซึ่งทำให้รหัสไม่ถูกต้อง
#0f08
🎉
#OOFZ2
นี่ไม่ใช่ค่าฐานสิบหก แต่เป็นเพียงตัวเลข 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 ที่ถูกต้อง

แหล่งข้อมูล