Barwę w CSS możemy przedstawić na dwa sposoby. Przedstawię je na przykładzie koloru tła elementu DIV.

Sposób pierwszy: anglojęzyczna nazwa koloru.

<div style="background: maroon;"></div>

Sposób drugi, zapis pierwszy: szesnastkowy zapis koloru w modelu RGB.

RGB, to nic innego jak odwzorowanie barw za pomocą proporcji kolorów: R – Red – Czerwony, G – Green – Zielony, B – Blue – Niebieski.
Zapis koloru następuje w notacji #rrggbb; czyli 2-cyfrowe szesnastkowe liczby odpowiadające proporcjom 3 podstawowych barw.
Pozycje rr, gg, bb umożliwiają zapis liczb w systemie szesnastkowym w zakresie od 00 do FF, czyli w przeliczeniu na system dziesiętny od 0 do 255.
00 oznacza brak wykorzystania danej barwy, FF, jej maksymalne użycie.
Zapis #FF0000 oznacza – weź maksymalnie dużo czerwonego, nie bierz zielonego, nie bierz niebieskiego i zmieszaj to ze sobą. Co wyjdzie? Oczywiście czerwony.

<div style="background: #FF0000;"></div>

Sposób drugi, zapis drugi: dziesiętny zapis koloru w modelu RGB.

Zasada wygląda identycznie jak w poprzednim przypadku. Zapis odbywa się w następującej notacji: rgb(r,g,b).

<div style="background: rgb(0,255,255);"></div>

Sposób drugi, zapis trzeci: procentowy zapis koloru w modelu RGB.

Notacja: rgb(r,g,b).

<div style="background: rgb(100%,50%,50%);"></div>

Jeśli w zadaniu mamy utworzyć elementy, którym przypiszemy różne odcienie np. koloru czerwonego, nie ma problemu. Wykorzystamy powyższe informacje, wykorzystamy sposób drugi i damy różne wielkości na pierwszej pozycji zapisu koloru, pozycji R, np.:

<div style="background: #FF0000;"></div>
<div style="background: #A60000;"></div>
<div style="background: #490000;"></div>

<div style="background: #303030;"></div>
<div style="background: #777777;"></div>
<div style="background: #A2A2A2;"></div>