CSS Colors

[Guest]

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 predefined color name:


Tomato


Orange


DodgerBlue


MediumSeaGreen


Gray


SlateBlue


Violet


LightGray


Try it Yourself »
CSS/HTML support 140 standard color names.

CSS Background Color
You can set the background color for HTML elements:
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.


Example

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

Try it Yourself »


CSS Text Color
You can set the color of 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.

Example

<h1 style="color:Tomato;">Hello
World</h1><p style="color:DodgerBlue;">Lorem
ipsum...</p><p style="color:MediumSeaGreen;">Ut wisi
enim...</p>
Try it Yourself »








CSS Border Color
You can set the color of borders:
Hello World
Hello World
Hello World

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>
Try it Yourself »


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":

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

Same as color name "Tomato", but 50% transparent:

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>
Try it Yourself »


Learn more about Color Values
You will learn more about RGB, HEX and HSL in the next chapters.













★
+1

Reference: https://www.w3schools.com/css/css_colors.asp