CSS värit

Värien määrittäminen tapahtuu käyttämällä esitäytettyjä väri nimiä tai RGB, HEX, HSL, RGBA, HSLA arvoja.

CSS väri nimet

CSS:ssä voidaan käyttää värejä nimiä väreiden määrittämiseen:

Tomattia
Oranssi
DodgerSininen
KeskiMerenVihreä
Harmaa
SlateBlue
Violetti
LightGray

Kokeile itse

CSS/HTML tukee 140 yleistä väriä.

CSS taustaväri

Voit asettaa HTML-elementin taustavärin:

Tervetuloa Kiinaan
Kiina on suuri maa!

Esimerkki

<h1 style="background-color:DodgerBlue;">Kiina</h1>
<p style="background-color:Tomato;">Kiina on suuri maa!</p>

Kokeile itse

CSS tekstiväri

Voit asettaa tekstin väriä:

Kiina

Kiina on suuri maa!

Kiina, virallisesti Kiinan kansantasavalta, on maa Itä-Aasiassa.

Esimerkki

<h1 style="color:Tomato;">Kiina</h1>
<p style="color:DodgerBlue;">Kiina on suuri maa!</p>
<p style="color:MediumSeaGreen;">Kiina, virallisesti Kiinan kansantasavalta...</p>

Kokeile itse

CSS reunan väri

Voit asettaa reunavärin:

Hei maailma
Hei maailma
Hei maailma

Esimerkki

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

Kokeile itse

CSS väriarvot

CSS:ssa voit käyttää myös RGB-arvoja, HEX-arvoja, HSL-arvoja, RGBA-arvoja tai HSLA-arvoja värejä määrittämiseen:

Tämä väri on yhtä kuin väri "Tomato":

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

Tämä väri on yhtä kuin väri "Tomato", mutta läpinäkyvyys on 50%:

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

Kokeile itse

Tutki lisää väriarvoista

Seuraavassa luvussa opit tietoja RGB、HEX ja HSL Lisää tietoa.