 |
HTML > HTML Tutorial
สี HTML
สีได้รับการแสดงเป็นการผสมของสีแดง เขียว และน้ำเงิน (RGB)
ค่าสี
สี HTML สามารถได้รับการกำหนดเป็นรหัสเลขฐานสิบหกสำหรับการผสมค่าสี สีแดง เขียว และน้ำเงิน (RGB) ค่าต่ำสุดที่สามารถกำหนดได้คือ 0 (#00 ฐานสิบหก) และค่าสูงสุดคือ 255 (#FF ฐานสิบหก)
ตารางข้างนี้แสดงผลลัพธ์การผสมสีแดง เขียว และน้ำเงิน
| สี |
สี HEX |
สี RGB |
| |
#000000 |
rgb(0,0,0) |
| |
#FF0000 |
rgb(255,0,0) |
| |
#00FF00 |
rgb(0,255,0) |
| |
#0000FF |
rgb(0,0,255) |
| |
#FFFF00 |
rgb(255,255,0) |
| |
#00FFFF |
rgb(0,255,255) |
| |
#FF00FF |
rgb(255,0,255) |
| |
#C0C0C0 |
rgb(192,192,192) |
| |
#FFFFFF |
rgb(255,255,255) |
ชื่อสีมาตรฐาน W3C
W3 มีรายการ 16 ชื่อสีที่จะใช้ได้ใน HTML validator ชื่อสีคือ aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white และ yellow.
ชื่อสีข้าม browser
ตารางข้างล่างเป็นชื่อสีที่ได้รับการสนับสนุนโดย browser หลักทั้งหมด
หมายเหตุ ถ้าต้องการให้เพจตรวจสอบได้โดย validator ของ HTML หรือ CSS นั้น W3C ให้ใช้รายชื่อสีมาตรฐาน 16 สี นอกจากนั้นต้องระบุด้วยค่า RGB หรือเลขฐานสิบหก
| ชื่อสี |
HEX |
สี |
| AliceBlue |
#F0F8FF |
|
| AntiqueWhite |
#FAEBD7 |
|
| Aqua |
#00FFFF |
|
| Aquamarine |
#7FFFD4 |
|
| Azure |
#F0FFFF |
|
| Beige |
#F5F5DC |
|
| Bisque |
#FFE4C4 |
|
| Black |
#000000 |
|
| BlanchedAlmond |
#FFEBCD |
|
| Blue |
#0000FF |
|
| BlueViolet |
#8A2BE2 |
|
| Brown |
#A52A2A |
|
| BurlyWood |
#DEB887 |
|
| CadetBlue |
#5F9EA0 |
|
| Chartreuse |
#7FFF00 |
|
| Chocolate |
#D2691E |
|
| Coral |
#FF7F50 |
|
| CornflowerBlue |
#6495ED |
|
| Cornsilk |
#FFF8DC |
|
| Crimson |
#DC143C |
|
| Cyan |
#00FFFF |
|
| DarkBlue |
#00008B |
|
| DarkCyan |
#008B8B |
|
| DarkGoldenRod |
#B8860B |
|
| DarkGray |
#A9A9A9 |
|
| DarkGrey |
#A9A9A9 |
|
| DarkGreen |
#006400 |
|
| DarkKhaki |
#BDB76B |
|
| DarkMagenta |
#8B008B |
|
| DarkOliveGreen |
#556B2F |
|
| Darkorange |
#FF8C00 |
|
| DarkOrchid |
#9932CC |
|
| DarkRed |
#8B0000 |
|
| DarkSalmon |
#E9967A |
|
| DarkSeaGreen |
#8FBC8F |
|
| DarkSlateBlue |
#483D8B |
|
| DarkSlateGray |
#2F4F4F |
|
| DarkTurquoise |
#00CED1 |
|
| DarkViolet |
#9400D3 |
|
| DeepPink |
#FF1493 |
|
| DeepSkyBlue |
#00BFFF |
|
| DimGray |
#696969 |
|
| DimGrey |
#696969 |
|
| DodgerBlue |
#1E90FF |
|
| FireBrick |
#B22222 |
|
| FloralWhite |
#FFFAF0 |
|
| ForestGreen |
#228B22 |
|
| Fuchsia |
#FF00FF |
|
| Gainsboro |
#DCDCDC |
|
| GhostWhite |
#F8F8FF |
|
| Gold |
#FFD700 |
|
| GoldenRod |
#DAA520 |
|
| Gray |
#808080 |
|
| Green |
#008000 |
|
| GreenYellow |
#ADFF2F |
|
| HoneyDew |
#F0FFF0 |
|
| HotPink |
#FF69B4 |
|
| IndianRed |
#CD5C5C |
|
| Indigo |
#4B0082 |
|
| Ivory |
#FFFFF0 |
|
| Khaki |
#F0E68C |
|
| Lavender |
#E6E6FA |
|
| LavenderBlush |
#FFF0F5 |
|
| LawnGreen |
#7CFC00 |
|
| LemonChiffon |
#FFFACD |
|
| LightBlue |
#ADD8E6 |
|
| LightCoral |
#F08080 |
|
| LightCyan |
#E0FFFF |
|
| LightGoldenRodYellow |
#FAFAD2 |
|
| LightGrey |
#D3D3D3 |
|
| LightGreen |
#90EE90 |
|
| LightPink |
#FFB6C1 |
|
| LightSalmon |
#FFA07A |
|
| LightSeaGreen |
#20B2AA |
|
| LightSkyBlue |
#87CEFA |
|
| LightSlateGray |
#778899 |
|
| LightSteelBlue |
#B0C4DE |
|
| LightYellow |
#FFFFE0 |
|
| Lime |
#00FF00 |
|
| LimeGreen |
#32CD32 |
|
| Linen |
#FAF0E6 |
|
| Magenta |
#FF00FF |
|
| Maroon |
#800000 |
|
| MediumAquaMarine |
#66CDAA |
|
| MediumBlue |
#0000CD |
|
| MediumOrchid |
#BA55D3 |
|
| MediumPurple |
#9370D8 |
|
| MediumSeaGreen |
#3CB371 |
|
| MediumSlateBlue |
#7B68EE |
|
| MediumSpringGreen |
#00FA9A |
|
| MediumTurquoise |
#48D1CC |
|
| MediumVioletRed |
#C71585 |
|
| MidnightBlue |
#191970 |
|
| MintCream |
#F5FFFA |
|
| MistyRose |
#FFE4E1 |
|
| Moccasin |
#FFE4B5 |
|
| NavajoWhite |
#FFDEAD |
|
| Navy |
#000080 |
|
| OldLace |
#FDF5E6 |
|
| Olive |
#808000 |
|
| OliveDrab |
#6B8E23 |
|
| Orange |
#FFA500 |
|
| OrangeRed |
#FF4500 |
|
| Orchid |
#DA70D6 |
|
| PaleGoldenRod |
#EEE8AA |
|
| PaleGreen |
#98FB98 |
|
| PaleTurquoise |
#AFEEEE |
|
| PaleVioletRed |
#D87093 |
|
| PapayaWhip |
#FFEFD5 |
|
| PeachPuff |
#FFDAB9 |
|
| Peru |
#CD853F |
|
| Pink |
#FFC0CB |
|
| Plum |
#DDA0DD |
|
| PowderBlue |
#B0E0E6 |
|
| Purple |
#800080 |
|
| Red |
#FF0000 |
|
| RosyBrown |
#BC8F8F |
|
| RoyalBlue |
#4169E1 |
|
| SaddleBrown |
#8B4513 |
|
| Salmon |
#FA8072 |
|
| SandyBrown |
#F4A460 |
|
| SeaGreen |
#2E8B57 |
|
| SeaShell |
#FFF5EE |
|
| Sienna |
#A0522D |
|
| Silver |
#C0C0C0 |
|
| SkyBlue |
#87CEEB |
|
| SlateBlue |
#6A5ACD |
|
| SlateGray |
#708090 |
|
| Snow |
#FFFAFA |
|
| SpringGreen |
#00FF7F |
|
| SteelBlue |
#4682B4 |
|
| Tan |
#D2B48C |
|
| Teal |
#008080 |
|
| Thistle |
#D8BFD8 |
|
| Tomato |
#FF6347 |
|
| Turquoise |
#40E0D0 |
|
| Violet |
#EE82EE |
|
| Wheat |
#F5DEB3 |
|
| White |
#FFFFFF |
|
| WhiteSmoke |
#F5F5F5 |
|
| Yellow |
#FFFF00 |
|
| YellowGreen |
#9ACD32 |
|
ค่าสีข้าม browser
หลายปีก่อน เมื่อคอมพิวเตอร์สนับสนุนได้เพียง 256 สี และมี 216 สีที่ปลอดภัยได้รับการแนะนำเป็นมาตรฐานเว็บ เหตุผลคือ ระบบปฏิบัติการ Microsoft และ Mac ใช้สีต่างจากระบบสีฐาน (ประมาณรายละ 20 สี) ในปัจจุบันอาจจะไม่มีความสำคัญ เพราะคอมพิวเตอร์ส่วนใหญ่ในทุกวันนี้มีความสามารถแสดงภาพหลายสี
ถาดสีข้าม browser 216 สีได้รับการสร้างเพื่อให้มั่นใจว่าคอมพิวเตอร์ทั้งหมดจะแสดงสีถูกต้องเมื่อเรียกใช้ในถาดสี 256 สี
| 000000 |
000033 |
000066 |
000099 |
0000CC |
0000FF |
| 003300 |
003333 |
003366 |
003399 |
0033CC |
0033FF |
| 006600 |
006633 |
006666 |
006699 |
0066CC |
0066FF |
| 009900 |
009933 |
009966 |
009999 |
0099CC |
0099FF |
| 00CC00 |
00CC33 |
00CC66 |
00CC99 |
00CCCC |
00CCFF |
| 00FF00 |
00FF33 |
00FF66 |
00FF99 |
00FFCC |
00FFFF |
| 330000 |
330033 |
330066 |
330099 |
3300CC |
3300FF |
| 333300 |
333333 |
333366 |
333399 |
3333CC |
3333FF |
| 336600 |
336633 |
336666 |
336699 |
3366CC |
3366FF |
| 339900 |
339933 |
339966 |
339999 |
3399CC |
3399FF |
| 33CC00 |
33CC33 |
33CC66 |
33CC99 |
33CCCC |
33CCFF |
| 33FF00 |
33FF33 |
33FF66 |
33FF99 |
33FFCC |
33FFFF |
| 660000 |
660033 |
660066 |
660099 |
6600CC |
6600FF |
| 663300 |
663333 |
663366 |
663399 |
6633CC |
6633FF |
| 666600 |
666633 |
666666 |
666699 |
6666CC |
6666FF |
| 669900 |
669933 |
669966 |
669999 |
6699CC |
6699FF |
| 66CC00 |
66CC33 |
66CC66 |
66CC99 |
66CCCC |
66CCFF |
| 66FF00 |
66FF33 |
66FF66 |
66FF99 |
66FFCC |
66FFFF |
| 990000 |
990033 |
990066 |
990099 |
9900CC |
9900FF |
| 993300 |
993333 |
993366 |
993399 |
9933CC |
9933FF |
| 996600 |
996633 |
996666 |
996699 |
9966CC |
9966FF |
| 999900 |
999933 |
999966 |
999999 |
9999CC |
9999FF |
| 99CC00 |
99CC33 |
99CC66 |
99CC99 |
99CCCC |
99CCFF |
| 99FF00 |
99FF33 |
99FF66 |
99FF99 |
99FFCC |
99FFFF |
| CC0000 |
CC0033 |
CC0066 |
CC0099 |
CC00CC |
CC00FF |
| CC3300 |
CC3333 |
CC3366 |
CC3399 |
CC33CC |
CC33FF |
| CC6600 |
CC6633 |
CC6666 |
CC6699 |
CC66CC |
CC66FF |
| CC9900 |
CC9933 |
CC9966 |
CC9999 |
CC99CC |
CC99FF |
| CCCC00 |
CCCC33 |
CCCC66 |
CCCC99 |
CCCCCC |
CCCCFF |
| CCFF00 |
CCFF33 |
CCFF66 |
CCFF99 |
CCFFCC |
CCFFFF |
| FF0000 |
FF0033 |
FF0066 |
FF0099 |
FF00CC |
FF00FF |
| FF3300 |
FF3333 |
FF3366 |
FF3399 |
FF33CC |
FF33FF |
| FF6600 |
FF6633 |
FF6666 |
FF6699 |
FF66CC |
FF66FF |
| FF9900 |
FF9933 |
FF9966 |
FF9999 |
FF99CC |
FF99FF |
| FFCC00 |
FFCC33 |
FFCC66 |
FFCC99 |
FFCCCC |
FFCCFF |
| FFFF00 |
FFFF33 |
FFFF66 |
FFFF99 |
FFFFCC |
FFFFFF |
16 ล้านสี
การผสมค่าสีแดง เขียว และน้ำเงิน จาก 0 ถึง 255 ให้สีทั้งหมดมากกว่า 16 ล้านสีให้เล่นด้วยจำนวน 256 x 256 x 256 จอภาพปัจจุบันส่วนใหญ่มีความสามารถในการแสดงอย่างน้อย 16384 สี
ถ้าดูที่ตารางสีข้างล่าง จะเห็นผลลัพธ์ของการแปรผันของสีแสดงจาก 0 ถึง 255 ขณะที่รักษาสีเขียวและน้ำเงินที่ศูนย์
| Red Light |
HEX |
RGB |
| |
#000000 |
rgb(0,0,0) |
| |
#080000 |
rgb(8,0,0) |
| |
#100000 |
rgb(16,0,0) |
| |
#180000 |
rgb(24,0,0) |
| |
#200000 |
rgb(32,0,0) |
| |
#280000 |
rgb(40,0,0) |
| |
#300000 |
rgb(48,0,0) |
| |
#380000 |
rgb(56,0,0) |
| |
#400000 |
rgb(64,0,0) |
| |
#480000 |
rgb(72,0,0) |
| |
#500000 |
rgb(80,0,0) |
| |
#580000 |
rgb(88,0,0) |
| |
#600000 |
rgb(96,0,0) |
| |
#680000 |
rgb(104,0,0) |
| |
#700000 |
rgb(112,0,0) |
| |
#780000 |
rgb(120,0,0) |
| |
#800000 |
rgb(128,0,0) |
| |
#880000 |
rgb(136,0,0) |
| |
#900000 |
rgb(144,0,0) |
| |
#980000 |
rgb(152,0,0) |
| |
#A00000 |
rgb(160,0,0) |
| |
#A80000 |
rgb(168,0,0) |
| |
#B00000 |
rgb(176,0,0) |
| |
#B80000 |
rgb(184,0,0) |
| |
#C00000 |
rgb(192,0,0) |
| |
#C80000 |
rgb(200,0,0) |
| |
#D00000 |
rgb(208,0,0) |
| |
#D80000 |
rgb(216,0,0) |
| |
#E00000 |
rgb(224,0,0) |
| |
#E80000 |
rgb(232,0,0) |
| |
#F00000 |
rgb(240,0,0) |
| |
#F80000 |
rgb(248,0,0) |
| |
#FF0000 |
rgb(255,0,0) |
กลุ่มสีเทา
สีเทาได้รับการแสดงด้วยการใช้ค่าเท่ากันของสี เพื่อทำให้ง่ายต่อการเลือกสีเทาถูกต้องจึงได้แสดงกลุ่มสีเทาดังนี้
| สี |
RGB |
HEX |
| |
RGB(0,0,0) |
#000000 |
| |
RGB(8,8,8) |
#080808 |
| |
RGB(16,16,16) |
#101010 |
| |
RGB(24,24,24) |
#181818 |
| |
RGB(32,32,32) |
#202020 |
| |
RGB(40,40,40) |
#282828 |
| |
RGB(48,48,48) |
#303030 |
| |
RGB(56,56,56) |
#383838 |
| |
RGB(64,64,64) |
#404040 |
| |
RGB(72,72,72) |
#484848 |
| |
RGB(80,80,80) |
#505050 |
| |
RGB(88,88,88) |
#585858 |
| |
RGB(96,96,96) |
#606060 |
| |
RGB(104,104,104) |
#686868 |
| |
RGB(112,112,112) |
#707070 |
| |
RGB(120,120,120) |
#787878 |
| |
RGB(128,128,128) |
#808080 |
| |
RGB(136,136,136) |
#888888 |
| |
RGB(144,144,144) |
#909090 |
| |
RGB(152,152,152) |
#989898 |
| |
RGB(160,160,160) |
#A0A0A0 |
| |
RGB(168,168,168) |
#A8A8A8 |
| |
RGB(176,176,176) |
#B0B0B0 |
| |
RGB(184,184,184) |
#B8B8B8 |
| |
RGB(192,192,192) |
#C0C0C0 |
| |
RGB(200,200,200) |
#C8C8C8 |
| |
RGB(208,208,208) |
#D0D0D0 |
| |
RGB(216,216,216) |
#D8D8D8 |
| |
RGB(224,224,224) |
#E0E0E0 |
| |
RGB(232,232,232) |
#E8E8E8 |
| |
RGB(240,240,240) |
#F0F0F0 |
| |
RGB(248,248,248) |
#F8F8F8 |
| |
RGB(255,255,255) |
#FFFFFF |
|
|
