16 HTML värvid
HTML keeles saame värve määrata mitmel erineval moel:
- konstantidena – nimetustega (red, blue, green, coral, cyan jne);
- HEX väärtustena – kuueteistkümnendsüsteemi (hexadecimal) arvudena;
- RGB ja RGBA väärtustena – RGB värvimudeli järgi;
- HSL ja HSLA väärtustena – HSL värvimudeli järgi.
Näiteks:
| konstant | HEX | RGB | HSL | |
|---|---|---|---|---|
| must | black | #000000 | rgb(0,0,0) | hsl(0,0%,0%) |
| valge | white | #FFFFFF | rgb(255,255,255) | hsl(0,0%,100%) |
| punane | red | #FF0000 | rgb(255,0,0) | hsl(0,100%,50%) |
| hall | gray | #808080 | rgb(128,128,128) | hsl(0,0%,50%) |
Kokku on HTML keeles võimalik kasutada 140 erinevat eelmääratud värvinimetust. Täieliku nimekirja võid leida siit.
Veebilehtedel leiavad tihti kasutust kõik eelmainitud värvi määramise liigid kuid enamasti kasutatakse HEX-väärtuseid. Näidetes leiavad kasutust enamasti värvi nimetused või HEX-väärtused.
Taustavärv (background-color)
Elemendi taustavärvi saame muuta <style> atribuudiga ja omadusega background-color. Muudame näiteks kogu kehaelemendi tausta taevasiniseks:
<body style="background-color:DeepSkyBlue;"> <h1>Pealkiri</h1> <p>See on tekstilõik.</p> </body>
Või muudame tekstilõigu tausta oranžiks:
<body> <p style="background-color:orange;">See on tekstilõik.</p> </body>
See on tekstilõik.
Teksti värv (color)
Teksti värvi muutmiseks saame kasutada omadus color. Allolevas näiteks kasutan pealkirja värvi muutmiseks värvinimetust ja tekstilõigu värvi muutmiseks HEX-väärtust.
<h1 style="color:blue;">See pealkiri on sinine</h1> <p style="color:#FF0000;">See tekstilõik on punane.</p>
See pealkiri on sinine
See tekstilõik on punane.
Raami värv (border color)
Kui me oleme elemendile lisanud raami, saame muuta me ka raami värvi. Lisame näiteks style atribuuti ja border omadust kasutades tekstilõigule 2px suuruse raami ja värvime selle lillaks:
<p style="border:2px solid violet">See on lilla raamiga tekst</p>
See on lilla raamiga tekst
