รูปแบบสีใน CSS
การเลือกใช้รูปแบบสีใน CSS เป็นสิ่งสำคัญที่ช่วยให้การออกแบบเว็บไซต์มีความสวยงามและมีประสิทธิภาพ ใน CSS นั้นมีหลายรูปแบบด้วยกันโดยที่นิยมใช้กันก็จะมี 3 รูปแบบก็คือ HEX, RGB และ HSL ซึ่งแต่ละรูปแบบก็จะมีการใช้งานตามความเหมาะสมที่แตกต่างกัน
HEX (Hexadecimal Color Codes)
HEX ใช้รหัสสีในรูปแบบเลขฐานสิบหก โดยมีลักษณะเป็น #RRGGBB ซึ่ง RR, GG, และBBแทนค่าแดง (Red), เขียว (Green), และน้ำเงิน (Blue) ตามลำดับ
โดยแต่ละคู่ของตัวเลขใน HEX มีค่าตั้งแต่ 00(0) ถึง FF(255) ซึ่งหมายถึงความเข้มของสี ซึ่ง HEX สามารถใช้ได้ 6 หลัก (RGB)
Hex Code: #808080
RGB (Red, Green, Blue)
RGB เป็นระบบสีที่ใช้การทำงานของหน้าจอที่เป็นการรวมตัวกันของ LED เป็นล้านๆตัวประกอบกันเป็น Pixel รูปแบบการเขียนจึงเป็น rgb(r, g, b) ซึ่งแต่ละสีก็จะมีค่าอยู่ระหว่าง 0 - 255
RGB Code: rgb(128, 128, 128)
RGBA (Red, Green, Blue, Alpha)
นอกจากนี้เรายังสามารถเพิ่ม ช่อง alpha เข้าไปเพื่อปรับความทึบของสีได้อีกด้วย
รูปแบบการเขียนจึงได้เป็น rgba(r, g, b, alpha)
RGB Code: rgba(128, 128, 128, 1)
HSL (Hue, Saturation, Lightness)
HSL ใช้การระบุสีโดยการกำหนด Hue (สี), Saturation (ความอิ่มตัว), และ Lightness (ความสว่าง) ในรูปแบบ hsl(H, S%, L%)
การทำงานแบ่งเป็น 3 ส่วน คือ Hue, Saturation และ Lightness โดยที่ Hue จะมีค่าตั้งแต่ 0 - 360 ซึ่งแทนสี และ Saturation และ Lightness จะมีค่าตั้งแต่ 0 - 100 ซึ่งแทนความอิ่มตัวและความสว่างของสี
HSL Code: hsl(180, 50%, 50%)
HSLA (Hue, Saturation, Lightness, Alpha)
เช่นเดียวกับ RGB ที่สามารถเพิ่มค่า alpha เข้าไปเพื่อปรับความทึบของสีได้เหมือนกัน รูปแบบการเขียน hsla(H, S%, L% , alpha)
HSL Code: hsla(180, 50%, 50%, 1)
