HTML Colors

การใช้สีของ HTML สามารถระบุค่าสีเป็น ชื่อของสี(ศัพท์สีอังกฤษที่ใช้ทั่วไป) ,RGB, RGBA,  HSL, HSLA หรือ HEX ก็ได้ 

1.ชื่อสี

ตัวอย่างการเรียกใช้สีโดยระบุค่าเป็นชื่อของสืที่ต้องการ

ตัวอย่างที่ 1.1 กำหนดสีให้กับหัวข้ออย่างน้อย 3 สี

<html>
 <head>
  <title>กำหนดสีให้กับหัวข้อ</title>
 </head>
 <body>
  <h1 style="color:red;">หัวข้อที่ 1</h1>
  <h1 style="color:green;">หัวข้อที่ 2</h1>
  <h1 style="color:blue;">หัวข้อที่ 3</h1>
 </body>
</html>

ตัวอย่างที่ 1.1 เป็นการระบุค่าสีโดยใช้คียเวิร์ดชื่อของสีในการระบุค่า

ยกตัวอย่างของบรรทัดที่ 6 ภายใน attribute style ประกอบด้วยพารามิเตอร์ 2 ตัว 1) color ใช้ในการกำหนดสีของตัวหยังสือ 2) ใช้ระบุสีที่ต้องการ 

ซึ่งจากตัวอย่างที่ 1.1 มีการกำหนดค่าสีของหัวข้อเป็น 3 สี ที่แตกต่างกันตามลำดับได้แก่ 

  • สีแดง
  • สีเขียว
  • สีน้ำเงิน

 

ตัวอย่างที่ 1.2 กำหนดสีของเงาให้กับหัวข้อ

<html>
 <head>
  <title>กำหนดสีให้กับหัวข้อ</title>
 </head>
 <body>
  <h1 style="color:red;text-shadow:2px 3px 3px blue;">หัวข้อที่ 1</h1>
  <h1 style="color:green;text-shadow:2px 3px 3px red;">หัวข้อที่ 2</h1>
  <h1 style="color:blue;text-shadow:2px 3px 3px green;">หัวข้อที่ 3</h1>
 </body>
</html>

ในตัวอย่างที่ 1.2 ต่อเนื่องจากตัวอย่างที่ 1.1 โดยมีการเพิ่มเงาและกำหนดสีให้กับตัวหนังสือ 

 

2.RGB

RGB คือรูปแบบการผสมผสานระหว่างแม่สี 3 สี ประกอบด้วย สีแดง (R:Red) , สีเขียว (G:Green) และ สีน้ำเงิน (B:Blue)

รูปแบบของสี RGB

rgb(red,green,blue);

การเรียกใช้สีของ RGB จะเป็นลักษณะของตัวเลขตั้งแต่ 0-255 ซึ่งแสดงถึงความเข้มข้นของสีตามจำนวนค่า มาก/น้อย

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

 

ตัวอย่างการเรียกใช้สีในรูปแบบของ RGB เพื่อกำหนดพื้นหลังของหัวข้อ

<html>
 <head><title>การใช้สีรูปแบบ RGB</title></head>
 <body>
  <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>
 </body>
</html>

 

3.RGBA

ต่อมาคือรูปปแบบสี RGBA ซึ่ง RGBA มีรูปแบบเหมือนกันกับ RGB เพียงแต่สามารถกำหนดความโปร่งใสได้

รูปแบบของสี RGBA 

rgba(red, green, blue, alpha);

ค่าของ alpha (ความโปร่งใส จาง/เข้ม) สามารถกำหนดได้ตั้ง 0.0 (จางมาก) – 1.0 (เข้มมาก) ซึ่งจะแสดงผลลัพธ์ความจางเข้มมากน้อยตามลำดับ

ตัวอย่างการใช้สีรูปแบบ RGBA 

<html>
    <body>

        <h1 style="background-color:rgba(255, 157, 71, 0);">rgba(255, 157, 71, 0)</h1>
        <h1 style="background-color:rgba(255, 157, 71, 0.3);">rgba(255, 157, 71, 0.3)</h1>
        <h1 style="background-color:rgba(255, 157, 71, 0.8);">rgba(255, 157, 71, 0.8)</h1>
        <h1 style="background-color:rgba(255, 157, 71, 1);">rgba(255, 157, 71, 1)</h1>

    </body>
