CSS Colors ระบบสีใน CSS

เราสามารถใช้งานระบบสีใน CSS ได้ด้วยการระบุชื่อสีหรือระบุเป็นค่าสีในระบบสีต่าง ๆ เช่น RGB, HEX, HSL, RGBA, HSLA

Color Name ชื่อสี

ใน CSS เราสามารถใช้งานระบบสีได้โดยการระบุชื่อสี เช่น Red, Green, Blue เป็นต้น ก็จะได้สีตามชื่อสีที่ระบุ ซึ่งชื่อสีที่ใช้ก็เป็นชื่อสีในระบบสีของ HTML นั่นเอง เช่น

ดูรายการชื่อสีและตัวอย่างสีได้ที่นี่

CSS Background Color การกำหนดสีพื้นหลังด้วย CSS

เราสามารถใช้ CSS กำหนดสีพื้นหลังให้กับเอลิเมนต์ต่าง ๆ ได้ โดยการกำหนดค่าให้พร็อพเพอร์ตี้ background-color

<h1 style="background-color:DodgerBlue;">สวัสดีชาวโลก</h1>
<p style="background-color:Tomato;">สวัสดีชาวโลกผู้น่ารัก</p> 

สวัสดีชาวโลก

สวัสดีชาวโลกผู้น่ารัก

CSS Text Color การกำหนดสีตัวอักษรด้วย CSS

ถ้าต้องการใช้ CSS กำหนดสีตัวอักษร ให้กำหนดที่พร็อพเพอร์ตี้ color ดังตัวอย่าง

<h1 style="color:Tomato;">สวัสดีชาวโลก</h1>
<p style="color:DodgerBlue;">สวัสดีชาวโลกผู้น่ารัก</p>
<p style="color:MediumSeaGreen;">สวัสดีชาวโลกผู้ชื่นชอบ CSS</p> 

สวัสดีชาวโลก

สวัสดีชาวโลกผู้น่ารัก

สวัสดีชาวโลกผู้ชื่นชอบ CSS

CSS Border Color กำหนดสีขอบเอลิเมนต์ด้วย CSS

ถ้าต้องการกำหนดสีขอบให้เอลิเมนต์ สามารถกำหนดได้ที่พร็อพเพอร์ตี้ border ดังนี้

<h1 style="border:2px solid Tomato;">สวัสดีชาวโลก</h1>
<h1 style="border:2px solid DodgerBlue;">สวัสดีชาวโลก</h1>
<h1 style="border:2px solid Violet;">สวัสดีชาวโลก</h1> 

สวัสดีชาวโลก

สวัสดีชาวโลก

สวัสดีชาวโลก

CSS Color Values ค่าสีใน CSS

ใน CSS เราสามารถกำหนดค่าสีในระบบสีต่าง ๆ เช่น RGB, HEX, XSL, RGBA, XSLA ดังตัวอย่าง

<h1 style="background-color:rgb(156, 150, 200);">rgb(156, 150, 200)</h1>
<h1 style="background-color:#ff4065;">#ff4065</h1>
<h1 style="background-color:hsl(20, 80%, 84%);">hsl(20, 80%, 84%)</h1>

<h1 style="background-color:rgba(200, 125, 71, 0.5);">rgba(200, 125, 71, 0.5)</h1>
<h1 style="background-color:hsla(20, 90%, 64%, 0.5);">hsla(20, 90%, 64%, 0.5)</h1> 

rgb(156, 150, 200)

#ff4065

hsl(20, 80%, 84%)

rgba(200, 125, 71, 0.5)

hsla(20, 90%, 64%, 0.5)

ดูตัวอย่างสีและค่าสีในระบะ RGB ที่นี่

ดูตัวอย่างสีและค่าสีในระบบ HEX ที่นี่

คุณอาจสนใจ:

CSS Syntax รูปแบบการเขียนโค้ด CSS CSS Selectors การกำหนดซีเล็คเตอร์ใน CSS เขียน CSS ไว้ตรงไหนได้บ้าง CSS Backgrounds กำหนดพื้นหลังด้วย CSS