กวดวิชาสี
แสดงสีโดยผสมผสานแสงสีแดง สีเขียว และสีน้ำเงิน
ชื่อสี
ด้วย CSS คุณสามารถกำหนดสีได้โดยใช้ชื่อสี:
ตัวอย่าง
| Color | Name |
|---|---|
| Red | |
| Yellow | |
| Cyan | |
| Blue | |
| Magenta |
ค่าสี CSS
ด้วย CSS คุณสามารถระบุสีได้หลายวิธี:
- ตามชื่อสี
- เป็นค่า RGB
- เป็นค่าฐานสิบหก
- เป็นค่า HSL (CSS3)
- เป็นค่า HWB (CSS4)
- ด้วย
currentcolorคีย์เวิร์ด
สี RGB
รองรับค่าสี RGB ในเบราว์เซอร์ทั้งหมด
ค่าสี RGB ระบุด้วย: rgb( RED , GREEN , BLUE )
พารามิเตอร์แต่ละตัวกำหนดความเข้มของสีเป็นจำนวนเต็มระหว่าง 0 ถึง 255
ตัวอย่างเช่น rgb(0,0,255) จะแสดงเป็นสีน้ำเงิน เนื่องจากพารามิเตอร์สีน้ำเงินถูกตั้งค่าเป็นค่าสูงสุด (255) และพารามิเตอร์อื่นๆ ถูกตั้งค่าเป็น 0
ตัวอย่าง
| Color | RGB | Color |
|---|---|---|
| rgb(255,0,0) | Red | |
| rgb(0,255,0) | Green | |
| rgb(0,0,255) | Blue |
เฉดสีเทามักถูกกำหนดโดยใช้ค่าที่เท่ากันสำหรับแหล่งกำเนิดแสงทั้ง 3 แห่ง:
ตัวอย่าง
| Color | RGB | Color |
|---|---|---|
| rgb(0,0,0) | Black | |
| rgb(128,128,128) | Gray | |
| rgb(255,255,255) | White |
เลขฐานสิบหกสี
ค่าสีฐานสิบหกยังได้รับการสนับสนุนในเบราว์เซอร์ทั้งหมด
ระบุสีฐานสิบหกด้วย: # RR GG BB
RR (สีแดง), GG (สีเขียว) และ BB (สีน้ำเงิน) เป็นจำนวนเต็มฐานสิบหกระหว่าง 00 ถึง FF ซึ่งระบุความเข้มของสี
ตัวอย่างเช่น #0000FF จะแสดงเป็นสีน้ำเงิน เนื่องจากองค์ประกอบสีน้ำเงินถูกตั้งค่าเป็นค่าสูงสุด (FF) และองค์ประกอบอื่นๆ ถูกตั้งค่าเป็น 00
ตัวอย่าง
| Color | HEX | RGB | Color |
|---|---|---|---|
| #FF0000 | rgb(255,0,0) | Red | |
| #00FF00 | rgb(0,255,0) | Green | |
| #0000FF | rgb(0,0,255) | Blue |
เฉดสีเทามักถูกกำหนดโดยใช้ค่าที่เท่ากันสำหรับแหล่งกำเนิดแสงทั้ง 3 แห่ง:
ตัวอย่าง
| Color | HEX | RGB | Color |
|---|---|---|---|
| #000000 | rgb(0,0,0) | Black | |
| #808080 | rgb(128,128,128) | Gray | |
| #FFFFFF | rgb(255,255,255) | White |
ตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็ก?
คุณสามารถใช้อักษรตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็กเพื่อระบุค่าเลขฐานสิบหก
ตัวพิมพ์เล็กเขียนง่ายกว่า ตัวพิมพ์ใหญ่อ่านง่ายกว่า
ชื่อสี
CSS รองรับชื่อสีมาตรฐาน 140 ชื่อ
ในบทต่อไป คุณจะพบรายชื่อสีที่เรียงตามตัวอักษรพร้อมค่าเลขฐานสิบหก:
| Color Name | Hex | Color |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 |
คีย์เวิร์ดสีปัจจุบัน
คำcurrentcolorหลักหมายถึงค่าของคุณสมบัติสีขององค์ประกอบ
ตัวอย่าง
สีเส้นขอบขององค์ประกอบ <div> ต่อไปนี้จะเป็นสีน้ำเงิน เนื่องจากสีข้อความขององค์ประกอบ <div> เป็นสีน้ำเงิน:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}