CSS Colours

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, or 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 etc.

CSS Background Color

You can set the background color for HTML elements like so:

Example

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

...

CSS Text Color

You can set the color of text, too. Just define the color attribute as in:

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

CSS Border Color

You can set the color of borders with the border attribute, specifically through the third value that you set, as in

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">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. The Tomato can also be set through rgb(255, 99, 71), #ff6347, or hsl(9, 100%, 64%). You can make it somewhat transparent with variables rgba and hsla, where a stands for alpha.

Here is an 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>