CSS farver

Indholdsfortegnelse

Farver er angivet ved hjælp af foruddefinerede farvenavne eller RGB, HEX, HSL, RGBA, HSLA værdier.

CSS-farvenavne

I CSS kan en farve angives ved at bruge et foruddefineret farvenavn:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

</body>
</html>

CSS/HTML understøtter 140 standardfarvenavne.

CSS baggrundsfarve

Du kan indstille baggrundsfarven for HTML-elementer:

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.

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">
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.
</p>

</body>
</html>

CSS tekstfarve

Du kan indstille farven på teksten:

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.

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

CSS kantfarve

Du kan indstille farven på kanterne:

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 →

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

CSS-farveværdier

I CSS kan farver også angives ved hjælp af RGB-værdier, HEX-værdier, HSL værdier, RGBA-værdier og HSLA-værdier:

Samme som farvenavn "Tomat":

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

Samme som farvenavn "Tomat", men 50% gennemsigtig:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

Eksempel

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

<!DOCTYPE html>
<html>
<body>

<p>Same as color name "Tomato":</p>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<p>Same as color name "Tomato", but 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>

</body>
</html>

Lær mere om farveværdier

Du vil lære mere om RGB, HEX og HSL i de næste kapitler.