Zapis kolorów w CSS

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-03-15

szukaj: kolory CSS zapis kolorów CSS

Jest kilka sposobów zapisu kolorów w CSS. Czemu warto jest wszystkie znać? A no, po pierwsze – bo nie jest to takie trudne i wypada, a po drugie dlatego, że często się to przydaje – szczególnie używanie RGB.

Nazwa koloru

Zaczerpnięte z języka angielskiego nazwy kolorów. Dawniej, za czasów html-owego spaghetti bardzo popularne. Dziś bardzo rzadko używane. Przykład:

body {
 color: blue; /*tekst na stronie będzie niebieski */
}

Taki zapis ma kilka wad: istnieje ograniczona liczba barw, kolor w dużej mierze może zależeć od urządzenia.

Kod heksadecymalny

body {
 color: #0000FF; /*tekst na stronie będzie niebieski */
}

Wielkość liter nie ma znaczenia. Faktem jest, że kod teraz jest odrobinę mniej czytelny [mao kto jest w stanie określić co to właściwie za kolor], jednak mamy w tej chwili praktycznie nieograniczoną liczbę barw. Dodatkowo możemy skrócić ten zapis:

body {
 color: #00F; /* równoważne #0000FF */
}

Pamiętaj jednak, że takiego skrótu można użyć tylko, jeśli występują obok siebie parami te same liczby [litery], licząc od lewej. Np.: AA BB CC -> ABC.

body {
 color: #1002FF; /* NIE jest równoważne #102F */
}

Kod RGB

Mój ulubiony, szczególnie jeśli chcemy osiągnąć ładne przejście odcieni szarości, np:

div {
 background: rgb(250, 250, 250);
 border: 1px solid rbg(230, 230, 230);
}

Nie wiedząc dokładnie jakie barwy otrzymałem zgaduję, że efekt będzie ciekawy. Obramowanie będzie odrobinę ciemniejsze od tła, co da przyjemne dla oka uporządkowanie. Wartości przyjmowane <0, 255>. Gdzie:

 color: rgb(255, 255, 255); /* równoważny #fff (#ffffff) oraz 'white' */
 color: rgb(  0,   0,   0); /* równoważny #000 (#000000) oraz 'black' */

Na dobrą sprawę tylko od ciebie zależy, którego sposobu będziesz używał. Ja używam wszystkich tu zaprezentowanych, choć najczęściej heksadecymalnego, a najrzadziej nazw. Warto zajrzeć:

Patryk 'yarpo' Jar

szukaj: kolory CSS zapis kolorów CSS CSS

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!