Skip to content
หน้าแรก » HTML HEX Colors การใช้งานสีแบบ HEX ใน HTML

HTML HEX Colors การใช้งานสีแบบ HEX ใน HTML

HTML HEX Colors การใช้งานสีแบบ HEX ใน HTML

HTML HEX Colors การใช้งานสีแบบ HEX ใน HTML

ใน HTML เราสามารถใช้งานสีโดยการระบุรหัสสีเป็นตัวเลขฐานสิบหก ในรูปแบบ #rrggbb โดยที่ rr หมายถึงสีแดง (Red) ส่วน gg หมายถึงสีเขียว (Green) และ bb หมายถึงสีน้ำเงิน (Blue)

และสามารถระบุค่าตัวเลขฐานสิบหกให้สีแต่ละสีได้ตั้งแต่ค่า 00 จนถึง ff เช่น #ff0000 หมายถึง สีแดง เพราะค่าสีแดง rr ถูกกำหนดให้เป็นค่าสูงสุดคือ ff ส่วนค่าสีอื่น ๆ ถูกกำหนดให้เป็น 00 จึงทำให้ได้สีออกมาเป็นสีแดงอย่างเดียว

ตัวอย่างการกำหนดค่าสีแบบ HEX

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

สีที่ได้จากโค้ดด้านบน

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd

ส่วนโทนสีเทา จะได้จากการกำหนดค่าให้แต่ละสีมีค่าเท่ากัน เช่น

<h1 style="background-color:#000000;">#000000</h1>
<h1 style="background-color:#3c3c3c;">#3c3c3c</h1>
<h1 style="background-color:#787878;">#787878</h1>
<h1 style="background-color:#b4b4b4;">#b4b4b4</h1>
<h1 style="background-color:#f0f0f0;">#f0f0f0</h1>
<h1 style="background-color:#ffffff;">#ffffff</h1>

สีที่ได้จากโค้ดด้านบน

#000000

#3c3c3c

#787878

#b4b4b4

#f0f0f0

#ffffff

ตัวอย่างสีและรหัสสีแบบ HEX

#CD5C5C

#F08080

#FA8072

#E9967A

#FFA07A

#DC143C

#FF0000

#B22222

#8B0000

#FFC0CB

#FFB6C1

#FF69B4

#FF1493

#C71585

#DB7093

#FFA07A

#FF7F50

#FF6347

#FF4500

#FF8C00

#FFA500

#FFD700

#FFFF00

#FFFFE0

#FFFACD

#FAFAD2

#FFEFD5

#FFE4B5

#FFDAB9

#EEE8AA

#F0E68C

#BDB76B

#E6E6FA

#D8BFD8

#DDA0DD

#EE82EE

#DA70D6

#FF00FF

#FF00FF

#BA55D3

#9370DB

#663399

#8A2BE2

#9400D3

#9932CC

#8B008B

#800080

#4B0082

#6A5ACD

#483D8B

#7B68EE

#ADFF2F

#7FFF00

#7CFC00

#00FF00

#32CD32

#98FB98

#90EE90

#00FA9A

#00FF7F

#3CB371

#2E8B57

#228B22

#008000

#006400

#9ACD32

#6B8E23

#808000

#556B2F

#66CDAA

#8FBC8B

#20B2AA

#008B8B

#008080

#00FFFF

#00FFFF

#E0FFFF

#AFEEEE

#7FFFD4

#40E0D0

#48D1CC

#00CED1

#5F9EA0

#4682B4

#B0C4DE

#B0E0E6

#ADD8E6

#87CEEB

#87CEFA

#00BFFF

#1E90FF

#6495ED

#000000

#4169E1

#0000FF

#0000CD

#00008B

#000080

#191970

#FFF8DC

#FFEBCD

#FFE4C4

#FFDEAD

#F5DEB3

#DEB887

#D2B48C

#BC8F8F

#F4A460

#DAA520

#B8860B

#CD853F

#D2691E

#8B4513

#A0522D

#A52A2A

#800000

#FFFFFF

#FFFAFA

#F0FFF0

#F5FFFA

#F0FFFF

#F0F8FF

#F8F8FF

#F5F5F5

#FFF5EE

#F5F5DC

#FDF5E6

#FFFAF0

#FFFFF0

#FAEBD7

#FAF0E6

#FFF0F5

#FFE4E1

#DCDCDC

#D3D3D3

#C0C0C0

#A9A9A9

#808080

#696969

#778899

#708090

#2F4F4F

Tags: