FriconiX
Free collection of beautiful vector icons for your web pages.

Lesson 2.6. CSS colors

Properties

There are two CSS properties that can be applyed to (almost) any HTML element:

The following example display the text in white with a blue background:

/* Styling paragraphs */
p {
    color: white;
    background-color: blue;
}

Here is an example of the previous style in the browser:

Colors can be defined in several different ways:

You will find on this page a complete list of the 148 standard color names.

RGB colors in hexadecimal

If you want to use a custom color, you can define this color by its RGB declaration in hexadecimal preceded by the symbol hashtag #:

.red { color: #ff0000; }
.green  { color: #00ff00; }
.blue  { color: #0000ff; }
.yellow { color: #ffff00; }
.pink  { color: #ff00ff; }

Here is the above style in the browser:

RGB colors in decimal

The syntax rgb (red, green, blue) allows to define the three RGB components of the color between 0 and 255. The above example would become:

.red { color: rgb(255, 0, 0); }
.green  { color: rgb(0, 255, 0); }
.blue  { color: rgb(0, 0, 255); }
.yellow { color: rgb(255, 255, 0); }
.pink  { color: rgb(255, 0, 255); }

Here is the result in the browser:

RGB colors with transparency

The syntax rgba (red, green, blue, alpha) is similar to the previous one, but has an additional parameter (alpha) which represents the transparency between 0 and 1.

#percent0    { background-color: rgba(0, 255, 0, 0); }
#percent25   { background-color: rgba(0, 255, 0, 0.25); }
#percent50   { background-color: rgba(0, 255, 0, 0.5); }
#percent75   { background-color: rgba(0, 255, 0, 0.75); }
#percent100  { background-color: rgba(0, 255, 0, 1); }

Here is the result in the browser:

You can also define transparency as a percentage:

#percent0    { background-color: rgba(0, 255, 0, 0%); }
#percent25   { background-color: rgba(0, 255, 0, 25%); }
#percent50   { background-color: rgba(0, 255, 0, 50%); }
#percent75   { background-color: rgba(0, 255, 0, 75%); }
#percent100  { background-color: rgba(0, 255, 0, 100%); }

Hue, saturation and lightness

The declaration in hue saturation lightness (** HSL ***) is less common, but it's useful to understand the syntax:

Exercice

Consider the following HTML:

<h1>CSS selectors</h1>

<p>This paragraph must be red</p>
<p>This paragraph must be red</p>
<p class="bg-green">This paragraph must be white with a green background</p>

The t-shirt must have a yellow background:<br>
<svg width="240" height="240" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="M 663 104C 663 104 925 270 925 270C 943 282 950 306 940 325C 940 325 856 494 856 494C 845 516 817 524 796 512C 796 512 755 487 755 487C 741 479 726 487 726 503C 726 503 729 880 729 880C 729 904 710 923 687 923C 687 923 323 924 323 924C 300 924 281 905 280 882C 280 882 276 502 276 502C 276 486 261 478 247 486C 247 486 204 512 204 512C 183 524 155 516 144 494C 144 494 60 325 60 325C 50 306 57 282 75 270C 75 270 337 104 337 104C 345 98 357 99 365 105C 412 140 456 156 500 156C 544 156 588 140 635 105C 639 102 644 100 649 100C 654 100 659 101 663 104C 663 104 663 104 663 104"/></svg>

Without modifying the HTML, add CSS styles to

See also


Last update : 01/25/2020