CSS farver

Farveangivelse sker ved at bruge prædefinerede farvenavne, eller værdier for RGB, HEX, HSL, RGBA og HSLA.

CSS farvenavne

I CSS kan farver bruges ved navn til at specificere farver:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LysGrå

Prøv det selv

CSS/HTML understøtter 140 standard farvenavne.

CSS baggrundsfarve

Du kan sætte baggrundsfarven på HTML-elementer:

Velkommen til Kina
Kina er et fantastisk land!

Eksempel

<h1 style="background-color:DodgerBlue;">Kina</h1>
<p style="background-color:Tomato;">Kina er et fantastisk land!</p>

Prøv det selv

CSS tekstfarve

Du kan indstille tekstdybfarven:

Kina

Kina er et fantastisk land!

Kina, officielt Den Folkerepublik Kina, er et land i Østasien.

Eksempel

<h1 style="color:Tomato;">Kina</h1>
<p style="color:DodgerBlue;">Kina er et fantastisk land!</p>
<p style="color:MediumSeaGreen;">Kina, officielt Den Folkerepublik Kina...</p>

Prøv det selv

CSS kantfarve

Du kan indstille kantfarven:

Hello World
Hello World
Hello World

Eksempel

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

Prøv det selv

CSS farveværdier

I CSS kan du også bruge RGB-værdier, HEX-værdier, HSL-værdier, RGBA-værdier eller HSLA-værdier til at specificere farver:

Ligner med farvenavn "Tomato":

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

Ligner med farvenavn "Tomato", men gennemsigtighed på 50%:

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

Prøv det selv

Få mere at vide om farveværdier

I det næste kapitel vil du lære om RGB、HEX og HSL for mere viden.