Updates
  • Starting New Weekday Batch for Full Stack Java Development on 15 September 2025 @ 02:00 PM to 04:00 PM
  • Starting New Weekday Batch for MERN Stack Development on 29 September 2025 @ 04:00 PM to 06:00 PM
Number Converter Enquire Now
Join Course

HTML Colors

In HTML, colors can be represented using different formats such as named colors, hexadecimal codes, RGB values, RGBA values , HSL values and HSLA values.

Here are some common ways to represent colors in HTML:

Named Colours

• HTML has a set of predefined color names like "red","blue", "green", etc. You can use these names directly.

            
<!DOCTYPE html>
<html>
<head>
    <title>Named color</title>
</head>
<body>
    <h1 style="background-color: red;">Welcome to JTC</h1>
    <h1 style="background-color: blue;">Learn HTML</h1>
</body>
</html>

Hexadecimal Codes

• Colors can be represented using six-digit hexadecimal codes. Each pair of digits represents the intensity of red, green, and blue, respectively.
• Range starts from number (0 to 9) and (a to f).

How to write hexadecimal codes for colors.

• Start with a pound sign (#) to indicate that you are writing a hexadecimal code.
• Write two hexadecimal digits for the intensity of red. It can range from 00 (no red) to FF (maximum red).
• Write two hexadecimal digits for the intensity of green, ranging from 00 to FF.
• Write two hexadecimal digits for the intensity of blue, ranging from 00 to FF. 

            
<!DOCTYPE html>
<html>
<head>
   <title>Hexadecimal Codes</title>
</head>
<body>
   <h1 style="background-color: #ff0000;">Welcome to JTC</h1>
   <h1 style="background-color: #0000ff;">Learn HTML</h1>
</body>
</html>

RGB Values

• Colors can also be represented using RGB (Red, Green, Blue) values.
• Range starts from 0 to 255.

Steps to write RGB values:-

• Start with "rgb(to indicate that you are writing an RGB color code.
• Write the intensity of red as a number between 0 and 255, followed by a comma.
• Write the intensity of green as a number between 0 and 255, followed by a comma.
• Write the intensity of blue as a number between ( 0 and 255)". 

            
<!DOCTYPE html>
<html>
<head>
   <title>RGB Values</title>
</head>
<body>
   <h1 style="background-color: rgb(0,255,0);">Welcome to JTC</h1>
   <h1 style="background-color: rgb(0,0,198);">Learn HTML</h1>
</body>
</html>

RGBA Values

• Similar to RGB, but with an additional alpha value for transparency.
• Range starts from 0 to 255.

How to write RGBA values.

• Start with "rgba( to indicate that you are writing an RGBA color value.
• Write the intensity of red as a number between 0 and 255, followed by a comma.
• Write the intensity of green as a number between 0 and 255, followed by a comma.
• Write the intensity of blue as a number between 0 and 255, followed by a comma.
• Write the alpha value as a number between ( 0.0 and 1.0 )". 

            
<!DOCTYPE html>
<html>
<head>
   <title>RGBA Values</title>
</head>
<body>
   <h1 style="background-color: rgba(0,255,0,0.5);">Welcome to JTC</h1>
   <h1 style="background-color: rgba(0,0,198,0.75);">Learn HTML</h1>
</body>
</html>

HSL Values

• HSL values involves using three values that represent the hue, saturation, and lightness of a color to create a specific color.
• The hue value ranges from 0 to 360, representing the color spectrum, where 0 and 360 represent red, 120 represents green, and 240 represents blue.
• The saturation and lightness values range from 0% to 100%, where 0% represents no color (grayscale) and 100% represents fully saturated and light colors.

How to write HSL values.

• Start with "hsl(to indicate that you are writing an HSL color value.
• Write the hue value as a number between 0 and 360, followed by a comma.
• Write the saturation value as a percentage between 0% and 100%, followed by a comma.
• Write the lightness value as a percentage between ( 0% and 100%)". 

            
<!DOCTYPE html>
<html>
<head>
   <title>HSL Values</title>
</head>

<body>
   <h1 style="background-color: hsl(0, 100%, 50%);">Welcome to JTC</h1>
   <h1 style="background-color: hsl(120, 100%, 50%);">Learn HTML</h1>
</body>
</html>

HSLA Values

• HSLA values involves using four values that represent the hue, saturation, lightness, and alpha (transparency) of a color to create a specific color.
• The hue value ranges from 0 to 360, representing the color spectrum, where 0 and 360 represent red, 120 represents green, and 240 represents blue.
• The saturation and lightness values range from 0% to 100%, where 0% represents no color (grayscale) and 100% represents fully saturated and light colors.
• The alpha value ranges from 0.0 (completely transparent) to 1.0 (completely opaque).

How to write HSLA values.

• Start with "hsla(to indicate that you are writing an HSLA color value.
• Write the hue value as a number between 0 and 360, followed by a comma.
• Write the saturation value as a percentage between 0% and 100%, followed by a comma.
• Write the lightness value as a percentage between 0% and 100%, followed by a comma.
• Write the alpha value as a number between ( 0.0 and 1.0)". 

            
<!DOCTYPE html>
<html>
<head>
   <title>HSL Values</title>
</head>

<body>
   <h1 style="background-color: hsl(0, 100%, 50%);">Welcome to JTC</h1>
   <h1 style="background-color: hsl(120, 100%, 50%);">Learn HTML</h1>
</body>
</html>


We use cookies to enhance your user experience. By continuing using our site, you agree to our use of cookies.

Ok Read More