Kolory na stronach WWW

Kolory na stronach internetowych są sprawą kluczową, jeżeli chodzi o estetykę. W poprzednim wpisie napisałem 3 kroki do estetycznej strony. Zawarłem tam informację o tym, że kolory nie powinny być jaskrawe i nie powinno korzystać się z więcej niż 4 kolorów na stronie. W tym wpisie przedstawię sposoby umieszczanie kolorów na stronie WWW.

Po angielsku

div {color: red;}

 Zapisujemy go w sposób przedstawiony powyżej. Kolor przedstawiony jest w postaci języka angielskiego gdzie red oznacza kolor czerwony.

Zapis heksadecymalny (szesnastkowy)

div {color: #ff00ff;}

Gdzie 2 pierwsze znaki oznaczają odcień koloru czerwonego, dwie kolejne koloru zielonego i dwie ostatnie koloru niebieskiego. W powyższym zapisie liczby dają połączenie kolorów czerwonego i niebieskiego co daje kolor fioletowy.

Skrócony zapis heksadecymalny 

div {color: #f0f;}

Stosuje się go jedynie, gdy dwie pierwsze litery są takie same, ponieważ ten zapis bez skracania go wygląda jak zwykły zapis szesnastkowy przedstawiony powyżej.

Zapis RGB (Red, Green, Blue)

div {color: rgb(255,0,0);}

Identycznie jak w zapisie heksadecymalnym z wyjątkiem tego, że kolory przedstawione są w postaci liczb z zakresu od 0 do 255 lub w postaci procentów jak w przykładzie poniżej:

div {color: rgb(100%,0,0);}

W obu powyższych przypadkach zostanie wyświetlony kolor czerwony.

Zapis RGBA

Zupełnie taka sama sytuacja jak z kolorem RGB lecz zapis ten został ulepszony o krycie (przeźroczystość) elementu. Przeźroczystość określamy wartościami od 0 do 1 np. 0.5.

div {color:rgba(255,0,0,0.5);}

Zapis HSL (Odcień, Nasycenie, Jasność) 

Zapis podobny jak w przypadku wyżej przedstawionych sposobów, lecz zamiast kolorów mamy bardziej szczegółowe dane jak nasycenie oraz jasność. Barwa to przedział od 0 do 255, a nasycenie i jasność jako wartość procentowa.

div {color: hsl(255,50%,70%);}

 Zapis HSLA (Odcień, Nasycenie, Jasność, Krycie)

Zapisujemy go w taki sam sposób w jaki kolor HSL, lecz zostało dodane krycie.

div {color: hsl(255,50%,70%,0.5);}

currentColor 

Jest to nic innego jak pobieranie koloru z innego elementu w divie.

div
{
color: red;
background-color: currentColor;
} 

background-color oznacza kolor tła diva i zostanie on pobrany z koloru czcionki "color", który znajduje się powyżej, czyli będzie on czerwony.