HTML

สี ชื่อสี ค่าสี RGB และรหัสสี HEX ใน HTML

25/02/2020
ดีครับดอทคอม
สี ชื่อสี ค่าสี RGB และรหัสสี HEX ใน HTML

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

คุณอาจสนใจ:

ทำความรู้จักกับภาษา HTMLทำความรู้จักกับภาษา HTML HTML Formatting การจัดรูปแบบตัวอักษรHTML Formatting การจัดรูปแบบตัวอักษร HTML HSL Colors การใช้งานสีแบบ HSL ในเอชทีเอ็มแอลHTML HSL Colors การใช้งานสีแบบ HSL ในเอชทีเอ็มแอล กำหนดรูปแบบการแสดงผล HTML ด้วย CSSกำหนดรูปแบบการแสดงผล HTML Elements ด้วย CSS