CSS Colors

ในเนื้อหาส่วนนี้จะเกี่ยวข้องกับสี ซึ่งก่อนหน้านี้ได้มีการอธิบายเกี่ยวกับสีในรูปแบบต่างๆ ในบทที่ 3 ดังนั้นในเนื้อหานี้จึงเป็นการอธิบายเพื่อเสริมเข้าใจเข้าเกี่ยวกับรูปแบบของสี 

สี (colors) หลักๆแบ่งออกเป็น 3 รูปแบบหลักดังนี้

  1. RGB 
  2. HSL 
  3. HEX

 

1.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 Color

<html>
 <head>
  <style>
   body{
   	background-color: rgb(2, 25, 245);
   }
   div{
   	background-color: rgb(255,255,255);
    color: rgb(2, 25, 245);
   }
  </style>
 </head>
 
 <body>
  <div>Example 01</div>
  <div>Example 02</div>
  <div>Example 03</div>
 </body> 
</html>

ไฟล์ที่ 1 css_rgb.html

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>

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

 

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

 

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>

 

3.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: