Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

วิธีใช้ Hex Colours ใน CSS

เรียนรู้วิธีใช้สีฐานสิบหก (เรียกอีกอย่างว่า “สีฐานสิบหก” ใน 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 (หากใครเห็นว่า ทันสมัย )