เรียนรู้วิธีใช้ HSL และ HSLa colors ใน CSS และความแตกต่างจาก RGB/RGBa และ Hex
HSL และ HSLa เป็น color methods ใน CSS ที่ใช้ alternative ของ Hex หรือ RGB/RGBa เพื่อ apply สีที่ real-world มากขึ้นให้เว็บไซต์
HSL และ HSLa ค่อนข้างใหม่ในโลก CSS แต่ในโลกสีทั่วไป มันมีมาตั้งแต่dekade 1970s
HSL vs HSLa:
- HSL ย่อมาจาก Hue Saturation Lightness
- HSLa ย่อมาจาก Hue Saturation Lightness Alpha
HSLa เป็น extension ของ HSL พร้อม Alpha channel สำหรับระบุค่า transparency (หรือ opacity) HSL และ HSLa ต่างกันในลักษณะเดียวกับ RGB และ RGBa
HSL/HSLa Usage
เพื่อใช้ HSL และ HSLa CSS มี color functions สองตัว hsl() และ hsla()
Basic HSL usage:
div {
background-color: hsl(0, 100%, 50%); /* Red */
}HSL
Basic HSLa usage:
div {
background-color: hsla(0, 100%, 50%, 0.6);
}HSLa
HSL ดีกว่า Hex และ RGB ไหม?
คุณอาจสงสัยว่า HSL ดีกว่า RGB และ Hex ไหม ต้องมีเหตุผลที่ HSL ถูกเพิ่มเข้า CSS language ไหม?
ยากที่จะบอกว่า HSL ดีกว่า Hex และ RGB (แม้บางคนจะโต้แย้ง) ขึ้นอยู่กับว่าคุณอยากทำอะไร
แนวคิดเบื้องหลัง HSL คือให้ intuitive color format ที่ mimic real world HSL ให้คุณปรับ light และ darkness บนสี เพื่อเปลี่ยน representation ของสีโดยไม่เปลี่ยนสีตัวเอง
Hex และ RGB ทำไม่ได้
ตัวอย่าง หากคุณดูสีในห้องตอนนี้ วิธีที่คุณรับรู้สีเหล่านั้นเป็นผลมาจากแสงจาก:
- Windows
- Lamps
- Candles
- Combination of light sources
สมมติคุณมีแค่ natural light จากหน้าต่าง
ลองดึงม่านลง นี่จะเอา lightness ออกจากห้อง และเปลี่ยน perception ของทุกสีในห้อง
สีของทุกสิ่งในห้องตอนนี้ดูเป็น darker versions ของสีเดิม ก่อนดึงม่าน
แต่นี่คือจุดสำคัญ:
การเอา lightness ออกไม่ได้เปลี่ยน actual color ของสิ่งของในห้อง มันเปลี่ยน perception จาก lighter version เป็น darker version ของสีเหล่านั้น
ถ้าคุณถ่ายรูปห้อง ก่อนและหลัง ดึงม่าน แล้ว grab before/after color values ใน RGB format สีของ before/after จะเป็นสองสีที่ต่างกัน gilt สำหรับ Hex colors
HSL แต่จะไม่ให้คุณสองสีที่ต่างกัน แต่จะให้สีเดียวกันกับ Lightness values ที่ต่างกัน (L ใน HSL)
สมมติคุณมีโต๊ะสีน้ำตาล walnut ในห้อง ถ่ายรูปครั้งหนึ่งม่านเปิด อีกครั้งม่านปิด
Hex และ RGB values ของ before/after pictures จะเป็นสองค่าสีที่ต่างกัน
HSL values ของ before/after pictures จะเป็นสีเดียวกัน แต่ Lightness values ต่างกัน
บางคนจะโต้แย้งว่า:
- Hex และ RGB อ่านง่ายสำหรับ machine
- HSL อ่านง่ายสำหรับ human
ข้างต้นอาจจริงสำหรับคนที่เข้าใจและมีประสบการณ์กับทั้งสาม color methods แตประสบการณ์ของคุณอาจต่างออกไป
ผมมักพูดว่า คนทำได้ดีที่สุดในสิ่งที่ทำบ่อยที่สุด ถ้าคุณมีประสบการณ์หลายปีกับ Hex หรือ RGB และศูนย์กับ HSL คุณอาจพบว่า HSL ยากต่อการอ่านตอนแรก
สรุปสิ่งที่ทำให้ HSL ต่างออกไป:
- HSL ให้คุณเปลี่ยน lightness และ darkness ของสีได้โดยไม่เปลี่ยนสีตัวเอง
- RGB และ Hex ไม่สามารถเปลี่ยน lightness/darkness ได้โดยไม่เปลี่ยนสีตัวเองด้วย
