HSL เป็น HEX

เปรียบเทียบ HSL กับ HEX

CSS 3 แนะนำอีกวิธีหนึ่งในการกำหนดสีโดยใช้ HSL (จากภาษาอังกฤษ Hue, Saturation, Lightness) เป็นแบบจำลองที่สีถูกกำหนดโดยพารามิเตอร์สามตัว ได้แก่ สีความอิ่มตัวและความสว่าง มาดูพารามิเตอร์แต่ละตัวแยกกัน ข้อได้เปรียบที่สำคัญของ HSL คือความสามารถในการระบุลักษณะสีที่เป็นอิสระจากกัน สิ่งนี้จะเปิดโอกาสมากมายให้กับคุณ คุณสามารถทำให้สีสว่างขึ้นเข้มขึ้นอิ่มตัวหรือไม่อิ่มตัว และในขณะที่ยังคงรักษาร่มเงา หรือในทางกลับกัน - เปลี่ยนเฉดสีโดยไม่เปลี่ยนความอิ่มตัวหรือความสว่าง บ่อยครั้งที่มีการใช้ตัวประมวลผลล่วงหน้าเพื่อใช้คุณสมบัติดังกล่าว แต่เป็นไปได้หากไม่มีคุณสมบัติเหล่านี้ ฟังก์ชัน hsl () ใช้เพื่อระบุสี HSL ฟังก์ชันนี้รับค่าสามค่าโดยคั่นด้วยเครื่องหมายจุลภาค ได้แก่ Hue, Saturation และ Lightness ด้วยการเปลี่ยนค่าความอิ่มตัวและความสว่างคุณจะได้เฉดสีที่อยู่ติดกันสำหรับสีใดสีหนึ่ง

ในกรณีส่วนใหญ่เป็นไปได้ที่จะจดจำสีด้วยรหัสฐานสิบหกโดยคำนึงถึงเฉพาะหลักแรกของคู่เท่านั้น ในตัวอย่างด้านล่างจะเห็นได้ชัดว่าสีนั้นผสมกับสีแดงจำนวนมากสีน้ำเงินเล็กน้อยและไม่มีสีเขียวเลย การทำความเข้าใจเกี่ยวกับสีด้วยรหัสฐานสิบหกช่วยให้นักออกแบบเว็บไซต์นำทางโค้ดของเพจได้เร็วขึ้นและนอกจากนี้คุณยังสามารถสร้างความประทับใจให้กับเพื่อนร่วมงานหรือลูกค้าด้วยการพูดว่า Ah ช่างเป็นสีเบอร์กันดีที่ยอดเยี่ยม คุณยังสามารถเปลี่ยนความสว่างเฉดสีหรือความอิ่มตัวของสีได้อย่างง่ายดายโดยแก้ไขเฉพาะรหัสฐานสิบหกของมัน ในตัวอย่างแรกด้านล่างคู่ใดคู่หนึ่งจะเปลี่ยนไปในขั้นละ 10% ในขณะที่ความสว่างของสีจะเพิ่มขึ้น ในตัวอย่างที่สองความสว่างจะเพิ่มขึ้น แต่ความอิ่มตัวจะลดลง นอกจากนี้ยังสามารถระบุค่า RGB ได้โดยใช้ค่าสีฐานสิบหก (HEX) ในรูปแบบ: #RRGGBB โดยที่ RR (สีแดง) GG (สีเขียว) และ BB (สีน้ำเงิน) เป็นค่าเลขฐานสิบหกตั้งแต่ 00 ถึง FF (เช่นเดียวกับทศนิยม 0- 255) ระบบเลขฐานสิบหกซึ่งตรงกันข้ามกับระบบฐานสิบจะขึ้นอยู่กับชื่อของมันบนเลข 16