ใน CSS สีเดียวกันสามารถเขียนได้อย่างน้อยสามวิธีที่แตกต่างกัน และแต่ละวิธีก็เหมาะกับงานของตัวเอง ตั้งแต่การออกแบบไปจนถึงแอนิเมชันความโปร่งใส
HEX: การเขียนแบบกะทัดรัดสำหรับคัดลอก
การเขียนแบบเลขฐานสิบหกอย่าง #FF5733 เข้ารหัสสามแชนแนล — แดง เขียว น้ำเงิน — ด้วยสองตัวอักษรต่อแชนแนล นี่คือรูปแบบที่กะทัดรัดที่สุด สะดวกสำหรับคัดลอกจากดีไซน์ แต่แทบไม่สามารถอ่านเข้าใจได้ด้วยตาเปล่าว่าเป็นสีอะไร
RGB: เข้าถึงแต่ละแชนแนลโดยตรง
rgb(255, 87, 51) เขียนสามแชนแนลเดียวกันเป็นเลขฐานสิบตั้งแต่ 0 ถึง 255 สะดวกเมื่อต้องเปลี่ยนแชนแนลใดแชนแนลหนึ่งด้วยโปรแกรม เช่น ค่อย ๆ เพิ่มค่าสีแดงในแอนิเมชัน JavaScript
HSL: เลือกโทนสีได้ตามสัญชาตญาณ
HSL อธิบายสีผ่านโทนสี (hue, 0–360°) ความอิ่มตัว และความสว่าง เป็นรูปแบบที่สะดวกที่สุดสำหรับเลือกสีด้วยมือ — หากต้องการโทนสีเดียวกันแต่เข้มขึ้น เพียงลดค่าความสว่างเท่านั้น ไม่ต้องคำนวณสามแชนแนลของ RGB ใหม่ทั้งหมด
แอลฟาแชนแนลสำหรับความโปร่งใส
รูปแบบ rgba() และ hsla() เพิ่มพารามิเตอร์ที่สี่ — ความโปร่งใสตั้งแต่ 0 ถึง 1 CSS สมัยใหม่ยังอนุญาตให้กำหนดความโปร่งใสใน HEX ได้ด้วยการเพิ่มตัวอักษรอีกสองตัวที่ท้าย เช่น #FF573380
เหตุใดจึงจำเป็น
- แปลงสีจากดีไซน์เป็นรูปแบบ CSS ที่ต้องการได้อย่างรวดเร็ว
- เลือกโทนสีเดียวกันที่เข้มขึ้นหรืออ่อนลงด้วย HSL
- เพิ่มความโปร่งใสให้สีโดยไม่เปลี่ยนโทนสีพื้นฐาน
สีประจำวันเกิด: ระบบสีที่ผูกกับเวลา ไม่ใช่ตัวเลข
ในขณะที่เครื่องมือนี้ระบุสีด้วยตัวเลขที่แน่นอนอย่าง HEX หรือ HSL ความเชื่อไทยดั้งเดิมที่รับอิทธิพลจากโหราศาสตร์ฮินดูกลับผูกสีแต่ละสีเข้ากับวันในสัปดาห์แทน — วันจันทร์สีเหลือง วันอังคารสีชมพู วันพุธสีเขียว วันพฤหัสบดีสีส้ม วันศุกร์สีฟ้า วันเสาร์สีม่วง และวันอาทิตย์สีแดง โดยแต่ละวันเชื่อมโยงกับเทพประจำวันตามคติไตรภูมิ ความเชื่อนี้ยังปรากฏให้เห็นชัดในชีวิตจริง เช่น การใส่เสื้อสีเหลืองในโอกาสที่เกี่ยวกับวันจันทร์ หรือสีเหลืองที่ใช้แทนวันพระราชสมภพของพระมหากษัตริย์ไทยที่ประสูติวันจันทร์ ต่างจากระบบ HSL ที่สีคือพิกัดตัวเลขล้วน ๆ สีประจำวันคือระบบสัญลักษณ์ที่ผูกกับปฏิทินและความเชื่อ ไม่ใช่ค่าที่คำนวณได้ด้วยสูตรทางคณิตศาสตร์