CSS Colors: Colors are specified using predefined colors names, or RGB, HEX, HSL, RGBA, HSLA values.

The color property in CSS is used to set the color of HTML elements. Commonly, this property is used to set the background color or the font color of an element.

In CSS, we use color values for specifying the color. We can likewise use this property for the border-color and other decorative effects.

We can define the color of an element by using the accompanying ways:

  • RGB format.
  • RGBA format.
  • Hexadecimal notation.
  • HSL.
  • HSLA.
  • Built-in color.

In this tutorial, you will learn-

CSS Color Names

In CSS, a color can be specified by using a predefined color name:

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color:Tomato;">Tomato</h2>
<h2 style="background-color:Orange;">Orange</h2>
<h2 style="background-color:DodgerBlue;">DodgerBlue</h2>
<h2 style="background-color:MediumSeaGreen;">MediumSeaGreen</h2>
<h2 style="background-color:Gray;">Gray</h1>
<h2 style="background-color:SlateBlue;">SlateBlue</h2>
<h2 style="background-color:Violet;">Violet</h1>
<h2 style="background-color:LightGray;">LightGray</h2>

</body>
</html>

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray


CSS Background Color

You can set the background color for HTML elements:

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color:DodgerBlue;">Hello World</h2>

<p style="background-color:Tomato;">
Hello
</p>

</body>
</html>

Hello World

Welcome to CSS Tutorial


CSS Text Color

You can set the color of text:

<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Welcome to CSS Tutorial..</p>

<p style="color:MediumSeaGreen;">Learn CSS.</p>

</body>
</html>

Hello World

Welcome to CSS Tutorial..

Learn CSS.


CSS Border Color

You can set the color of borders:

<!DOCTYPE html>
<html>
<body>

<h2 style="border: 2px solid Tomato;">Hello World</h2>

<h2 style="border: 2px solid DodgerBlue;">Hello World</h2>

<h2 style="border: 2px solid Violet;">Hello World</h2>

</body>
</html>

Hello World

Hello World

Hello World


CSS Color Values

In CSS, colors can likewise be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:

<!DOCTYPE html>
<html>
<body>

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

<h2 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h2>
<h2 style="background-color:#ff6347;">#ff6347</h2>
<h2 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h2>

<p>Same as color name "Tomato", but 50% transparent:</p>
<h2 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h2>

<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>

Same as color name “Tomato”:

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

Same as color name “Tomato”, but 50% transparent:

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

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.


Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.


0 Comments

Leave a Reply

Avatar placeholder