ค่าสี CSS กฎหมาย

สี CSS

สีใน CSS สามารถระบุได้โดยวิธีการดังต่อไปนี้:

สีเลขฐานสิบหก
สี RGB
สี RGBA
สี HSL
สี HSLA
ชื่อสีที่กำหนดไว้ล่วงหน้า / เบราว์เซอร์

สีเลขฐานสิบหก

ค่าสีฐานสิบหกได้รับการสนับสนุนในเบราว์เซอร์ที่สำคัญทั้งหมด

สีฐานสิบหกมีการระบุด้วย: # RRGGBB ที่ RR (red) , GG (green) และบีบี (blue) เลขฐานสิบหกระบุส่วนประกอบของสี ค่าทั้งหมดจะต้องอยู่ระหว่าง 00 และ FF

ตัวอย่างเช่นค่า # 0000FF จะกลายเป็นสีฟ้าเพราะองค์ประกอบสีฟ้าถูกตั้งค่าสูงสุด (ff) และคนอื่น ๆ มีการกำหนดให้ 00

ตัวอย่าง

กำหนดสี HEX แตกต่างกัน:

#p1 {background-color: #ff0000;}   /* red */
#p2 {background-color: #00ff00;}   /* green */
#p3 {background-color: #0000ff;}   /* blue */

ลองตัวเอง»

สี RGB

ค่าสี RGB ได้รับการสนับสนุนในเบราว์เซอร์ที่สำคัญทั้งหมด

ค่าสี RGB จะถูกระบุด้วย: rgb(red, green, blue) แต่ละพารามิเตอร์ (สีแดง, สีเขียวและสีน้ำเงิน) กำหนดความเข้มของสีและสามารถเป็นจำนวนเต็มระหว่าง 0 และ 255 หรือค่าเปอร์เซ็นต์ (from 0% to 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 รับการสนับสนุนใน IE9 +, Firefox 3+, Chrome, Safari และ Opera ใน 10+

ค่าสี RGBA เป็นส่วนขยายของค่าสี RGB ที่มีช่องอัลฟา - ซึ่งระบุความทึบแสงของวัตถุ

ค่าสี RGBA ถูกระบุด้วย: rgba(red, green, blue, alpha) พารามิเตอร์อัลฟาเป็นตัวเลขระหว่าง 0.0 (fully transparent) และ 1.0 (fully opaque)

ตัวอย่าง

กำหนดสี 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 รับการสนับสนุนใน IE9 +, Firefox, Chrome, Safari และ Opera ใน 10+

HSL ยืนสำหรับสี, ความอิ่มตัวและความสว่าง - และแสดงให้เห็นถึงรูปทรงกระบอกพิกัดตัวแทนของสี

ค่าสี HSL ถูกระบุด้วย: hsl(hue, saturation, lightness)

เว้เป็นระดับบนวงล้อสี (from 0 to 360) - 0 (or 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 รับการสนับสนุนใน IE9 +, Firefox 3+, Chrome, Safari และ Opera ใน 10+

ค่าสี HSLA เป็นส่วนขยายของค่าสี HSL กับช่องอัลฟา - ซึ่งระบุความทึบแสงของวัตถุ

ค่าสี HSLA ถูกระบุด้วย: hsla(hue, saturation, lightness, alpha) ที่พารามิเตอร์อัลฟากำหนดทึบ พารามิเตอร์อัลฟาเป็นตัวเลขระหว่าง 0.0 (fully transparent) และ 1.0 (fully opaque)

ตัวอย่าง

กำหนดสี 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 */

ลองตัวเอง»