• Tutorial List

HTML Colors

Last updated Jul 08, 2020
HTML Color Turorial - Predefined color names, Transparent Color

Color is a very important ingredient to create a good looking website. In HTML, there are some types of colors that you can use –

  • Predefined color names such as red, green, blue, etc.
  • HEX colors are 6 digit code that starts with a #. Such as #000000, #ffffff, #6ba65f, etc. Each hex code defines a specific color.
  • RGB colors are a combination of Red, Green, and Blue. rgb(red, green, blue)
  • HSL Colors – HSL stands for hue, saturation, lightness, and the HSL colors are a combination of these. hsl(hue, saturation, lightness)
  • RGBA and HSLA Colors – These colors are used to make transparent colors.

👉 Use this Online HTML HEX, RGB and HSL color picker tool to pick the HEX, RGB, and HSL value of any color.


Predefined color names

Predefined color names are those colors whose names are already defined, such as red, green, blue, etc.

🔗Checkout the list of the predefined color names.

<!DOCTYPE html>
<html>
<head>
<title>Example of Predefined color names</title>
  
<style>
  
  p{
    background-color:indigo;
    color:white;
    padding:10px;
  }
  
</style>
  
</head>
<body>
  
  <p>Background color is indigo</p>
  
</body>
</html>

HEX (hexadecimal) colors in HTML

Hexadecimal colors are 6 digit code that starts with a #. Instead of other color types, the hex color types are mostly used to create websites.

  • white color – #ffffff
  • Blue Color – #285eff
<!DOCTYPE html>
<html>
<head>
<title>Example of Hex Colors</title>
  
<style>
  
  p{
    background-color:#285eff;
    color:#ffffff;
    padding:10px;
  }
  
</style>
  
</head>
<body>
  
  <p>Background color is #285eff</p>
  
</body>
</html>

RGB Colors in HTML

The rgb() property is used to specify the RGB color value. This rgb() property takes three colors value (red, green, blue).

The three colors value should be an integer between 0 and 255 or a percentage value between 0% and 100%.

  • White
    • rgb(255, 255, 255)
    • rgb(100%, 100%, 100%)
  • Midnight Blue
    • rgb(25, 25, 112)
    • rgb(9.8%, 9.8%, 43.9%)
<!DOCTYPE html>
<html>
<head>
<title>Example of RGB Colors</title>
  
<style>
  
  p{
    background-color:rgb(25, 25, 112);
    color:rgb(255, 255, 255);
    padding:10px;
  }
  
</style>
  
</head>
<body>
  
  <p>Background color is rgb(25, 25, 112)</p>
  
</body>
</html>

HSL Colors in HTML

Same as the RGB, HTML has the hsl() property to specify the HSL color value on a website.

HSL property takes three values –

  • Hue
    • Hue takes a degree value between 0 and 360 (0 is red, 120 is green, 240 is blue).
  • Saturation
    • It takes a percentage value (0% to 100%), which handles the saturation of the color.
  • Lightness
    • It also takes a percentage value between 0% and 100% to handle the lightness of the color.
  • Crimson color in HSL
    • hsl(348, 83.3%, 47.1%)
  • White color in HSL
    • hsl(0, 0%, 100%)
<!DOCTYPE html>
<html>
<head>
<title>Example of HSL color</title>
  
<style>
  
  p{
    background-color:hsl(348, 83.3%, 47.1%);
    color:hsl(0, 0%, 100%);
    padding:10px;
  }
  
</style>
  
</head>
<body>
  
  <p>Background color is hsl(348, 83.3%, 47.1%)</p>
  
</body>
</html>

RGBA and HSLA colors in HTML

The RGBA and HSLA colors are used to add transparent color on a webpage.

These colors work the same as the RGB and HSL, but these colors have a special extra value called Alpha (A = Alpha), and this alpha value (0.0 to 1.0) handles the transparency of the color. 0.0 is completely transparent and 1.0 is fully opaque.

  • Red RGB Colorrgb(255, 0, 0)
  • Transparent redrgba(255, 0, 0, 0.4)
  • Blue HSL Colorhsl(225, 100%, 57.8%)
  • Transparent Bluehsla(225, 100%, 57.8%, 0.3)
<!DOCTYPE html>
<html>
<head>
<title>Example of RGBA color</title>
  
<style>
  
  body{
    background-image:url('https://tutorials.w3jar.com/wp-content/uploads/mountains.png');
    background-repeat:no-repeat;
  }
  
  p{
    background-color:rgba(255, 0, 0, 0.4);
    color:#ffffff;
    padding:10px;
  }
  
  .hsla{
    background-color:hsla(225, 100%, 57.8%, 0.3);
  }
  
</style>
  
</head>
<body>
  
  <p>RGBA Transparent</p>
  <p class="hsla">HSLA Transparent</p>
  
</body>
</html>

Ask Questions

Your email address will not be published. Required fields are marked *