CSS Legal Color Values
CSS สี
สีใน CSS สามารถระบุได้โดยวิธีต่อไปนี้:
- สีเลขฐานสิบหก
- สีเลขฐานสิบหกที่มีความโปร่งใส
- สี RGB
- สี RGBA
- สี HSL
- สี HSLA
- ชื่อสีที่กำหนดไว้ล่วงหน้า/ข้ามเบราว์เซอร์
- ด้วย
currentcolorคีย์เวิร์ด
เลขฐานสิบหกสี
สีเลขฐานสิบหกถูกระบุด้วย: #RRGGBB โดยที่จำนวนเต็มเลขฐานสิบหก RR (สีแดง), GG (สีเขียว) และ BB (สีน้ำเงิน) จะระบุส่วนประกอบของสี ค่าทั้งหมดต้องอยู่ระหว่าง 00 ถึง FF
ตัวอย่างเช่น ค่า #0000ff จะแสดงเป็นสีน้ำเงิน เนื่องจากองค์ประกอบสีน้ำเงินถูกตั้งค่าเป็นค่าสูงสุด (ff) และค่าอื่นๆ ถูกกำหนดเป็น 00
ตัวอย่าง
กำหนดสี HEX ที่แตกต่างกัน:
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
เลขฐานสิบหกสีที่มีความโปร่งใส
ระบุสีฐานสิบหกด้วย: #RRGGBB หากต้องการเพิ่มความโปร่งใส ให้เพิ่มตัวเลขเพิ่มเติมสองหลักระหว่าง 00 ถึง FF
ตัวอย่าง
กำหนดสี HEX ที่แตกต่างกันด้วยความโปร่งใส:
#p1a {background-color: #ff000080;} /* red transparency */
#p2a {background-color: #00ff0080;} /* green
transparency */
#p3a {background-color: #0000ff80;} /* blue
transparency */
สี RGB
ค่าสี RGB ถูกกำหนดด้วยฟังก์ชัน rgb()ซึ่งมีรูปแบบดังนี้:
rgb(red, green, blue)
พารามิเตอร์แต่ละตัว (สีแดง สีเขียว และสีน้ำเงิน) กำหนดความเข้มของสี และสามารถเป็นจำนวนเต็มระหว่าง 0 ถึง 255 หรือค่าเปอร์เซ็นต์ (จาก 0% ถึง 100%)
ตัวอย่างเช่น ค่า rgb(0,0,255) จะแสดงเป็นสีน้ำเงิน เนื่องจากพารามิเตอร์สีน้ำเงินถูกตั้งค่าเป็นค่าสูงสุด (255) และค่าอื่นๆ ถูกกำหนดเป็น 0
นอกจากนี้ ค่าต่อไปนี้กำหนดสีที่เท่ากัน: rgb(0,0,255) และ rgb(0%,0%,100%)
ตัวอย่าง
กำหนดสี RGB ที่แตกต่างกัน:
#p1 {background-color: rgb(255, 0, 0);} /* red */
#p2 {background-color: rgb(0, 255, 0);} /* green */
#p3 {background-color: rgb(0, 0, 255);} /* blue */
RGBA สี
ค่าสี RGBA เป็นส่วนขยายของค่าสี RGB ที่มีช่องอัลฟา - ซึ่งระบุความทึบของวัตถุ
สี RGBA ถูกกำหนดด้วยฟังก์ชัน rgba()ซึ่งมีรูปแบบดังนี้:
rgba(red, green, blue, alpha)
พารามิเตอร์อัลฟาเป็นตัวเลขระหว่าง 0.0 (โปร่งใสทั้งหมด) ถึง 1.0 (ทึบเต็มที่)
ตัวอย่าง
กำหนดสี RGB ที่แตกต่างกันด้วยความทึบ:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
HSL สี
HSL ย่อมาจาก hue, saturation และ lightness - และแสดงถึงการแสดงสีในพิกัดทรงกระบอก
ค่าสี HSL ถูกระบุด้วยฟังก์ชัน hsl()ซึ่งมีรูปแบบดังนี้:
hsl(hue, saturation, lightness)
Hue คือดีกรีของวงล้อสี (ตั้งแต่ 0 ถึง 360) - 0 (หรือ 360) คือสีแดง 120 คือสีเขียว 240 คือสีน้ำเงิน ความอิ่มตัวเป็นค่าเปอร์เซ็นต์ 0% หมายถึงเฉดสีเทา และ 100% เป็นสีเต็ม ความสว่างยังเป็นเปอร์เซ็นต์ 0% คือสีดำ 100% คือสีขาว
ตัวอย่าง
กำหนดสี HSL ที่แตกต่างกัน:
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
HSLA สี
ค่าสี HSLA เป็นส่วนขยายของค่าสี HSL ที่มีช่องอัลฟา - ซึ่งระบุความทึบของวัตถุ
ค่าสี HSLA ถูกระบุด้วยฟังก์ชัน hsla()ซึ่งมีรูปแบบดังนี้:
hsla(hue, saturation, lightness, alpha)
พารามิเตอร์อัลฟาเป็นตัวเลขระหว่าง 0.0 (โปร่งใสทั้งหมด) ถึง 1.0 (ทึบเต็มที่)
ตัวอย่าง
กำหนดสี HSL ที่แตกต่างกันด้วยความทึบ:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */
ชื่อสีที่กำหนดไว้ล่วงหน้า/ข้ามเบราว์เซอร์
ชื่อสี 140 ถูกกำหนดไว้ล่วงหน้าในข้อกำหนดสี HTML และ CSS
ตัวอย่างเช่น: blue, red, coral, brown, ฯลฯ:
ตัวอย่าง
กำหนดชื่อสีต่างๆ:
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
รายชื่อของชื่อที่กำหนดไว้ล่วงหน้าทั้งหมดสามารถพบได้ในการอ้างอิงชื่อสีของ เรา
คีย์เวิร์ดสีปัจจุบัน
คำcurrentcolorหลักหมายถึงค่าของคุณสมบัติสีขององค์ประกอบ
ตัวอย่าง
สีเส้นขอบขององค์ประกอบ <div> ต่อไปนี้จะเป็นสีน้ำเงิน เนื่องจากสีข้อความขององค์ประกอบ <div> เป็นสีน้ำเงิน:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}