bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/CSS/CSS Foundations
CSS•CSS Foundations

CSS Colors

Overview

In CSS, colors are specified by using a predefined color name, or with a RGB, HEX, HSL, RGBA, HSLA value.

CSS Color Names

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

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

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>

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>

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>

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

Formula

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

Formula

< h1 style ="background - color:hsl(9,
100%, 64%);">...</h1>

Formula

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

Formula

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

Previous

CSS Errors

Next

CSS RGB Colors