CSS

Color

You can change colors on websites, and there are some different ways to do that.
when you talk about colors are there. Modern browsers support 150 named colors. You can use them in you HTML and CSS name, Hex color code or RGB value.

Color Name Hex code RGB code RGBA code
IndianRed #CD5C5C rgb(205, 92, 92) rgb(205, 92, 92, 0.5)
Pink #FFC0CB rgb(255, 192, 203) rgb(255, 192, 203, 0.5)
MediumVioletRed #C71585 rgb(199, 21, 133) rgb(199, 21, 133)
SkyBlue #87CEEB rgb(135, 206, 235) rgb(135, 206, 235)
Navy #000080 rgb(0, 0, 128) rgb(0, 0, 128, 0.5)
White #fff rgb(255,255,255) rgb(255,255,255,0.5)
Black #000 rgb(0,0,0) rgb(0, 0, 0, 0.5)
2.3.1 Example

HTML colors

HTML5 colors are used by setting the value of the color property to the name of the color.

p{ 
color: #skyBlue;
}

2.3.2 Example

HEX colors

HEX colors are used by setting the value to 6 digits. It goes from the lowest 0 to the highst F.
You can use 3 digits but then the browser will copy the digits to 6. If you want a specifc color, then use 6 digits.
Then you use the HEX colors, then start with #, before the digits.

h1{ 
color: #000;
background-color: #F8529F;
}

2.3.3 Example

RGB colors

RGB colors stands for Red Green BLue, and are specified with rgb(red, green, blue).
The parameters define the intensity of the color from the lowest 0 to the highest 255.

h2{ 
color: rgb(0, 0, 128);
}
2.3.4 Example
h2{ 
color: rgb(0, 0, 128, 0.5);
}
2.3.5 Example

Opacity

We can make apply opacity property to elements. It can be 0 or 1, where the value 0 defines the elments as fully transparant, where the value 1 means fully opaque.

h2{ 
opacity: 0.5;
}
2.3.6 Example

Color websites


CSS color meaning
CSS color wheel
CSS palette

Gradient

CSS gradients let you display wmooth transisions between two or more specified colors

Linear Gradients (goes down/up/left/right/diagonally)

The linear-gradient() CSS function creates an image cinsisting of two or more colors along a straight line.

.className{
background: linear-gradient(#e66465, #9198e5);
}
Example 2.3.7
Visuel example of 2.3.7

A gradient tilted 45 degrees

.className{
background: linear-gradient(45deg, blue, red);
}
Example 2.3.8
Visuel example of 2.3.8

Radial Gradients (defined by their center)

The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients. It is similar to gradient/linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.

.className{
background: repeating-linear-gradient(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px);
}
Example 2.3.9
Visuel example of 2.3.9

A gradient tilted 45 degrees and repeat it 3 times

.className{
background: repeating-linear-gradient(45deg, #00d4ff, #c72abf 33.3%);
}
Example 2.3.10
Visuel example of 2.3.10

Circel

.className{
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(199,42,191,1) 35%, rgba(0,212,255,1) 100%);
}
Example 2.3.11
Visuel example of 2.3.11

Color websites

CSS gradient
UI gradients