• Artykuł

          

Encyklopedia: Jak określać kolory w CSS - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Jakub Mytko

Opublikowano: 2011-10-12

Często spotykanym problemem przy ustalaniu wyglądu strony jest dobór kolorów. Kolory w CSS można określać na trzy sposoby.

Pierwszym sposobem jest stosowanie nazw kolorów w języku angielskim. Pulę tych nazw stanowi 147 kolorów, wraz z 17 kolorami podstawowymi, którymi są: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white oraz yellow. W przypadku, gdy chcemy stosowaniać nazwy kolorów, w deklaracji stylów, po nazwie atrybutu, musimy wpisać dwukropek, zgodnie z budową stylów, a następnie nazwę koloru i średnik. Wielkość liter nie ma znaczenia. Na przykład:

background-color: blue;

Drugim sposobem jest określenie barw przy użyciu modelu RGB. Zapisany w ten sposób kolor jest kombinacją kolorów czerwonego, zielonego i niebieskiego w określonych proporcjach. Składa się z trzech składowych wartości z zakresu od 0 do 255, przy czym pierwsza odpowiada kolorowi czerwonemu, druga zielonemu a trzecia niebieskiemu. Trzy składowe wartości należy oddzielić przecinkami i umieścić w nawiasie, natomiast przed nawiasem umieścić skrót RGB. Dla przykładu: rgb(0,0,0) oznacza kolor czarny, rgb(255,255,255) – biały, rgb(255,0,0) – czerwony, rgb(0,255,0) – zielony, rgb(0,0,255) – niebieski. Na przykład:

background-color: rgb(0,0,255);

Ostatnim sposobem jest zapis szesnastkowy (heksadecymalny) modelu RGB. Polega on również na zapisaniu kombinacji trzech podstawowych kolorów, lecz z użyciem trzech liczb szesnastkowych o wartości od 00 do FF, odpowiadających wartościom od 0 do 255. Umieszcza się je po znaku #. Dla przykładu: #000000 oznacza kolor czarny, #FFFFFF – biały, #FF0000 – czerwony, #00FF00 – zielony, #0000FF – niebieski. Jeżeli w każdej parze występują obok siebie takie same symbole, można zastosować zapis skrócony. Dla przykładu: #000000 jest równoważny #000. Wielkość liter i cyfr nie ma znaczenia. Na przykład:

background-color: #00F;

Przykład

Nadanie tekstowi niebieskiego koloru za pomocą trzech sposobów:

<html>
    <head>
        <title>Kolory</title>
        <style type="text/css">
            #slownie { color: blue; }
            #rgb { color: rgb(0,0,255); }
            #szesnastkowo { color: #00F; }
        </style>  
</head>
    <body>
        <p id="slownie">Tekst w kolorze określonym zapisem słownym.</p>
        <p id="rgb">Tekst w kolorze określonym zapisem RGB.</p>
        <p id="szesnastkowo">Tekst w kolorze określonym zapisem szesnastkowym.</p>
</body>
</html>

Efekt działania przykładowego kodu przedstawiony został na Rys. 1.

Rys. 1. Niebieski kolor tekstu uzyskany trzema sposobami.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać określanie kolorów w samouczku: