CSS Colors

3 min readSep 22, 2019

เกี่ยวกับสี และเกี่ยวข้องกับการเพิ่ม Style แบบไหน จากเรื่องนี้ How To Add CSS มาดูกัน

CSS Color Names ชื่อของสี

CSS Background Color สีพื้นหลัง

มักจะเพิ่ม Style แบบ Inline CSS คือเพิ่มเข้าไปใน element เลย

<body style="background-color: rgb(235, 187, 207)"><h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Hello World</p></body>

CSS Text Color สีข้อความ

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Hello World</p>
<p style="color:MediumSeaGreen;">Hello World</p>

CSS Border Color สีของเส้นขอบ

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

CSS Color Values สีตามค่าสี

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

CSS RGB Value สีที่ระบุตามค่า RGB

rgb(red, green, blue)

<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>

RGBA Value สีที่เพิ่มค่าจากสี RGB

rgba(red, green, blue, alpha)

<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>

CSS HEX Value สีที่ระบุตามค่าเลขฐานสิบหก hexadecimal

<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>

HSL Value สีที่ระบุตามค่า saturation เข้ม และ lightness สว่าง

hsl(hue, saturation, lightness)

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>

HSLA Value สีที่เพิ่มค่าจากสี HSLA

hsla(hue, saturation, lightness, alpha)

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>