CSS Colors

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

CSS Color Names

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


CSS/HTML support 140 standard color names.

CSS Background Color

You can set the background color for HTML elements:

Example

Example

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:purple;">Lorem ipsum...</p>

CSS Text Color

You can set the color of text:

Example

Example

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:lightgreen;">Ut wisi enim...</p>


CSS Border Color

You can set the color of borders:

Example

Example

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>


CSS Color Values

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

Same as color name “Tomato”:

Example

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


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

Example

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)


Example

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

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Learn more about Color Values

You will learn more about RGBHEX and HSL in the next chapters.

www.w3schools.com

3D Effect

Portal scene

UI Design