CSS Colors

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

CSS color names

In CSS, you can specify colors using color names:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LichtGrijs

Probeer het zelf

CSS/HTML ondersteunt 140 standaard kleurnamen.

CSS achtergrondkleur

U kunt de achtergrondkleur van HTML-elementen instellen:

Welkom in China
China is een groot land!

Voorbeeld

<h1 style="background-color:DodgerBlue;">China</h1>
<p style="background-color:Tomato;">China is een groot land!</p>

Probeer het zelf

CSS tekstkleur

U kunt de kleur van de tekst instellen:

China

China is een groot land!

China, officieel de Volksrepubliek China, is een land in Oost-Azië.

Voorbeeld

<h1 style="color:Tomato;">China</h1>
<p style="color:DodgerBlue;">China is een groot land!</p>
<p style="color:MediumSeaGreen;">China, officieel de Volksrepubliek China...</p>

Probeer het zelf

CSS Border Color

U kunt de kleur van de rand instellen:

Hallo Wereld
Hallo Wereld
Hallo Wereld

Voorbeeld

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

Probeer het zelf

CSS kleurwaarden

In CSS kunt u ook RGB-waarden, HEX-waarden, HSL-waarden, RGBA-waarden of HSLA-waarden gebruiken om kleuren te specificeren:

Gelijk aan de kleurnaam "Tomato":

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

Gelijk aan de kleurnaam "Tomato", maar met een doorzichtigheid van 50%:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
<h3> Voorbeeld</h3> 
<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>

Probeer het zelf

Meer informatie over kleurwaarden verkrijgen

In het volgende hoofdstuk zult u leren over RGB、HEX en HSL Meer kennis.