Dremendo Tag Line

Working with Colors in HTML

Backgrounds and Colors

In this lesson, we will cover the most common ways of working with colors in HTML.

Colors in HTML

Colors are essential in web design, as they can express emotions, establish user engagement, and improve usability. Multiple methods are available to specify colors in HTML, such as color names, hexadecimal codes, and RGB values. This lesson will explore the different color formats and teach us how to include them effectively in HTML.


Color Formats

HTML supports several color formats, The most popular formats are:

  • Color Names
  • Hexadecimal Color Codes
  • RGBA Values

Color Names

Color names are predefined names for specific colors, such as "red," "green," or "blue." HTML supports 148 color names. Below is the list of all 148 color names with their color preview.

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 Aquamarine
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
RebeccaPurple Red RosyBrown RoyalBlue
SaddleBrown Salmon SandyBrown SeaGreen
SeaShell Sienna Silver SkyBlue
SlateBlue SlateGray Snow SpringGreen
SteelBlue Tan Teal Thistle
Tomato Turquoise Violet Wheat
White WhiteSmoke Yellow YellowGreen

Here's an example of how to use the color names to specify a color:


<p style="background-color: GreenYellow">This text has a greenyellow background color.</p>

Note: The color names are not case-sensitive and can also be written in lowercase.

Hexadecimal Color Codes

In HTML, colors can be defined using hexadecimal color codes. A hexadecimal color code is a six-digit code that represents the intensity of red, green, and blue (RGB) values used to create a color. The code is written with a # prefix, such as #DC143C.

Consider the hexadecimal color code #8A2BE2. In this code, except #, the first two characters represent the intensity of red, the next two characters represent the intensity of green, and the last two characters represent the intensity of blue.

The advantage of using hexadecimal color codes is that they allow a wide range of colors to be defined, and all modern web browsers widely support them. Additionally, hexadecimal color codes are concise and easy to use, making them a popular choice for web designers and developers.

You can easily convert any color to its equivalent hexadecimal code by just converting its red, green and blue intensity values in hexadecimal code.

Here's an example of how to use the hexadecimal color code to specify a color:


<p style="background-color: #7FFFD4">This text has a background color.</p>

RGBA Values

In HTML, RGBA (Red, Green, Blue, Alpha) values are used to specify colors using a combination of red, green, and blue values with an additional alpha value that defines the opacity or transparency of the color.

The values are specified using a CSS property called "rgba()", where the first three values are the RGB values ranging from 0 to 255, and the fourth value is the alpha value ranging from 0 (completely transparent) to 1 (completely opaque). You can decrease the transparency by increasing the value in fraction like 0.5 for 50% transparency.

Here's an example of how to use the "rgba()" property to specify a color:


<p style="background-color: rgba(255, 0, 0, 0.5)">This text has a semi-transparent red background.</p>

In the above example, the RGB values are 255 (red), 0 (green), and 0 (blue), and the alpha value is 0.5, which makes the color semi-transparent.

Using RGBA values in HTML can give you more control over the colors and their transparency, and it can be useful for creating visually appealing and dynamic designs on web pages.

Use the color picker tool given below to choose a color and get its Hex and RGBA values. Click on the color button to open the color picker.