พอดแคสต์ 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%
- B เท่ากับ 11 ซึ่งเมื่อคูณด้วย 16 จะเท่ากับ 176
- F เท่ากับ 15
- 176 + 15 = 191
- ค่าอัลฟ่าคือ 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% จะอยู่ในช่วงสีน้ำเงิน นี่คือต้นกำเนิดของสีที่เราเห็น
ความอิ่มตัวคือความสว่างของสีที่เลือก
สีที่อิ่มตัวเต็มที่ (มีความอิ่มตัวเป็น 0%
) จะปรากฏเป็นโทนสีเทา
และสุดท้ายคือความสว่างคือพารามิเตอร์ที่อธิบายสเกลจากสีขาวเป็นสีดำของแสงที่เพิ่มเข้ามา
ความสว่างของ 100%
จะเป็นสีขาวเสมอ
ใช้ฟังก์ชันสี hsl()
คุณกำหนดสีที่แท้จริงได้โดยเขียน hsl(0 0% 0%)
หรือแม้แต่ hsl(0deg 0% 0%)
นั่นเป็นเพราะพารามิเตอร์ Hue กำหนดองศาของวงล้อสี
ซึ่งหากคุณใช้ประเภทตัวเลข คือ 0-360
คุณยังใช้ประเภทมุม ซึ่งก็คือ (0deg
) หรือ (0turn)
ได้ด้วย
ทั้งความอิ่มตัวและความสว่างจะกำหนดด้วยเปอร์เซ็นต์
อัลฟ่ากำหนดไว้ใน 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
ยังยอมรับสีเป็นค่าหนึ่งด้วย
ตรวจสอบความเข้าใจ
ทดสอบความรู้เรื่องสีของคุณ
สีใดต่อไปนี้ถูกต้อง
hotpink
hsl(180deg 50% 50%)
rbga(400 0 1)
#OOFZ2
#0f08
rgb(255, 0, 0)
ตรวจหาสี HSL ที่ไม่ถูกต้อง
hsl(.5turn 40% 60%)
hsl(0, 0, 0)
hsl(5, 0%, 90%)
hsl(2rad 50% 50%)
hsl(0 0% 0% / 20%)