W CSS kolory możemy jako wartości możemy przypisywać na kilka sposobów:

- #RRGGBB - sposób zapisu koloru w którym po dwie litery określają szesnastkowo każdą ze składowych barwy wynikowej. RR to starszy i młodszy bajt barwy czerwonej a GG i BB to odpowiednio starszy i młodszy bajt barw zielonej i niebieskiej

- #RGB - również zapis szesnastkowy ale młodszy bajt każdego koloru jest duplikowany ze starszego

- rgb(R,G,B) - w tym zapisie kolory rgb w pisujemy jako bajty (liczby od 0 do 255) poszczególnych składowych w systemie dziesiętnym

- rgb(R%,G%,B%) - każda składowa barwy jest definiowana jako procent swojego maksymalnego nasycenia (od 0 do 100%)

- hsl(H,S%,L%) - kolor definiujemy ze składowych: barwa (H-hue): 0-360, którą odczytujemy z koła kolorów. Czerwony - 0, zielony - 120, niebieski - 240. Nasycenie (S%-saturation): 0-100 i Jasność (L%-lightness): 0-100

- rgba(R,G,B,A), rgba(R%,G%,B%,A), hsla(H,S%,L%,A) (CSS3) - podobnie jak wyżej, ale dodatkowy atrybut A (kanał alpha) określa przezroczystość. A=0 - całkowita przezroczystość, A-1 - całkowite krycie

- za pomocą nazw kolorów podstawowych
black (#000000) silver (#C0C0C0)
gray (#808080) white (#FFFFFF)
maroon (#800000) red (#FF0000)
purple (#800080) fuchsia (#FF00FF)
green (#008000) lime (#00FF00)
olive (#808000) yellow (#FFFF00)
navy (#000080) blue (#0000FF)
teal (#008080) aqua (#00FFFF)

- za pomocą nazw kolorów rozrzerzonych (CSS3) - pełna tabela kolorów znajduje się poniżej

Przykład użycia różnego sposobu ustawienia koloru żółtego tła. Jeśli istnieje taka możliwość, to ustawiamy tło na 50% przezroczystości:

<p style="background-color:yellow;">test</p>
<p style="background-color:#ffff00;">test</p>
<p style="background-color:rgb(255,255,0);">test</p>
<p style="background-color:hsl(60,100,100);">test</p>
<p style="background-color:rgba(255,255,0,0.5);">test</p>
<p style="background-color:hsl(60,100,100,0.5);">test</p>

Tabela kolorów roszerzonych: