เรียนรู้วิธีใช้สีฐานสิบหก (เรียกอีกอย่างว่า “สีฐานสิบหก” ใน CSS
สัญกรณ์ฐานสิบหก (หรือสัญกรณ์สีฐานสิบหก) เป็นอีกวิธีหนึ่งในการแสดงสี RGB
สัญกรณ์สีฐานสิบหกถูกระบุในสามช่วงตึกโดยมีสองค่าในแต่ละ:
- RR
- จีจี
- บีบี
พวกเขากลายเป็น #RRGGBB
ในภาษากรีก Hexa หมายถึงเลขหก (6) และอย่างที่คุณเห็น ผลรวมของ RRGGBB คือหก
สิ่งที่ทำให้สีฐานสิบหกแตกต่างจาก RGB คือสีฐานสิบหกแสดงค่าตั้งแต่ 0 ถึง 255 ด้วยตัวเลขเพียง 2 หลัก
ตัวอย่างเช่น สี RGB สีขาว 100% ด้านล่าง:
rgb(255,255,255);
สามารถแสดงเป็นสีฐานสิบหกดังนี้:
#ffffff /* 100% white */
คุณสามารถก้าวไปอีกขั้นและลัดตัวเลขสองหลักให้เป็นหนึ่งเดียวหากเท่ากัน (เช่น FF FF FF):
#fff /* shortcut for 100% white */
ฐานสิบหกที่มีช่องอัลฟ่า
เช่นเดียวกับ RGB มี RGBa และ HSL มี HSLa Hex ก็มีช่องอัลฟ่าซึ่งแสดงโดยการเพิ่มบล็อกสองหลักพิเศษ เพื่อให้เครื่องหมายสีฐานสิบหก #RRGGBB กลายเป็น #RRGGBBAA (สำหรับอัลฟ่า)
ตัวอย่างเช่น สีฐานสิบหกต่อไปนี้เป็นสีดำ 100% โดยมีความทึบ 25% (75
):
#00000075 /* Black with 25% opacity */
ผลลัพธ์:
สีฐานสิบหกพร้อมช่องอัลฟ่าBtw:คุณสามารถเขียนสัญกรณ์สีฐานสิบหกโดยใช้ตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็ก มันไม่แตกต่างกันเลยไม่ว่าคุณจะเขียน #ffffff หรือ #FFFFFF
รองรับเบราว์เซอร์สำหรับสัญกรณ์ฐานสิบหก
- #RRGGBB รองรับสัญกรณ์สีฐานสิบหกในเบราว์เซอร์ทั้งหมด รวมถึงเบราว์เซอร์รุ่นเก่า
- #RRGGBBAA สัญกรณ์สีฐานสิบหกใช้งานได้ในเบราว์เซอร์ที่ทันสมัยทั้งหมด แต่ไม่ใช่ใน IE11 (หากใครเห็นว่า ทันสมัย )