Colors are an essential part of any website's design. They can be used to set the mood, highlight important content, and make the overall user experience more visually appealing. This tutorial will teach you how to use colors in HTML, specify colors using different methods, and apply colors to different tags on a web page.



Specifying Colors in HTML

There are three main ways to specify colors in HTML: using a named color, a hexadecimal value, or an RGB value. Let's take a closer look at each of these methods.

Named Colors

The most common method is to use a named color, which refers to a predefined color value with a name. There are 147 named colors in HTML, including basic colors like "red" and "blue," as well as more obscure colors like "papayawhip" and "slategray." To use a named color, specify the name of the color as the value of the relevant style property.

Example:

<div style="color: red;">This text is red.</div>

Here is a list of named colors with their representation that HTML and CSS recognize:

AliceBlue
AntiqueWhite
Aqua
Aquamarine
Azure
Beige
Bisque
Black
BlanchedAlmond
Blue
BlueViolet
Brown
BurlyWood
CadetBlue
Chartreuse
Chocolate
Coral
CornflowerBlue
Cornsilk
Crimson
Cyan
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
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

Hexadecimal Colors

Another way to specify colors in HTML is to use a hexadecimal code, a six-digit code representing a specific color. Hexadecimal codes consist of three pairs of digits, each representing a value for the colors red, green, and blue (RGB). For example, the hexadecimal code for the color red is #FF0000, with FF representing the maximum value for red, and 00 representing the minimum value for green and blue. To use a hexadecimal code, specify the code as the value of the relevant style property, preceded by a # symbol.

Example:

<div style="color: #FF0000;">This text is red</div>

RGB Colors

In addition to named and hexadecimal codes, colors can be specified in HTML using the RGB model, representing colors as combinations of red, green, and blue values. The RGB model is particularly useful for specifying colors with greater precision, as it allows you to specify a value for each color on a scale from 0 to 255. The rgb() function defines the RGB model, which takes three arguments representing red, green, and blue values.

Example:

<div style="color: rgb(255, 0, 0);">This text is red.</div>

RGBA Colors

The rgba() function is similar to the rgb() function except that it includes an additional argument for alpha transparency. The alpha value specifies the degree of transparency of the color, with 0 being fully transparent and 1 being fully opaque.

Example:

<div style="color: rgba(255, 0, 0, 0.5);">This text is red with 50% transparency.</div>


Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram