CSS Color Values

ตามที่เราได้เรียนรู้กันมา แม่สีนั้นประกอบไปด้วย 3 สี คือ สีแดง สีเขียว และสีน้ำเงิน ซึ่งเราใช้หลักการของแม่สีนี้มาประกอบกับการใส่สีของ CSS

การใส่สีด้วย CSS มีหลายวิธีแตกต่างกันไปดังนี้

• ใช้ชื่อของสี
• ใช้ค่า RGB
• ใช้ค่า Hexadecimal
• ใช้ค่า HSL (CSS3)
• ใช้ค่า HWB (CSS4)

ชื่อของสี

สามารถใส่ชื่อของสีลงไปได้เลยโดยตรง

<span style=”background-color:Magenta”>By Color Name</span>

ค่า RGB

RGB สามารถใช้ได้กับทุก browser และกำหนดค่าได้ด้วยรูปแบบดังนี้

rgb( RED , GREEN , BLUE )

แต่ละ parameter ใช้กำหนดค่าความเข้มของสี โดยใช้ตัวเลขตั้งแต่ 0 ถึง 255

rgb(255,0,0) — แดง   rgb(0,255,0) — เขียว      rgb(0,0,255) — น้ำเงิน
rgb(0,0,0) — ดำ      rgb(128,128,128) — เทา   rgb(255,255,255) — ขาว

ค่า Hexadecimal

Hexadecimal สามารถใช้ได้กับทุก browser และกำหนดค่าได้ด้วยรูปแบบดังนี้

#RRGGBB

RR (แดง), GG (เขียว) and BB (น้ำเงิน) ใช้กำหนดค่าความเข้มของสี ตั้งแต่ 00 ถึง FF (FF คือค่าสูงสุด เทียบได้กับเลข 255 ของ RGB)

สามารถใช้ได้ทั้งตัวพิมพ์ใหญ่และพิมพ์เล็ก ตัวพิมพ์เล็กจะง่ายต่อการเขียน ตัวพิมพ์ใหญ่จะง่ายต่อการอ่าน

#FF0000 — แดง     #00FF00 — เขียว     #0000FF — น้ำเงิน
#000000 — ดำ      #808080 — เทา      #FFFFFF — ขาว

ค่า HSL

สามารถใช้ได้กับ IE9 ขึ้นไป, Firefox, Chrome, Safari, และใน Opera 10 ขึ้นไป

HSL มาจาก hue, saturation, และ lightness และกำหนดค่าได้ด้วยรูปแบบดังนี้

hsl(hue, saturation, lightness)

Hue — เป็นค่าความเข้มของสีจากวงล้อสี ตั้งแต่ 0–360

0 คือ แดง, 120 คือ เขียว, 240 คือ น้ำเงิน

Saturation — คือค่าความอิ่มตัวของสี เป็นค่าเปอร์เซ็นต์; 0 คือ เฉดสีเทา และ 100% คือสีอิ่มตัวเต็มที่

Lightness — เป็นค่าเปอร์เซ็นต์; 0% คือดำ 100% คือขาว

hsl(210, 100%, 50%)   hsl(0, 100%, 50%)   hsl(120, 100%, 50%)

ค่า HWB

HWB มาจาก Hue, Whiteness, และ Blackness และได้ถูกเสนอให้ใช้เป็นมาตรฐานสำหรับ CSS4 แต่ตอนนี้วิธีนี้ยังใช้ไม่ได้เนื่องจากยังไม่สนับสนุน HTML ถ้ามีการอัพเดทใดๆเพิ่มจะไปศึกษามาแล้วค่อยว่ากันทีหลังนะคุณผู้อ่าน

ตัวอย่างการใช้งานในแบบต่างๆตามด้านบนเลยนะ ขออนุญาตใช้ inline CSS เพื่อความสะดวกรวดเร็ว หวังว่าบทความนี้จะเป็นประโยชน์ต่อผู้อ่านไม่มากก็น้อย แล้วพบกันใหม่ในบทความต่อๆไปจ้า :)

อ้างอิงและอ่านเพิ่มเติม

https://simple.wikipedia.org/wiki/Color_wheel

https://www.w3schools.com/colors/default.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value