HTML Colors ระบบสีในภาษาเอชทีเอ็มแอล

ระบบสีใน HTML สามารถใช้งานได้โดยการระบุเป็นชื่อสี (Colors Name) หรือระบุค่าสีในระบบสีต่าง ๆ เช่น RGB, HEX, HSL, RGBA, HSLA

Color Names การใช้งานสีโดยระบุชื่อสี

ใน HTML เราสามารถเรียกใช้งานสีโดยระบุเป็นชื่อสีนั้น ๆ ได้เลย เช่น

<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

สีพื้นหลัง

เราสามารถกำหนดสีพื้นหลังให้กับอีลิเมนต์ต่าง ๆ ได้โดยกำหนดชื่อสีให้กับ background-color เช่น

<h1 style="background-color:DodgerBlue;">DCRUB Dot Com</h1>

<p style="background-color:Tomato;">
HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
</p>

ตัวอย่าง

DCRUB Dot Com

HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

สีตัวอักษร

เราสามารถกำหนดสีให้กับตัวอักษร ด้วยการระบุชื่อสี ดังตัวอย่าง

<h1 style="color:Tomato;">DCRUB DOT COME</h1>
<p style="color:DodgerBlue;">DCRUB DOT COME</p>
<p style="color:MediumSeaGreen;">DCRUB DOT COME</p> 

ตัวอย่าง

DCRUB DOT COME

DCRUB DOT COME

DCRUB DOT COME

สีเส้นขอบ

ตัวอย่างการกำหนดสีเส้นขอบด้วยการระบุชื่อสี

<h1 style="border:2px solid Tomato;">Hello HTML</h1>
<h1 style="border:2px solid DodgerBlue;">Hello HTML</h1>
<h1 style="border:2px solid Violet;">Hello HTML</h1> 

ตัวอย่าง

Hello HTML

Hello HTML

Hello HTML

ตัวอย่างสีและชื่อสีใน HTML

AliceBlue

AntiqueWhite

Aqua

Aquamarine

Azure

Beige

Bisque

Black

BlanchedAlmond

Blue

BlueViolet

Brown

BurlyWood

CadetBlue

Chartreuse

Chocolate

Coral

CornflowerBlue

Cyan

Crimson

Cornsilk

DarkBlue

DarkCyan

DarkGoldenRod

DarkGray

DarkGrey

DarkGreen

DarkKhaki

DarkMagenta

DarkOliveGreen

DarkOrange

DarkOrchid

DarkRed

DarkSalmon

DarkSeaGreen

DarkSlateBlue

DarkSlateGray

DarkSlateGrey

DarkTurquoise

DarkViolet

DeepPink

DeepSkyBlue

DimGray

DimGrey

DodgerBlue

FireBrick

FloralWhite

ForestGreen

Fuchsia

Gainsboro

GhostWhite

Gold

GoldenRod

Gray

Grey

Green

GreenYellow

HoneyDew

HotPink

IndianRed

Indigo

Ivory

Khaki

Lavender

LavenderBlush

LawnGreen

LemonChiffon

LightBlue

LightCoral

LightCyan

LightGoldenRodYellow

LightGray

LightGrey

LightGreen

LightPink

LightSalmon

LightSeaGreen

LightSkyBlue

LightSlateGray

LightSlateGrey

LightSteelBlue

LightYellow

Lime

LimeGreen

Linen

Magenta

Maroon

MediumAquaMarine

MediumBlue

MediumOrchid

MediumPurple

MediumSeaGreen

MediumSlateBlue

MediumSpringGreen

MediumTurquoise

MediumVioletRed

MidnightBlue

MintCream

MistyRose

Moccasin

NavajoWhite

Navy

OldLace

Olive

OliveDrab

Orange

OrangeRed

Orchid

PaleGoldenRod

PaleGreen

PaleTurquoise

PaleVioletRed

PapayaWhip

PeachPuff

RebeccaPurple

Peru

Pink

Plum

PowderBlue

Purple

Red

RosyBrown

RoyalBlue

SaddleBrown

Salmon

SandyBrown

SeaGreen

SeaShell

Sienna

Silver

SkyBlue

SlateBlue

SlateGray

SlateGrey

Snow

SpringGreen

SteelBlue

Tan

Teal

Thistle

Tomato

Turquoise

Violet

Wheat

White

WhiteSmoke

Yellow

YellowGreen