สี ชื่อสี ค่าสี 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)