The CSS Podcast - 006: Color Part One
สีเป็นส่วนสําคัญของเว็บไซต์ทุกแห่ง และ CSS มีตัวเลือกมากมายสําหรับประเภทสี ฟังก์ชัน และการจัดการ
คุณตัดสินใจเลือกประเภทสีที่จะใช้อย่างไร คุณทำให้สีกึ่งโปร่งใสได้อย่างไร ในบทเรียนนี้ คุณจะได้เรียนรู้ตัวเลือกที่มีเพื่อช่วยให้คุณตัดสินใจได้อย่างถูกต้องสำหรับโปรเจ็กต์และทีม
CSS มีประเภทข้อมูลที่แตกต่างกันมากมาย เช่น สตริงและตัวเลข สีเป็นหนึ่งในประเภทเหล่านี้และใช้ประเภทอื่นๆ เช่น ตัวเลขสําหรับคําจํากัดความของตนเอง
สีตัวเลข
คุณอาจเคยเห็นสีใน CSS เป็นครั้งแรกผ่านสีที่เป็นตัวเลข เราใช้ค่าสีที่เป็นตัวเลขได้หลายรูปแบบ
สีแบบเลขฐาน 16
h1 {
color: #b71540;
}
รูปแบบเลขฐานสิบหก (มักเรียกสั้นๆ ว่า Hex) คือไวยากรณ์แบบย่อสำหรับ RGB ซึ่งกำหนดค่าตัวเลขให้กับสีแดง เขียว และน้ำเงิน ซึ่งเป็นสีหลัก 3 สี
ช่วงของเลขฐานสิบหกคือ 0-9 และ A-F เมื่อใช้ตามลำดับ 6 หลัก ระบบจะแปลงเป็นช่วงตัวเลข RGB ซึ่งได้แก่ 0-255 ซึ่งสอดคล้องกับช่องสีแดง เขียว และน้ำเงินตามลำดับ
นอกจากนี้ คุณยังกําหนดค่าอัลฟ่าด้วยสีที่เป็นตัวเลขก็ได้
ค่าอัลฟ่าคือเปอร์เซ็นต์ของความโปร่งใส
ในรหัสฐาน 16 คุณจะเพิ่มตัวเลขอีก 2 หลักลงในลำดับ 6 หลัก ซึ่งจะเป็นลำดับ 8 หลัก
เช่น หากต้องการตั้งค่าสีดําเป็นรหัสฐาน 16 ให้เขียน #000000
หากต้องการเพิ่มความโปร่งใส 50% ให้เปลี่ยนเป็น #00000080
เนื่องจากรูปแบบเลขฐานสิบหกคือ 0-9 และ A-F ค่าความโปร่งใสจึงอาจไม่ตรงกับที่คุณคาดไว้
ค่าหลักที่พบบ่อยซึ่งเพิ่มลงในรหัสฐาน 16 สีดํา #000000
มีดังนี้
- อัลฟ่า 0% ซึ่งโปร่งใสทั้งหมดคือ 00:
#00000000
- อัลฟ่า 50% คือ 80:
#00000080
- อัลฟ่า 75% คือ BF:
#000000BF
หากต้องการแปลงเลขฐาน 16 2 หลักเป็นฐาน 10 ให้นำตัวเลขแรกไปคูณด้วย 16 (เนื่องจากเลขฐาน 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, Saturation และ Lightness เฉดสีจะอธิบายค่าในวงล้อสีตั้งแต่ 0 ถึง 360 องศา โดยเริ่มจากสีแดง (ทั้ง 0 และ 360) ส่วนสีที่มีค่า 180 หรือ 50% จะอยู่ในช่วงสีน้ำเงิน ซึ่งเป็นต้นกำเนิดของสีที่เราเห็น
ความอิ่มตัวคือระดับความสดของสีที่เลือก
สีที่ลดความอิ่มตัวจนหมด (มีความอิ่มตัว 0%
) จะปรากฏเป็นสีเทา
และสุดท้ายคือความสว่าง ซึ่งเป็นพารามิเตอร์ที่อธิบายระดับความสว่างที่เพิ่มจากสีขาวเป็นสีดำ
ความสว่าง 100%
จะให้สีขาวเสมอ
เมื่อใช้ฟังก์ชันสี hsl()
คุณกำหนดสีดําจริงได้โดยเขียน hsl(0 0% 0%)
หรือแม้แต่ hsl(0deg 0% 0%)
เนื่องจากพารามิเตอร์สีกำหนดองศาในวงล้อสี ซึ่งหากใช้ประเภทตัวเลขจะเป็น 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)
คีย์เวิร์ดสี
มีสีที่มีชื่อใน CSS 148 สี โดยใช้ชื่อภาษาอังกฤษธรรมดา เช่น ม่วง มะเขือเทศ และสร้อยทอง Web Almanac ระบุว่าชื่อที่ได้รับความนิยมมากที่สุด ได้แก่ ดำ ขาว แดง น้ำเงิน และเทา ตัวอย่างสีโปรดของเรา ได้แก่ 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 สีขึ้นไปในชุดค่าผสมรูปแบบสีใดก็ได้ เช่น ฐาน 16, RGB หรือ HSL
สุดท้าย border-color
และ outline-color
จะกำหนดสีสำหรับเส้นขอบและเส้นร่างในกล่อง
พร็อพเพอร์ตี้ box-shadow
ยังยอมรับสีเป็นหนึ่งในค่าด้วย
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับสี
สีใดต่อไปนี้เป็นสีที่ใช้ได้
rgb(255, 0, 0)
hsl(180deg 50% 50%)
rbga(400 0 1)
#0f08
hotpink
#OOFZ2
ค้นหาสี hsl ที่ไม่ถูกต้อง
hsl(0, 0, 0)
hsl(2rad 50% 50%)
hsl(.5turn 40% 60%)
hsl(5, 0%, 90%)
hsl(0 0% 0% / 20%)