HTML Colors
- Colors are used to make the page more attractive.
- HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
- The comment tag is useful during the debugging of codes.
Color Names
- In HTML, a color is specified by using color names.
- HTML supports 140 standard color names.
Example
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color: DarkOrange;">DarkOrange</h1>
<h1 style="background-color: DarkBlue;">DarkBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color: Crimson;">Crimson</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color: Aqua;">Aqua</h1>
</body>
</html>
Try it »
Background Color
We can set the background color for HTML elements.
Example
<html>
<body>
<h1 style="background-color:DodgerBlue;">DodgerBlue Background</h1>
<p style="background-color: MediumSeaGreen;">
A paragraph is a group of sentences that fleshes out a single idea. In order for a paragraph to be effective, it must begin with a topic sentence, have sentences that support the main idea of that paragraph, and maintain a consistent flow.
</p>
</body>
</html>
Text Color
We can set the color of text in HTML.
Example
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">
A paragraph is a group of sentences that fleshes out a single idea.
</p>
</body>
</html>
Border Color
We can set the color of borders in HTML.
Example
<html>
<body>
<h1 style="border: 2px solid DarkCyan;">Dark Cyan</h1>
<h1 style="border: 2px solid DarkOrange;">Dark Orange</h1>
</body>
</html>
Try it »
Color Values
In HTML, Colors are specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.
Example
<html>
<body>
<h1 style="background-color:rgb(32,178,170);">rgb(32,178,170)</h1>
<h1 style="background-color:#20B2AA;">#20B2AA</h1>
</body>
</html>
Try it »
Color Values
- RGB values are used to specify a color in HTML.
- Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
- For red color parameters are set as rgb(255, 0, 0), as red is set to its highest value (255) and others are set to 0.
- Similarly for green rgb(0, 255, 0) and for blue rgb(0, 0, 255).
- To display the black, all parameters are set to 0, rgb(0, 0, 0).
- To display the white, all parameters are set to 255, rgb(255, 255, 255).
Example
<html>
<body>
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
</body>
</html>
Try it »
HEX Values
- HEX stands for Hexadecimal values.
- Hexadecimal values are used to specify a color in HTML.
- #rrggbb, here rr (red), gg (green), bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
- For example, #00ff00 is displayed as green, because green is set to its highest value (ff) and the others are set to the lowest value (00).
Example
<html>
<body>
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
</body>
</html>
Try it »
HSL Value
In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
- Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 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, 50% is neither light or dark, 100% is white.
Example
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
</body>
</html>
Try it »
Saturation
- Saturation is described as the intensity of a color.
- 100% is pure color, no shades of gray.
- 50% is 50% gray, but you can still see the color.
- 0% is completely gray, you can no longer see the color.
Example
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
</body>
</html>
Try it »
Lightness
- The lightness of a color is described as how much light is given to the color.
- 0% means no light (black).
- 50% means 50% light (neither dark nor light).
- 100% means full lightness (white).
Example
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
</body>
</html>
Try it »
RGBA Value
- RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.
- An RGBA color value is specified with:rgba
- The range of alpha parameter is 0.0 (fully transparent) and 1.0 (not transparent at all).
Example
<html>
<body>
<h1 style="background-color:rgba(71, 99, 255, 0);">rgba(71, 99, 255, 0)</h1>
<h1 style="background-color:rgba(71, 99, 255, 0.2);">rgba(71, 99, 255, 0.2)</h1>
</body>
</html>
Try it »
HSLA Value
- HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color.
- An HSLA color value is specified with:hsla
- hue,
- saturation,
- lightness,
- alpha
- The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).
Example
<html>
<body>
<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
</body>
</html>
Try it »