CSS Colors
CSS Colors
This is the lesson 3 of 4 in the course CSS - Beginner to Advance

Hi πŸ‘‹ fellow coders. Today we will learn CSS colors. In CSS we can set colors for different properties. We can set text color, background color, border color, and shadow color.

Table of Contents

While it is not necessary for this lesson but if you are new to this course then take a look at our HTML course- HTML – Beginner to Advance. Free for a limited time only.

CSS Colors

What is CSS Color?

CSS color and background-color properties define the color of the text and the background color of the HTML element. In CSS, We can define colors using predefined color names, RGB, HEX, HSL, RGBA, HSLA values.

CSS Color Names

In CSS, We can use a predefined color with its name.

Tomato

Orange

DodgerBlue

Gray

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:Gray;">Gray</h1>

</body>
</html>

Run the above code by clicking the play button on the top right corner.

These color names are predefined in CSS. We can use them by their name.

CSS Background Color

In CSS, you can define a background color of an HTML element.

To set a background color we use the background-color property.

Hello World


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:lightblue;">Hello World</h1>

<p style="background-color:tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>

</body>
</html>

CSS Text Color

In CSS, we can define the color of the text. We use the color property to set the color of the text.

Hello World


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<!DOCTYPE html>
<html>
<body>

<h1 style="color:lightblue;">Hello World</h1>

<p style="color:tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>

</body>
</html>

CSS Border Color

In CSS, We can define the color of the border. To set the border color we use the border-color property.

Hello World

Blue Hello World

<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid; border-color: red;">Hello World</h1>
<h1 style="border: 2px solid; border-color: blue;">Blue Hello World</h1>

</body>
</html>

CSS Color Values

In CSS, We can define colors using predefined color names, RGB, HEX, HSL, RGBA, HSLA values.

tomato

#ff6247

rgb(255, 99, 71)

hsl(9, 100%, 64%)

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

CSS RGB Colors

In CSS RGB represents Red, Green, and Blue color values

We can set a color as RGB value with CSS function rgb()

The RGB function takes 3 values, like rgb(red, green, blue)

In this function, we define each value between 0 and 255. For Example, If we want to display blue, we can set the blue value to 255 and other values to 0- rgb(0, 0, 255)

If you want to set black color then set all values to 0 and if you want to set white color then set all values to 255.

Here, I have created a small experiment below, Try to change the Red, Green, and Blue values and see the result.

Try to change the sliders by grabbing them

CSS RGBA Colors

RGBA color values are the RGB color values with the extension of alpha value. An Alpha value specifies the opacity (or transparency) of color.

A CSS RGBA color function is written as below:

rgba(red, green, blue, alpha)

Here, the alpha parameter is the value from 0.0 (fully transparent) to 1.0 (not transparent at all)

Let’s experiment by mixing RGBA values below:

Try to change the Alpha value

CSS Hex Colors

In CSS, Hex values are defined as #RRGGBB, where RR, GG, and BB as represent Red, Green, and Blue hexadecimal integer values of the color.

To define a hexadecimal color value we use the below form:

#rrggbb

The rr(red), gg(green), and bb(blue) are hexadecimal values from 00 to ff (same as decimal 0 to 255).

For example, the red color in hexadecimal is #ff0000, Here, we set the red to the highest value (ff) and others to the lowest value (00).

To define black color, we set all the values to 00: #000000

To define white color, we set all the values to ff: #ffffff

You can experiment with the hex values below:

3 Digit Hex values

Sometimes we can use the 3-digit hex values as the shorthand for 6-digit hex values.

The 3-digit hex color can be defined as below:

#rgb

Where r is red, g is green, and b is blue color values from 0 to f.

The 3-digit hax values can only be used when both RR, GG, and BB values are the same for each component.

For example, we can write #ffeecc 6-digit hex values as #fec 3-digit hex values.

Example

p {
  color: #f05; /* Same as #ff0055 */
}
h1 {
  color: #c0a; /* Same as #cc00aa */
}

CSS HSL Colors

The HSL stands for hue, saturation, and lightness.

In CSS, we can define HSL as below:

hsl(hue, saturation, lightness)

Here, the hue is the degree on the color wheel between 0 and 360. where 0 is red, 120 is green, and 240 is blue.

saturation is a percentage value from 0% (the shade of gray) to 100% (full color).

lightness is also a percentage value from 0% (black) to 100% (white), 50% is neither black nor white.

Experiment with HSL values below:

Try Changing the below values

CSS HSLA Colors

HSLA color values are the HSL color values with the extension of alpha value. The alpha value specifies the opacity (or transparency) of color.

A CSS HSLA color function is written as below:

hsla(hue, saturation, lightness, alpha)

The alpha parameter is the value between 0.0 (fully transparent) and 1.0 (not transparent at all)

Experiment with the HSLA values below:

Try Changing the below values

With that said, This lesson ends here. If you find this lesson helpful then please share it with your friends.

Until next time πŸ‘‹

Course Navigation<< CSS Comments | CSS- Beginner to AdvanceCSS Backgrounds | CSS- Beginner to Advance >>
Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there πŸ‘‹ It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply