HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML Colors

Colors are very important to give a good look and feel to your website. HTML colors can be specified using following ways:

  • Color names
  • Hexadecimal colors
  • RGB colors
  • RGBA colors
  • HSL colors
  • HSLA colors

Color Names

140 color names are predefined in the HTML and CSS color specification.

Tomato
Teal
Orange
MediumSeaGreen
Blue
Grey
Black
Purple
Violet
royalblue
slateblue
Chartreuse
Run code

Look at the table of predefined color names.


Background Color

The following example shows how to set background color for HTML elements:

Run code

Text Color

The following example shows how to set text color for HTML elements:

Run code

Border Color

The following example shows how to set border color for HTML elements:

Blue Border

Grey Border

Orange Border

Run code

Color Values

As already mentioned colors can also be specified using HEX values, RGB values, HSL values, RGBA values, and HSLA values:

Same as color name "Chartreuse":

#7FFF00

rgb(127, 255, 00)

hsl(90, 100%, 50%)

Same as color name "Chartreuse", but 50% transparent:

rgba(127, 255, 00, 0.5)

hsla(90, 100%, 50%, 0.5)

Run code

HEX Values

A color can be specified using a hexadecimal value, which has the following syntax:

#rrggbb

OR

#rgb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff.

For example, #0000ff is displayed as blue, because blue is set to its highest value (ff) and the others are set to the lowest (00).

Experiment by mixing the HEX values below:

#FF0066

FF

00

66

Run code

RGB Values

RGB Stands for "Red Green Blue". It refers to the three hues of light (red, green, and blue), that can mix together to form any color.

An RGB color value is specified with the rgb() function, which has the following syntax:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

For example, rgb(0, 0, 255) is displayed as blue, because blue is set to its highest value (255) and the others are set to 0.

To display the color black, all color parameters must be set to 0, like this: rgb(0, 0, 0).

To display the color white, all color parameters must be set to 255, like this: rgb(255, 255, 255).

Experiment by mixing the RGB values below:

rgb(251, 185, 0)

251

185

0

Run code

RGBA Values

RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object.

An RGBA color is specified with the rgba() function, which has the following syntax:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Experiment by mixing the RGBA values below:

rgba(251, 185, 0, 0.5)

251

185

0

0.5

Run code

HSL Values

HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors.

An HSL color value is specified with the hsl() function, which has the following syntax:

hsl(hue, saturation, lightness)

Hue is a degree on the color wheel (from 0 to 360); 0 or 360 is red, 120 is green, 240 is blue.

Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.

Lightness is also a percentage; 0% is black, 100% is white.

Experiment by mixing the HSL values below:

hsl(120, 100%, 50%)

120

100%

50%

Run code

HSLA Values

HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity of the object.

An HSLA color value is specified with the hsla() function, which has the following syntax:

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Experiment by mixing the HSLA values below:

hsla(120, 100%, 50%, 0.5)

120

100%

50%

0.5

Run code

Color Picker tool

This tool makes it easy to create, adjust, and experiment with custom colors for the web. It also makes it easy to convert between various color formats supported by CSS, including: HEXA colors, RGB (Red/Green/Blue) and HSL (Hue/Staturation/Lightness). Control over the alpha channel is also supported on RGB (rgba) and HSL (hsla) formats.

This tool will help you identify the perfect colors to apply to your HTML.

Go to Color Picker Tool