</html>

จากตัวอย่างเป็นการใช้สีส้มเป็นหลักเพื่อแสดงความต่างของความโปร่งใส จากจางไปหาเข้ม ตามลำดับ

 

4.HSL

สี HSL คืือความอิ่มตัว และความสว่างของสี ซึ่งมีรูปแบบดังนี้

รูปแบบสี HSL

hsl(hue, saturation, lightness);

  • hue คือ วงล้อสีในรูปแบบค่าตัวเลขตั้งแต่ 0-360 โดยค่า 0 คือสีแดง, 120 สีเขียว, 240 สีน้ำเงิน และ 360 คือสีแดง 
  • saturation คือความอิ่มตัว โดยกำหนดเป็นเปอร์เซนต์ ซึ่ง 0% เท่ากับเฉดสีเทา ส่วน 100% คือสีเต็ม(ปกติ)
  • lightness คือความสว่าง กำหนดเป็นเปอร์เชนต์ ซึ่ง 0% เท่ากับสีดำ , 50% สีปกติ และ 100% เท่ากับสีขาว  

 

ตัวอย่างการใช้สี HSL โดยใช้สีน้ำเงินเป็นหลัก 

<html>
 <body>
   <h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
   <h1 style="background-color:hsl(240, 50%, 47%);">hsl(240, 50%, 47%)</h1>
   <h1 style="background-color:hsl(240, 76%, 72%);">hsl(240, 76%, 72%)</h1>
 </body>
</html>

 

5.HSLA

HSLA เป็นรูปแบบสี HSL ซึ่งแสดงถึงความอิ่มตัว และความสว่างของสี เพียงแต่เพิ่มความโปร่งใสเข้ามาด้วย

รูปแบบของสี HSLA

hsla(hue, saturation, lightness , alpha);

 

ตัวอย่างการใช้สี HSLA 

<html>
  <body>
    <h1 style="background-color:hsla(0, 100%, 64%, 0);">hsla(0, 100%, 64%, 0)</h1>
    <h1 style="background-color:hsla(0, 100%, 64%, 0.2);">hsla(0, 100%, 64%, 0.2)</h1>
    <h1 style="background-color:hsla(0, 100%, 64%, 0.4);">hsla(0, 100%, 64%, 0.4)</h1>
    <h1 style="background-color:hsla(0, 100%, 64%, 0.6);">hsla(0, 100%, 64%, 0.6)</h1>
    <h1 style="background-color:hsla(0, 100%, 64%, 0.8);">hsla(0, 100%, 64%, 0.8)</h1>
    <h1 style="background-color:hsla(0, 100%, 64%, 1);">hsla(0, 100%, 64%, 1)</h1>
  </body>
</html>

 

6.HEX

HEX คือการระบุสีในรูปแบบของค่าตัวเลขฐาน 16 ซึ่งมีค่าตั้งแต่ 00-ff

รูปแบบของสี HEX

#rrggbb

  • rr เป็นตำแหน่งที่ใช้ในการระบุสีแดง
  • gg เป็นตำแหน่งที่ใช้ในการระบุสีเขียว
  • bb เป็นตำแหน่งที่ใช้ในการระบุสีน้ำเงิน 

ff คือค่าที่ใช้ในการระบุสีที่มีค่าสูงสุด ดังนั้นหากต้องการให้สีใดปรากฎเด่นชัดกว่าทุกสีสามารถกำหนดได้ดังต่อไปนี้

  • สีแดง #ff0000
  • สีเขียว #00ff00
  • สีน้ำเงิน #0000ff
  • สีขาว #ffffff
  • สีดำ #000000

ตัวอย่างการใช้สีรูปแบบ HEX เพื่อกำหนดสีตัวหนังสือ

<html>
  <body>
    <h1 style="color:#0000ff;">#0000ff</h1>
    <h1 style="color:#3cb371;">#3cb371</h1>
    <h1 style="color:#ee82ee;">#ee82ee</h1>
    <h1 style="color:#ffa500;">#ffa500</h1>
  </body>
</html>

 

 

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: