CSS färger

Du specificerar färger genom att använda fördefinierade färgnamn, eller värden för RGB, HEX, HSL, RGBA, eller HSLA.

CSS-färgnamn

I CSS kan du använda färgnamn för att specificera färger:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
Ljusgrå

Prova det själv

CSS/HTML stödjer 140 standardfärgnamn.

CSS bakgrundsfärg

Du kan sätta bakgrundsfärgen för HTML-elementet:

Välkommen till Kina
Kina är ett fantastiskt land!

Exempel

<h1 style="background-color:DodgerBlue;">Kina</h1>
<p style="background-color:Tomato;">Kina är ett fantastiskt land!</p>

Prova det själv

CSS textfärg

Du kan ställa in textfärgen:

Kina

Kina är ett fantastiskt land!

Kina, officiellt Folkrepubliken Kina, är ett land i Ostasien.

Exempel

<h1 style="color:Tomato;">Kina</h1>
<p style="color:DodgerBlue;">Kina är ett fantastiskt land!</p>
<p style="color:MediumSeaGreen;">Kina, officiellt Folkrepubliken Kina...</p>

Prova det själv

CSS kantfärg

Du kan ställa in kantfärgen:

Hello World
Hello World
Hello World

Exempel

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

Prova det själv

CSS färgvärden

I CSS kan du också använda RGB-värden, HEX-värden, HSL-värden, RGBA-värden eller HSLA-värden för att specificera färger:

Ekvivalent med färgnamnet "Tomato":

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

Ekvivalent med färgnamnet "Tomato", men genomskinlighet 50%:

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

Prova det själv

Lär dig mer om färgvärden

I nästa kapitel kommer du att lära dig om RGB、HEX och HSL mer kunskap.