เรียนรู้วิธีใช้สี HSL และ HSLa ใน CSS และสิ่งที่ทำให้สีเหล่านี้แตกต่างจาก RGB/RGBa และ Hex
HSL และ HSLa เป็นวิธีการสีใน CSS ที่คุณใช้เป็นทางเลือกแทน Hex หรือ RGB/RGBa เพื่อใช้ โลกแห่งความเป็นจริง ได้มากขึ้น สีสันให้กับเว็บไซต์ของคุณ
HSL และ HSLa ค่อนข้างใหม่ในโลก CSS แต่ในโลกของสีทั่วไปนั้น มีมาตั้งแต่ปี 1970
HSL กับ HSLa:
- HSL ย่อมาจาก Hue Saturation Lightness
- HSLa ย่อมาจาก Hue Saturation Lightness Alpha
HSLa เป็นส่วนขยายของ HSL พร้อมช่องอัลฟ่าที่คุณสามารถใช้เพื่อระบุค่าความโปร่งใส (หรือความทึบ) HSL และ HSLa ต่างกันในลักษณะเดียวกับที่ RGB และ RGBa ต่างกัน
การใช้งาน HSL/HSLa
ในการใช้ HSL และ HSLa CSS มีฟังก์ชันสีสองสี hsl() และ hsla() .
การใช้งาน HSL พื้นฐาน:
div {
background-color:hsl(0, 100%, 50%); /* Red */
}การใช้งาน HSLa พื้นฐาน:
div {
background-color:hsla(0, 100%, 50%, 0.6);
}HSL ดีกว่า Hex และ RGB หรือไม่
คุณอาจสงสัยว่า HSL ดีกว่า RGB และ Hex หรือไม่ จะต้องมีเหตุผลที่เพิ่ม HSL ในภาษา CSS ใช่ไหม
เป็นการยากที่จะบอกว่า HSL ดีกว่า มากกว่า Hex และ RGB (แม้ว่าบางตัวจะชี้ประเด็นนั้น) ขึ้นอยู่กับว่าคุณต้องการทำอะไร
แนวคิดเบื้องหลัง HSL คือการจัดเตรียมรูปแบบสีที่ใช้งานง่ายซึ่งเลียนแบบโลกแห่งความจริง HSL ช่วยให้คุณปรับแสงและความมืดบนสีเพื่อเปลี่ยน การเป็นตัวแทน ของสีโดยไม่เปลี่ยนสีเอง
Hex และ RGB ไม่สามารถทำได้
ตัวอย่างเช่น หากคุณดูสีในห้องของคุณตอนนี้ วิธีที่คุณรับรู้สีเหล่านั้นล้วนเป็นผลมาจากแสงที่มาจากสิ่งต่างๆ เช่น
- วินโดว์
- โคมไฟ
- เทียน
- การรวมกันของแหล่งกำเนิดแสง
สมมติว่าตอนนี้คุณมีแสงธรรมชาติส่องเข้ามาทางหน้าต่างเท่านั้น
ตอนนี้ไปข้างหน้าและดึงผ้าม่านของคุณลง วิธีนี้จะช่วยขจัดความสว่างออกจากห้องของคุณและเปลี่ยนการรับรู้ของทุกสีในห้องของคุณ
สีของสิ่งของทุกชิ้นในห้องของคุณตอนนี้ดูเหมือนสีเข้มกว่าสีเหล่านั้นเมื่อเทียบกับก่อนที่คุณจะดึงผ้าม่านลง
อย่างไรก็ตาม และนี่คือประเด็นหลัก:
การลบความสว่างไม่ได้ทำให้สีของสิ่งของในห้องคุณเปลี่ยนไป แต่จะทำให้การรับรู้เปลี่ยนไป จากสีอ่อนไปเป็นสีเข้มขึ้น
ตอนนี้ถ้าคุณถ่ายรูปห้องของคุณ ก่อนและหลัง เมื่อดึงม่านลงแล้วดึงค่าสีก่อน/หลังในรูปแบบ RGB สีเหล่านั้นของก่อน/หลังจะเป็นสีที่ต่างกันสองสี เช่นเดียวกับสี Hex
อย่างไรก็ตาม HSL จะไม่ให้สีที่ต่างกันสองสี แต่เป็นสีเดียวกันโดยมีค่าความสว่างต่างกัน (L ใน HSL)
สมมติว่าคุณมีโต๊ะสีน้ำตาลวอลนัทในห้องของคุณ ตอนนี้ คุณถ่ายภาพหนึ่งภาพโดยดึงผ้าม่านขึ้น และอีกภาพหนึ่งกำลังดึงผ้าม่านลง
ค่า Hex และ RGB ของรูปภาพก่อนและหลังจะเป็นค่าสีที่ต่างกันสองค่าตามลำดับ
ค่า HSL ของภาพก่อน/หลังจะเป็นสีเดียวกัน แต่มีค่าความสว่างต่างกัน
บางคนจะเถียงว่า:
- Hex และ RGB สามารถอ่านด้วยเครื่องได้มากกว่า
- HSL นั้นมนุษย์อ่านง่ายกว่า
แม้ว่าข้างต้นจะเป็นความจริงสำหรับคนส่วนใหญ่ที่เข้าใจและมีประสบการณ์กับวิธีการสีทั้งสามแล้ว ประสบการณ์ของคุณอาจแตกต่างกัน
ฉันมักจะพูดเสมอว่าผู้คนทำดีที่สุดในสิ่งที่พวกเขาทำมากที่สุด ดังนั้น หากคุณมีประสบการณ์ในการใช้ Hex หรือ RGB มานานหลายปี และไม่มีประสบการณ์กับ HSL เลย คุณอาจพบว่า HSL อ่านยากขึ้นในช่วงแรก
เพื่อสรุปสิ่งที่ทำให้ HSL แตกต่าง:
- HSL ช่วยให้คุณเปลี่ยนความสว่างและความมืดของสีได้โดยไม่ต้องเปลี่ยนสีเอง
- RGB และ Hex จะเปลี่ยนความสว่างและความมืดของสีไม่ได้หากไม่ได้เปลี่ยนสีด้วยตัวมันเอง
