สี ชื่อสี ค่าสี RGB และรหัสสี HEX ใน HTML
ใน HTML เราสามารถใช้สีได้หลายรูปแบบ โดยวิธีที่นิยมคือ การระบุชื่อสี การระบุรหัสสี Colors Code ในรูปแบบเลขฐานสิบหก HEX และ การระบุค่าสีแบบ RGB (Red, Green, Blue)
ตัวอย่างการใช้สีแบบระบุชื่อสี
การใช้งานสีแบบระบุชื่อสี สามารถระบุชื่อสีลงไปตรง ๆ ได้เลย ดังตัวอย่าง
<h1 style="background-color:Tomato;">Tomato</h1> <h1 style="background-color:Orange;">Orange</h1> <h1 style="background-color:DodgerBlue;">DodgerBlue</h1> <h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1> <h1 style="background-color:Gray;">Gray</h1> <h1 style="background-color:SlateBlue;">SlateBlue</h1> <h1 style="background-color:Violet;">Violet</h1> <h1 style="background-color:LightGray;">LightGray</h1>
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
ตัวอย่างการใช้งานสีแบบ RGB
การใช้งานสีแบบ RGB สามารถทำได้โดยการระบุค่าสีทั้ง 3 สี โดยมีรูปแบบ RGB(Red, Green, Blue) Red คือสีแดง Green คือสีเขียว Blue คือสีน้ำเงิน โดยการระบุค่าสี เราสามารถระบุได้ตั้งแต่ 0 จนถึง 255 ดังตัวอย่าง
<h1 style="background-color:RGB(255, 99, 71);">Tomato</h1> <h1 style="background-color:RGB(255, 140, 0);">Orange</h1> <h1 style="background-color:RGB(30, 144, 255);">DodgerBlue</h1> <h1 style="background-color:RGB(60, 179, 113);">MediumSeaGreen</h1> <h1 style="background-color:RGB(128, 128, 128);">Gray</h1> <h1 style="background-color:RGB(106, 90, 205);">SlateBlue</h1> <h1 style="background-color:RGB(238, 130, 238);">Violet</h1> <h1 style="background-color:RGB(211, 211, 211);">LightGray</h1>
RGB(255, 99, 71)
RGB(255, 140, 0)
RGB(30, 144, 255)
RGB(60, 179, 113)
RGB(128, 128, 128)
RGB(106, 90, 205)
RGB(238, 130, 238)
RGB(211, 211, 211)
ตัวอย่างการใช้งานสีแบบ HEX
การใช้งานสีแบบ HEX เป็นการระบุรหัสสีในรูปแบบของตัวเลขฐานสิบหก ซึ่งจะวางตัวเลขฐานสิบหกไว้หลังเครื่องหมาย # ดังตัวอย่าง
<h1 style="background-color:#FF6347;">Tomato</h1> <h1 style="background-color:#FFA500;">Orange</h1> <h1 style="background-color:#1E90FF;">DodgerBlue</h1> <h1 style="background-color:#3CB371;">MediumSeaGreen</h1> <h1 style="background-color:#808080;">Gray</h1> <h1 style="background-color:#6A5ACD;">SlateBlue</h1> <h1 style="background-color:#EE82EE;">Violet</h1> <h1 style="background-color:#D3D3D3;">LightGray</h1>
#FF6347
#FFA500
#1E90FF
#3CB371
#808080
#6A5ACD
#EE82EE
#D3D3D3
ตัวอย่าง สี ชื่อสี ค่าสีแบบ RGB และรหัสสีแบบ HEX
IndianRed
#CD5C5C
rgb(205, 92, 92)
LightCoral
#F08080
rgb(240, 128, 128)
SALMON
#FA8072
RGB(250, 128, 114)
DARKSALMON
#E9967A
RGB(233, 150, 122)
LIGHTSALMON
#FFA07A
RGB(255, 160, 122)
CRIMSON
#DC143C
RGB(220, 20, 60)
RED
#FF0000
RGB(255, 0, 0)
FIREBRICK
#B22222
RGB(178, 34, 34)
DARKRED
#8B0000
RGB(139, 0, 0)
PINK
#FFC0CB
RGB(255, 192, 203)
LIGHTPINK
#FFB6C1
RGB(255, 182, 193)
HOTPINK
#FF69B4
RGB(255, 105, 180)
DEEPPINK
#FF1493
RGB(255, 20, 147)
MEDIUMVIOLETRED
#C71585
RGB(199, 21, 133)
PALEVIOLETRED
#DB7093
RGB(219, 112, 147)
LIGHTSALMON
#FFA07A
RGB(255, 160, 122)
CORAL
#FF7F50
RGB(255, 127, 80)
TOMATO
#FF6347
RGB(255, 99, 71)
ORANGERED
#FF4500
RGB(255, 69, 0)
DARKORANGE
#FF8C00
RGB(255, 140, 0)
ORANGE
#FFA500
RGB(255, 165, 0)
GOLD
#FFD700
RGB(255, 215, 0)
YELLOW
#FFFF00
RGB(255, 255, 0)
LIGHTYELLOW
#FFFFE0
RGB(255, 255, 224)
LEMONCHIFFON
#FFFACD
RGB(255, 250, 205)
LIGHTGOLDENRODYELLOW
#FAFAD2
RGB(250, 250, 210)
PAPAYAWHIP
#FFEFD5
RGB(255, 239, 213)
MOCCASIN
#FFE4B5
RGB(255, 228, 181)
PEACHPUFF
#FFDAB9
RGB(255, 218, 185)
PALEGOLDENROD
#EEE8AA
RGB(238, 232, 170)
KHAKI
#F0E68C
RGB(240, 230, 140)
DARKKHAKI
#BDB76B
RGB(189, 183, 107)
LAVENDER
#E6E6FA
RGB(230, 230, 250)
THISTLE
#D8BFD8
RGB(216, 191, 216)
PLUM
#DDA0DD
RGB(221, 160, 221)
VIOLET
#EE82EE
RGB(238, 130, 238)
ORCHID
#DA70D6
RGB(218, 112, 214)
FUCHSIA
#FF00FF
RGB(255, 0, 255)
MAGENTA
#FF00FF
RGB(255, 0, 255)
MEDIUMORCHID
#BA55D3
RGB(186, 85, 211)
MEDIUMPURPLE
#9370DB
RGB(147, 112, 219)
REBECCAPURPLE
#663399
RGB(102, 51, 153)
BLUEVIOLET
#8A2BE2
RGB(138, 43, 226)
DARKVIOLET
#9400D3
RGB(148, 0, 211)
DARKORCHID
#9932CC
RGB(153, 50, 204)
DARKMAGENTA
#8B008B
RGB(139, 0, 139)
PURPLE
#800080
RGB(128, 0, 128)
INDIGO
#4B0082
RGB(75, 0, 130)
SLATEBLUE
#6A5ACD
RGB(106, 90, 205)
DARKSLATEBLUE
#483D8B
RGB(72, 61, 139)
MEDIUMSLATEBLUE
#7B68EE
RGB(123, 104, 238)
GREENYELLOW
#ADFF2F
RGB(173, 255, 47)
CHARTREUSE
#7FFF00
RGB(127, 255, 0)
LAWNGREEN
#7CFC00
RGB(124, 252, 0)
LIME
#00FF00
RGB(0, 255, 0)
LIMEGREEN
#32CD32
RGB(50, 205, 50)
PALEGREEN
#98FB98
RGB(152, 251, 152)
LIGHTGREEN
#90EE90
RGB(144, 238, 144)
MEDIUMSPRINGGREEN
#00FA9A
RGB(0, 250, 154)
SPRINGGREEN
#00FF7F
RGB(0, 255, 127)
MEDIUMSEAGREEN
#3CB371
RGB(60, 179, 113)
SEAGREEN
#2E8B57
RGB(46, 139, 87)
FORESTGREEN
#228B22
RGB(34, 139, 34)
GREEN
#008000
RGB(0, 128, 0)
DARKGREEN
#006400
RGB(0, 100, 0)
YELLOWGREEN
#9ACD32
RGB(154, 205, 50)
OLIVEDRAB
#6B8E23
RGB(107, 142, 35)
OLIVE
#808000
RGB(128, 128, 0)
DARKOLIVEGREEN
#556B2F
RGB(85, 107, 47)
MEDIUMAQUAMARINE
#66CDAA
RGB(102, 205, 170)
DARKSEAGREEN
#8FBC8B
RGB(143, 188, 139)
LIGHTSEAGREEN
#20B2AA
RGB(32, 178, 170)
DARKCYAN
#008B8B
RGB(0, 139, 139)
TEAL
#008080
RGB(0, 128, 128)
AQUA
#00FFFF
RGB(0, 255, 255)
CYAN
#00FFFF
RGB(0, 255, 255)
LIGHTCYAN
#E0FFFF
RGB(224, 255, 255)
PALETURQUOISE
#AFEEEE
RGB(175, 238, 238)
AQUAMARINE
#7FFFD4
RGB(127, 255, 212)
TURQUOISE
#40E0D0
RGB(64, 224, 208)
MEDIUMTURQUOISE
#48D1CC
RGB(72, 209, 204)
DARKTURQUOISE
#00CED1
RGB(0, 206, 209)
CADETBLUE
#5F9EA0
RGB(95, 158, 160)
STEELBLUE
#4682B4
RGB(70, 130, 180)
LIGHTSTEELBLUE
#B0C4DE
RGB(176, 196, 222)
POWDERBLUE
#B0E0E6
RGB(176, 224, 230)
LIGHTBLUE
#ADD8E6
RGB(173, 216, 230)
SKYBLUE
#87CEEB
RGB(135, 206, 235)
LIGHTSKYBLUE
#87CEFA
RGB(135, 206, 250)
DEEPSKYBLUE
#00BFFF
RGB(0, 191, 255)
DODGERBLUE
#1E90FF
RGB(30, 144, 255)
CORNFLOWERBLUE
#6495ED
RGB(100, 149, 237)
BLACK
#000000
RGB(0, 0, 0)
ROYALBLUE
#4169E1
RGB(65, 105, 225)
BLUE
#0000FF
RGB(0, 0, 255)
MEDIUMBLUE
#0000CD
RGB(0, 0, 205)
DARKBLUE
#00008B
RGB(0, 0, 139)
NAVY
#000080
RGB(0, 0, 128)
MIDNIGHTBLUE
#191970
RGB(25, 25, 112)
CORNSILK
#FFF8DC
RGB(255, 248, 220)
BLANCHEDALMOND
#FFEBCD
RGB(255, 235, 205)
BISQUE
#FFE4C4
RGB(255, 228, 196)
NAVAJOWHITE
#FFDEAD
RGB(255, 222, 173)
WHEAT
#F5DEB3
RGB(245, 222, 179)
BURLYWOOD
#DEB887
RGB(222, 184, 135)
TAN
#D2B48C
RGB(210, 180, 140)
ROSYBROWN
#BC8F8F
RGB(188, 143, 143)
SANDYBROWN
#F4A460
RGB(244, 164, 96)
GOLDENROD
#DAA520
RGB(218, 165, 32)
DARKGOLDENROD
#B8860B
RGB(184, 134, 11)
PERU
#CD853F
RGB(205, 133, 63)
CHOCOLATE
#D2691E
RGB(210, 105, 30)
SADDLEBROWN
#8B4513
RGB(139, 69, 19)
SIENNA
#A0522D
RGB(160, 82, 45)
BROWN
#A52A2A
RGB(165, 42, 42)
MAROON
#800000
RGB(128, 0, 0)
WHITE
#FFFFFF
RGB(255, 255, 255)
SNOW
#FFFAFA
RGB(255, 250, 250)
HONEYDEW
#F0FFF0
RGB(240, 255, 240)
MINTCREAM
#F5FFFA
RGB(245, 255, 250)
AZURE
#F0FFFF
RGB(240, 255, 255)
ALICEBLUE
#F0F8FF
RGB(240, 248, 255)
GHOSTWHITE
#F8F8FF
RGB(248, 248, 255)
WHITESMOKE
#F5F5F5
RGB(245, 245, 245)
SEASHELL
#FFF5EE
RGB(255, 245, 238)
BEIGE
#F5F5DC
RGB(245, 245, 220)
OLDLACE
#FDF5E6
RGB(253, 245, 230)
FLORALWHITE
#FFFAF0
RGB(255, 250, 240)
IVORY
#FFFFF0
RGB(255, 255, 240)
ANTIQUEWHITE
#FAEBD7
RGB(250, 235, 215)
LINEN
#FAF0E6
RGB(250, 240, 230)
LAVENDERBLUSH
#FFF0F5
RGB(255, 240, 245)
MISTYROSE
#FFE4E1
RGB(255, 228, 225)
GAINSBORO
#DCDCDC
RGB(220, 220, 220)
LIGHTGRAY
#D3D3D3
RGB(211, 211, 211)
SILVER
#C0C0C0
RGB(192, 192, 192)
DARKGRAY
#A9A9A9
RGB(169, 169, 169)
GRAY
#808080
RGB(128, 128, 128)
DIMGRAY
#696969
RGB(105, 105, 105)
LIGHTSLATEGRAY
#778899
RGB(119, 136, 153)
SLATEGRAY
#708090
RGB(112, 128, 144)
DARKSLATEGRAY
#2F4F4F
RGB(47, 79, 79)
