HTML – Colors

HTML colors are specified with prefined color names. These names can be of different forms like RGB, RGBA, HEX, HSL, HSLA values.

1. Color Names

This is the simplest of all the color forms. In this type, we define color names.

W3C has announced 16 basic colors.
( Black, yellow, red, Maroon, Grey, Lime, Green, Olive, Silver, Aqua, Blue, Navy, White, Purple, Fuchsia and Teal)

2. RGB Values

RGB values are defined using rgb() property. This property takes three values, one each for red, green and blue. These values vary from 0 to 255.

When we need to add opacity to any of the colors, the last value is also added using rgba(), in which a value varies from 0 to 1.

Color NameColorColor Code
BlackbRgba(0,0,0)
WhitewRgb(255, 255, 255)
GraygRgb(204, 204, 204)
RedrRgb(206,55, 0)
GreengRgb(84,139, 84)

3. HEX Values

Hex values are 6-digit long with a combination of number and alphabet.  Starting with “#” values, it preceded by first two-digit as red, next two as green, and last two as blue value (#RRGGBB).

It is recommended to use these hex values as compared to color names because it occupies less space. Secondly, whenever we minify any of the CSS files, it converts all the color names to hex values.

Some common hex values:-
Color NameColorColor Code
Blackb#000000
Whitew#ffffff
Grayg#cccccc
Redr#cd3700
Greeng#548b54

4. HSL Values

HSL stands for Hue Saturation Lightness. Hue is defined as 0-360 degree, lightness from 0 to 100% and saturation.

5. How to apply these color using the style attribute

We can apply above-mentioned colors to any of the HTML element using the style attribute. 


Input:

<body>

      <p style="color: red;">Using color names</p>
      <p style="color: #000;">Using hex color</p>
      <p style="color: rgba(204,204,204,1);">Using rgb color</p>
</body>

Output: