HTML Color (การกำหนดสีใน HTML) ถูกระบุด้วยชื่อสีที่กำหนดไว้ล่วงหน้า หรือด้วยค่า RGB, HEX, HSL, RGBA หรือ HSLA
HTML สามารถกำหนดสีให้กับองค์ประกอบต่าง ๆ ได้ เช่น สีพื้นหลัง ข้อความ หรือเส้นขอบ โดยใช้ชื่อสี หรือค่าสีในรูปแบบ RGB, HEX, HSL รวมถึงแบบโปร่งแสงอย่าง RGBA และ HSLA
ชื่อสี
ใน HTML สีสามารถระบุได้โดยใช้ชื่อสี
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
ซึ่ง HTML รองรับชื่อ สีมาตรฐาน 140 ชื่อ
สีพื้นหลัง
คุณสามารถตั้งค่าสีพื้นหลังสำหรับ HTML Element ได้ดังนี้
<h1 style="background-color:DodgerBlue;">หัวข้อสีฟ้างับ</h1>
<p style="background-color:Tomato;">เนื้อหานี้จะเป็นสีพื้นหลังออกแนวส้มโทมาโท่</p>
สีข้อความ
คุณสามารถกำหนดสีของข้อความได้ดังนี้
<p style="color:Tomato;">ตัวอย่างสี</p>
<p style="color:DodgerBlue;">ตัวอย่างสี 2</p>
<p style="color:MediumSeaGreen;">ตัวอย่างสี 3</p>
สีขอบ
คุณสามารถกำหนดสีของเส้นขอบได้แบบนี้
<h1 style="border: 2px solid Tomato;">การทำขอบสี</h1>
<h1 style="border: 2px solid DodgerBlue;">การทำขอบสี</h1>
<h1 style="border: 2px solid Violet;">การทำขอบสี</h1>
ค่าสี
ใน HTML ยังสามารถระบุสีโดยใช้ค่า RGB ค่า HEX ค่า HSL ค่า RGBA และค่า HSLA
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>
ค่าสี RGB
ใน HTML สามารถกำหนดสีได้ด้วยรูปแบบ RGB (Red, Green, Blue)
โดยใช้ค่าตัวเลขตั้งแต่ 0–255 เพื่อบอกระดับความเข้มของแต่ละสี
ซึ่งหมายความว่าสามารถผสมสีได้ทั้งหมด 16,777,216 สี (256 × 256 × 256)
| คำสั่ง | ผลลัพธ์ | คำอธิบาย |
|---|---|---|
rgb(255, 0, 0) | สีแดง | ค่าแดงสูงสุด (255) ส่วนเขียวและน้ำเงินเป็น 0 |
rgb(0, 255, 0) | สีเขียว | ค่าเขียวสูงสุด ส่วนที่เหลือเป็น 0 |
rgb(0, 0, 255) | สีน้ำเงิน | ค่าน้ำเงินสูงสุด ส่วนที่เหลือเป็น 0 |
rgb(0, 0, 0) | สีดำ | ทุกค่าสีเป็น 0 |
rgb(255, 255, 255) | สีขาว | ทุกค่าสีเป็น 255 |
<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>
<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>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>
เฉดสีเทา
เฉดสีเทามักถูกกำหนดโดยใช้ค่าที่เท่ากันสำหรับพารามิเตอร์ทั้งสามตัว:
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(100, 100, 100);">rgb(100, 100, 100)</h1>
<h1 style="background-color:rgb(140, 140, 140);">rgb(140, 140, 140)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(200, 200, 200);">rgb(200, 200, 200)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
ค่าสี HEX
ใน HTML สามารถระบุสีได้ด้วย ค่าสีฐาน 16 (Hexadecimal)
มีรูปแบบเป็น #rrggbb โดยที่
- rr แทนสี แดง (Red)
- gg แทนสี เขียว (Green)
- bb แทนสี น้ำเงิน (Blue)
แต่ละคู่เป็นค่าตัวเลขฐาน 16 ตั้งแต่ 00 – ff
ซึ่งเทียบเท่ากับค่าตัวเลข 0 – 255 ในระบบ RGB
| ค่าสี HEX | ผลลัพธ์ | คำอธิบาย |
|---|---|---|
#ff0000 | สีแดง | ค่าแดงสูงสุด (ff) เขียวและน้ำเงินเป็น 00 |
#00ff00 | สีเขียว | ค่าเขียวสูงสุด ส่วนที่เหลือเป็น 00 |
#0000ff | สีน้ำเงิน | ค่าน้ำเงินสูงสุด ส่วนที่เหลือเป็น 00 |
#000000 | สีดำ | ทุกค่าเป็น 00 |
#ffffff | สีขาว | ทุกค่าเป็น ff |
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>
เฉดสีเทา
เฉดสีเทามักถูกกำหนดโดยใช้ค่าที่เท่ากันสำหรับพารามิเตอร์ทั้งสามตัว:
<h1 style="background-color:#404040;">#404040</h1>
<h1 style="background-color:#686868;">#686868</h1>
<h1 style="background-color:#a0a0a0;">#a0a0a0</h1>
<h1 style="background-color:#bebebe;">#bebebe</h1>
<h1 style="background-color:#dcdcdc;">#dcdcdc</h1>
<h1 style="background-color:#f8f8f8;">#f8f8f8</h1>
ค่าสี HSL
ใน HTML สามารถระบุสีได้โดยใช้
HSL (Hue, Saturation, Lightness)
ซึ่งเป็นอีกหนึ่งรูปแบบที่เข้าใจง่ายและปรับโทนสีได้อย่างยืดหยุ่น
| พารามิเตอร์ | ความหมาย | ช่วงค่า | ตัวอย่าง |
|---|---|---|---|
| Hue (สีพื้นฐาน) | ระดับมุมของวงล้อสี | 0–360° | 0° = สีแดง 120° = สีเขียว 240° = สีน้ำเงิน |
| Saturation (ความอิ่มของสี) | ค่าความสดของสี | 0–100% | 0% = เทา, 100% = สีสด |
| Lightness (ความสว่าง) | ค่าความสว่างของสี | 0–100% | 0% = ดำ, 100% = ขาว |
<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>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>