CSS Colors

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

CSS Colors

Colors are defined using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

CSS Color Names

In CSS, a color can be defined by using a predefined color name.

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
CSS Background Color

Background color for HTML elements can be set:

<!DOCTYPE html>
<html>
<head>
<h1 style=”background-color:LightGray”>My First Example</h1>
</body>
</html>

Output:

My First Example

CSS Text Color

CSS Text Color defines by color property.

<!DOCTYPE html>
<html>
<head>
<h1 style=”color:red”>My First Example</h1>
</body>
</html>

Output:

My First Example

CSS Border Color

You can set color of borders.

<!DOCTYPE html>
<html>
<head>
<h1 style=”border-color:red”>My First Example</h1>
</body>
</html>

Output:

Hello World

CSS Color Values

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

Same as color name “Tomato”:

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

Output:

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)