ดีครับดอทคอม

HTML RGB Colors การใช้งานระบบสี RGB

HTML RGB Colors การใช้งานระบบสี RGB

HTML RGB Colors การใช้งานระบบสี RGB

ใน HTML เราสามารถกำหนดสีแบบ RGB ได้ ในรูปแบบ

 rgb(red, green, blue) 

โดยพารามิเตอร์ (red, green, blue) ใจระบุความหนาแน่นของสีแต่ละค่าคือ (แดง, เขียว, น้ำเงิน) ซึ่งสามารถระบุได้ระหว่าง 0-255

ตัวอย่างเช่น ถ้าเราระบุเป็น rgb(255, 0, 0) จะได้สีแดง เพราะพารามิเตอร์ตัวแรกคือ red ถูกกำหนดเป็นค่าสูงสุดคือ 255 ส่วนสีอื่น ๆ (เขียวและน้ำเงิน) ถูกกำหนดเป็น 0

ถ้าต้องการสีดำ ให้กำหนดพารามิเตอร์ทุกตัวเป็น 0 ดังนี้ rgb(0, 0, 0)

แต่ถ้าต้องการสีขาว ให้กำหนดพารามิเตอร์ทุกตัวเป็น 255 ดังนี้ rgb(255, 255, 255)

การกำหนดค่าสีในระบบ RGB เราจะได้สีจากการผสมกันของทั้ง 3 สี คือ แดง เขียว น้ำเงิน ตามสัดส่วนความหนาแน่นของค่าสีที่กำหนดให้แต่ละสี ดังมีตัวอย่างดังนี้

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>

ตัวอย่าง

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

โทนสีเทา จะได้จากการกำหนดค่าสีทั้ง 3 สีเท่า ๆ กัน ดังตัวอย่าง

<h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1>
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
<h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1>

ตัวอย่าง

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

การกำหนดสีแบบ RGBA

RGBA คือส่วนเสริมของระบบ RGB โดย A คือ Alpha Chanel สำหรับการกำหนดค่าความโปร่งแสงของสี

เมื่อต้องการใช้งานสีในระบบ RGBA เราจะใช้ใช้รูปแบบ rgba(red, green, blue, alpha) โดยค่า alpha จะสามารถกำหนดได้ตั้งแต่ 0.0 – 1.0 โดยค่า 0.0 หมายถึง โปร่งแสงที่สุด ส่วน 1.0 คือ สีทึบ (ไม่โปร่ง)

ตัวอย่างกานใช้งานสีในระบบ RGBA

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

ตัวอย่างสีและค่าสีแบบ RGB

rgb(205, 92, 92)

rgb(240, 128, 128)

RGB(250, 128, 114)

RGB(233, 150, 122)

RGB(255, 160, 122)

RGB(220, 20, 60)

RGB(255, 0, 0)

RGB(178, 34, 34)

RGB(139, 0, 0)

RGB(255, 192, 203)

RGB(255, 182, 193)

RGB(255, 105, 180)

RGB(255, 20, 147)

RGB(199, 21, 133)

RGB(219, 112, 147)

RGB(255, 160, 122)

RGB(255, 127, 80)

RGB(255, 99, 71)

RGB(255, 69, 0)

RGB(255, 140, 0)

RGB(255, 165, 0)

RGB(255, 215, 0)

RGB(255, 255, 0)

RGB(255, 255, 224)

RGB(255, 250, 205)

RGB(250, 250, 210)

RGB(255, 239, 213)

RGB(255, 228, 181)

RGB(255, 218, 185)

RGB(238, 232, 170)

RGB(240, 230, 140)

RGB(189, 183, 107)

RGB(230, 230, 250)

RGB(216, 191, 216)

RGB(221, 160, 221)

RGB(238, 130, 238)

RGB(218, 112, 214)

RGB(255, 0, 255)

RGB(255, 0, 255)

RGB(186, 85, 211)

RGB(147, 112, 219)

RGB(102, 51, 153)

RGB(138, 43, 226)

RGB(148, 0, 211)

RGB(153, 50, 204)

RGB(139, 0, 139)

RGB(128, 0, 128)

RGB(75, 0, 130)

RGB(106, 90, 205)

RGB(72, 61, 139)

RGB(123, 104, 238)

RGB(173, 255, 47)

RGB(127, 255, 0)

RGB(124, 252, 0)

RGB(0, 255, 0)

RGB(50, 205, 50)

RGB(152, 251, 152)

RGB(144, 238, 144)

RGB(0, 250, 154)

RGB(0, 255, 127)

RGB(60, 179, 113)

RGB(46, 139, 87)

RGB(34, 139, 34)

RGB(0, 128, 0)

RGB(0, 100, 0)

RGB(154, 205, 50)

RGB(107, 142, 35)

RGB(128, 128, 0)

RGB(85, 107, 47)

RGB(102, 205, 170)

RGB(143, 188, 139)

RGB(32, 178, 170)

RGB(0, 139, 139)

RGB(0, 128, 128)

RGB(0, 255, 255)

RGB(0, 255, 255)

RGB(224, 255, 255)

RGB(175, 238, 238)

RGB(127, 255, 212)

RGB(64, 224, 208)

RGB(72, 209, 204)

RGB(0, 206, 209)

RGB(95, 158, 160)

RGB(70, 130, 180)

RGB(176, 196, 222)

RGB(176, 224, 230)

RGB(173, 216, 230)

RGB(135, 206, 235)

RGB(135, 206, 250)

RGB(0, 191, 255)

RGB(30, 144, 255)

RGB(100, 149, 237)

RGB(0, 0, 0)

RGB(65, 105, 225)

RGB(0, 0, 255)

RGB(0, 0, 205)

RGB(0, 0, 139)

RGB(0, 0, 128)

RGB(25, 25, 112)

RGB(255, 248, 220)

RGB(255, 235, 205)

RGB(255, 228, 196)

RGB(255, 222, 173)

RGB(245, 222, 179)

RGB(222, 184, 135)

RGB(210, 180, 140)

RGB(188, 143, 143)

RGB(244, 164, 96)

RGB(218, 165, 32)

RGB(184, 134, 11)

RGB(205, 133, 63)

RGB(210, 105, 30)

RGB(139, 69, 19)

RGB(160, 82, 45)

RGB(165, 42, 42)

RGB(128, 0, 0)

RGB(255, 255, 255)

RGB(255, 250, 250)

RGB(240, 255, 240)

RGB(245, 255, 250)

RGB(240, 255, 255)

RGB(240, 248, 255)

RGB(248, 248, 255)

RGB(245, 245, 245)

RGB(255, 245, 238)

RGB(245, 245, 220)

RGB(253, 245, 230)

RGB(255, 250, 240)

RGB(255, 255, 240)

RGB(250, 235, 215)

RGB(250, 240, 230)

RGB(255, 240, 245)

RGB(255, 228, 225)

RGB(220, 220, 220)

RGB(211, 211, 211)

RGB(192, 192, 192)

RGB(169, 169, 169)

RGB(128, 128, 128)

RGB(105, 105, 105)

RGB(119, 136, 153)

RGB(112, 128, 144)

RGB(47, 79, 79)