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

Enesekontroll (1 küsimus)

Litsents

Icon for the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

Veebidisain by Koostaja: Mikk Oad; Tekst: Andrus Rinde, Mikk Oad is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.

Jaga seda raamatut