Värvid on igasuguse kujundamise juures väga olulised ja seetõttu on neil ka CSS-is oluline roll.

Värve saab määrata väga mitmel moel:

• konstantidena – nimetustega;
• 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:

Värvikonstandid

Üsna tavaline on ka värvikonstantide ehk nimede kasutamine. CSS spetsifikatsioonis on kokku 147 värvi nime (17 standardvärvi ja 130 täiendavat). Standardvärvideks on: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white ja yellow.

Näiteks:

section {
  background-color: gray
}

Värvid HEX väärtusteta

Kõige tavapärasem on CSS keeles värve kirja panna kuusteistkümmendsüsteemi (hexadecimal ehk HEX), kus kõik arvud pannakse kirja numbritega 0 … 9 ja tähtedega A, B, C, D, E ja F (siin A = 10, B = 11 … F = 15) koodidena kujul #xxxxxx. Iga numbri ja/või tähepaar määrab RGB (red, green, blue) värvimudeli vastava värvikomponendi väärtuse.

Näiteks:
#FFB933

Need paarid saadakse RGB väärtustest kümnendsüsteemis jäägiga jagamisel. Kümnendsüsteemis väärtus jagatakse 16 –ga, täisarvukordne annab esimese „numbri“ ning jääk teise. Näiteks kui kümnendsüsteemis on väärtus 198, siis selle jagamisel 16-ga, saame
jagatise täisosaks 12 ehk kuueteistkümmendsüsteemis C ning jäägiks 6, kokku C6.

Veebilehele saab niimoodi näiteks taustavärvi määrata:

body {
  background-color: #FFE799
}

Värvid RGB ja RGBA väärtustena

Kasutada võib ka RGB väärtuseid tavapärasemal kujul rgb(x,x,x), kus iga arv on vastava värvikomponendi väärtus kümnendkujul.

Näiteks:
rgb(255,135,22)

Kasutada saab rgba värve, kus a tähendab alpha väärtust ehk läbipaistvust (sarnane omadusega opacity). Alpha väärtused on vahemikus 0 – 1.

Näiteks:

section {
  background-color: rgba(255, 0, 0, 0.2)
}

Värvid HSL ja HSLA väärtustena

Kasutusele on võetud ka HSL värvimudel, millede puhul määratakse värv kolme komponendiga:

• Hue – värvitoon, väärtus vahemikus 0 – 360, mis vastab värvuse asukohale värvirattal (punane on 0 ja 360, roheline on 120 ja sinine on 240);
• Saturation – küllastus, väärtus vahemikus 0 – 100%, näitab värvi küllastust (0 – värvi
  pole, 100% – puhas värv);
• Lightness – heledus, väärtus vahemikus 0 – 100%, näitab heledust (0 – maksimaalselt
  tume ehk must, 50% – normaalne värv, 100% – maksimaalselt hele ehk valge).

Näiteks:

section {
  background-color: hsl(120,100%,50%)
}

Sarnaselt RGB mudeli läbipaistvusele on ka HSL puhul kasutusel uuendatud mudel alpha väärtusega – HSLA. Alpha väärtus on ikka kümnendmurruna vahemikus 0 – 1.

Näiteks:

section {
  background-color: hsla(120,100%,50%,0.2)
}