Categories
HTML Web development

HTML Colours

The colours are applied to an HTML tag/ element using CSS. You can pick which part of the element to apply colour to (background color, text color, border color, and more). 

HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

HTML Colors

1. Colour names

In HTML, a color can be specified by using a color name (to see more HTML colour names click here.) 

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Coral;">Coral</h1>
<h1 style="background-color:Crimson;">Crimson</h1>
<h1 style="background-color:Cyan;">Cyan</h1>
<h1 style="background-color:Skyblue;">Skyblue</h1>
<h1 style="background-color:Indigo;">Indigo</h1>
<h1 style="background-color:LawnGreen;">LawnGreen</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
<h1 style="background-color:DarkCyan;">DarkCyan</h1>

</body>
</html>

Output:

HTML Colors

2. Background colour

You can also set the background colour for HTML elements. 

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:mistyrose;">Hi, how are you ?</h1>

<p style="background-color:lightgreen;">
Hope is everything good and you'll learn a lot :D

</p>

</body>
</html>

Output:

HTML Colors

3. Text colour 

You can set the colour of the text as well. 

Example:

<!DOCTYPE html>
<html>
<body>

<h3 style="color:salmon;">Hi, how are you?</h3>

<p style="color:sienna;">Hope is everything good and you'll learn a lot :D.</p>

<p style="color:plum;">Did you try to change a text colour? Try :) </p>

</body>
</html>

Output:

HTML Colors

4. Border colors 

You can set the color of the borders.

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid salmon;">Hi, how are you?</h1>

<h1 style="border: 2px solid palegreen;">Hi, how are you?</h1>

<h1 style="border: 2px solid powderblue;">Hi, how are you?</h1>

</body>
</html>

Output:

HTML Colors

5. Colour Values

In HTML, colours can be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values as well:

Same as color name “Olive”:

<!DOCTYPE html>
<html>
<body>

<p>Same as color name "Olive":</p>

<h1 style="background-color:rgb(128, 128, 0);">rgb(128, 128, 0)</h1>
<h1 style="background-color:#808000;">#808000</h1>
<h1 style="background-color:hsl(60, 100%, 25.1%);">hsl(60, 100%, 25.1%)</h1>

<p>Same as color name "Olive", but 50% transparent:</p>
<h1 style="background-color:rgba(128, 128, 0, 0.5);">rgba(128, 128, 0, 0.5)</h1>
<h1 style="background-color:hsla(60, 100%, 25.1%, 0.5);">hsla(60, 100%, 25.1%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>

</body>
</html>

Output:

HTML Colors

Enjoy coding!

Read also:

Understanding the HTML Layout

HTML Quotations

HTML Scroll Box

Categories
CSS HTML Web development

HTML Colors

White Colors

HTML Colors. White

Yellow Colors

HTML Colors

Orange Colors

HTML Colors

Red Colors

HTML Colors

Green Colors

HTML Colors. Green.

Cyan Colors

HTML Colors

Blue Colors

HTML Colors. Blue

Purple Colors

HTML Colors.

Pink Colors

HTML Colors. Pink.

Brown Colors

HTML Colors. Brown.

Gray Colors

HTML Colors.

Hey, here’s something that might interest you:

HTML List Tags

HTML Table

HTML Basic