HTML Colors: How to Add HTML Color | Learn HTML

HTML colors are defined using predefined color names, or HEX, RGB, RGBA, HSL, HSLA values. It is very important to know how to use these HTML color values on a website.

In this tutorial, you will learn about different types of HTML colors and codes so that you can use different color combinations on your website.


HTML Colors – HTML Color Names

One of the easiest ways of specifying colors in HTML is directly by color names. It is easy to remember color names than codes.

However, the main drawback of this process is you can not use color shades with names.

According to W3C, there are 16 basic color names that will validate with an HTML validator. However, major browsers support over 200 different color names.

Note: Color names and codes are not case-sensitive.


W3C Standard 16 Color Names

Here is the list of 16 colors names recommended by W3C.

Name color Name color
Black White
Green Blue
Yellow Red
Gray Maroon
Silver Teal
Navy Olive
Aqua Lime
Purple Fuchsia

HTML Colors – HTML Color Values

In HTML, colors have different values that indicate various color and shades. Like HEX values, RGB values, RGBA values, HSL values, and HSLA values.

You can declare the same color by using different values. For example:

Gray
#808080
rgb(128,128,128)
hsl(0, 0%, 50%)

HTML Colors – HEX Value

In HTML, a color can be defined using a hexadecimal value in this structure:

#rrggbb

Here first two letters (rr) indicate the color red, next two letters (gg) indicate the color green and the last two letters (bb) indicate the color blue.

Every hex color code starts with the hash (#). This code is a combination of letters and numbers.

The hex code may contain both numbers from 0 to 9 and letters from A to F to define the intensity of colors.

It seems weird when you see those random numbers for the first time. However, eventually, you will get used to it.

You don’t have to remember all those color codes. There are many online software and color pickers where the codes are available.

Example

#000000
#0000FF
#3cb371
#00FFFF
#6a5acd
#ffa500

HTML Colors – RGB Value

In HTML, a color can be defined using a RGB value in this structure:

rgb(red, greenblue)

The value of each parameter (red, green, blue) can vary from 0 to 255. These values define the intensity of the color.

The lowest value of each parameter is 0. If all three parameters are in their lowest value, it will display the color Black rgb(0,0,0).

The highest value of each parameter is 255. It all three parameters are in their highest value, it will display the color White rgb(255,255,255).

Again, rgb(255,0,0) will display Red color. Because the first value represents red and its value is set to the highest value (255). Other parameters are set to 0.

Example

rgb(0,0,0)
rgb(255,0,0)
rgb(0, 0, 255)
rgb(252, 156, 269)
rgb(60, 179, 113)
rgb(106, 90, 205)

HTML Colors – RGBA Value

The RGBA value works like RGB value with one more parameter called alpha. This parameter determines the opacity for a color.

The RGBA color is defined in this structure:

rgba(red, greenblue, alpha)

The alpha value can vary from 0 to 1. With the lowest value of alpha (0), a color becomes fully transparent.

With the highest value of alpha (1), a color has no transparency at all.

Example

rgb(0, 0, 0, 0)
rgb(255, 0, 0, 0.2)
rgb(0, 0, 255, 0.4)
rgb(252, 156, 269, 0.6)
rgb(60, 179, 113, 0.8)
rgb(106, 90, 205, 1)

HSL Value

In HTML, a color can be defined as an HSL (hue, saturation, and lightness) value in this structure:

hsl(huesaturationlightness)

Hue is a degree value on the color. It can vary from 0 to 360. 0 means red, 120 means green, and 240 means blue.

Saturation determines the intensity of a color. It is a percentage value.

Here, 100% means the pure color, no shades of gray.

50% means 50% of gray color. Still main color is visible.

If this value is set to 0%, it will become completely gray. You will not able to see the main color at all.

Lightness is also a percentage value where 0% means completely black, 50% means neither light nor dark, 100% means white.

Example

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(0, 0%, 45%)
hsl(0, 50%, 45%)
hsl(0, 100%, 0%)
hsl(0, 100%, 100%)

HSLA Value

The HSLA value works like HSL value with one more parameter called alpha. This parameter determines the opacity for a color.

The HSLA color is defined in this structure:

hsla(hue, saturationlightness, alpha)

The alpha value can be vary from 0 to 1. With the lowest value of alpha (0), a color becomes fully transparent.

With the highest value of alpha (1), a color has no transparency at all.

Example

hsla(0, 100%, 50%, 1)
hsla(240, 100%, 50%, 0.8)
hsla(0, 0%, 45%, 0.6)
hsla(0, 50%, 45%, 0.4)
hsla(0, 100%, 0%, 0.2)
hsla(0, 100%, 100%, 0)

Learn more how to add image on website, in our tutorial – HTML Images