พอดแคสต์ 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%
- 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()
ด้วยวิธีใดวิธีหนึ่งจาก 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% จะอยู่ในช่วงสีฟ้า ซึ่งก็คือต้นกำเนิดของสีที่เราเห็น
ความอิ่มตัวคือสีของเฉดสีที่เลือก
สีที่อิ่มตัว (ความอิ่มตัว 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) ชื่อที่ได้รับความนิยมสูงสุดบางชื่อ ตามการศึกษาบนเว็บ ได้แก่ สีดำ สีขาว สีแดง สีน้ำเงิน และสีเทา ทั้ง 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)
#0f08
#OOFZ2
rgb(255, 0, 0)
hsl(180deg 50% 50%)
hotpink
พบสี Hsl ที่ไม่ถูกต้อง
hsl(5, 0%, 90%)
hsl(.5turn 40% 60%)
hsl(0, 0, 0)
hsl(2rad 50% 50%)
hsl(0 0% 0% / 20%)