---
title: Kolor
slug: Learn/CSS/Building_blocks/Values_and_units
tags:
  - CSS:Na_początek
translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors
translation_of_original: Web/Guide/CSS/Getting_started/Color
original_slug: Web/CSS/Na_początek/Kolor
---
<p>
</p><p>Ta strona dokładniej opisuje sposoby pracy z kolorami w CSS-ie.
</p><p>W swoim przykładowym arkuszu stylów, dodasz kolory tła.
</p>
<h3 id="Informacja:_Kolor" name="Informacja:_Kolor"> Informacja: Kolor </h3>
<p>Do tej pory w tym kursie używałeś(aś) ograniczonej liczby nazwanych kolorów.
CSS 2 definiuje 17 nazwanych kolorów.
Niektóre z nazw mogą nie być tym, czego się spodziewasz:
</p>
<table style="border: 0px; margin-left: 2em; text-align: right;">
<tbody><tr>
<td>   </td><td> black </td><td style="width: 2em; height: 2em; background-color: black;"> </td><td> gray </td><td style="width: 2em; height: 2em; background-color: gray;"> </td><td> silver </td><td style="width: 2em; height: 2em; background-color: silver;"> </td><td> white </td><td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;">
</td></tr>
<tr>
<td> podstawowe </td><td> red </td><td style="width: 2em; height: 2em; background-color: red;"> </td><td> lime </td><td style="width: 2em; height: 2em; background-color: lime;"> </td><td> blue </td><td style="width: 2em; height: 2em; background-color: blue;">
</td></tr>
<tr>
<td> drugorzędne </td><td> yellow </td><td style="width: 2em; height: 2em; background-color: yellow;"> </td><td> aqua </td><td style="width: 2em; height: 2em; background-color: aqua;"> </td><td> fuchsia </td><td style="width: 2em; height: 2em; background-color: fuchsia;">
</td></tr>
<tr>
<td> </td><td>maroon</td><td style="width: 2em; height: 2em; background-color: maroon;"> </td><td> orange</td><td style="width: 2em; height: 2em; background-color: orange;"> </td><td> olive</td><td style="width: 2em; height: 2em; background-color: olive;"> </td><td> purple</td><td style="width: 2em; height: 2em; background-color: purple;"> </td><td> green</td><td style="width: 2em; height: 2em; background-color: green;"> </td><td> navy</td><td style="width: 2em; height: 2em; background-color: navy;"> </td><td> teal</td><td style="width: 2em; height: 2em; background-color: teal;">
</td></tr></tbody></table>
<p><br>
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;">
<caption>Więcej szczegółów
</caption><tbody><tr>
<td> Twoja przeglądarka może obsługiwać znacznie więcej nazwanych kolorów, na przykład:
<table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;">
<tbody><tr>
<td> dodgerblue</td><td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td><td> peachpuff </td><td style="width: 2em; height: 2em; background-color: peachpuff;"> </td><td> tan </td><td style="width: 2em; height: 2em; background-color: tan;"> </td><td> firebrick </td><td style="width: 2em; height: 2em; background-color: firebrick;"> </td><td> aquamarine </td><td style="width: 2em; height: 2em; background-color: aquamarine;">
</td></tr></tbody></table>
<p>Szczegółową listę znajdziesz w dokumentacji CSS 3, w module Kolor, sekcji
<a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">słowa kluczowe kolorów w SVG</a>. Unikaj używania nazwanych kolorów, których przeglądarka osoby czytającej Twój dokument może nie obsługiwać.
</p>
</td></tr></tbody></table>
<p>Aby móc korzystać w większej palety kolorów, określ czerwony, zielony i niebieski komponent koloru, z którego chcesz skorzystać, używając znaku "hash" oraz trzech <i>heksadecymalnych</i> liczb w zakresie od 0 – 9, a – f. Litery a – f reprezentują wartości 10 – 15.
</p>
<table style="border: 0px; margin-left: 2em;">
<tbody><tr>
<td>black </td><td style="width: 2em; height: 2em; background-color: #000;"> </td><td><code>#000</code>
</td></tr>
<tr>
<td>pure red </td><td style="width: 2em; height: 2em; background-color: #f00;"> </td><td> <code>#f00</code>
</td></tr>
<tr>
<td>pure green </td><td style="width: 2em; height: 2em; background-color: #0f0;"> </td><td> <code>#0f0</code>
</td></tr>
<tr>
<td>pure blue </td><td style="width: 2em; height: 2em; background-color: #00f;"> </td><td> <code>#00f</code>
</td></tr>
<tr>
<td>white </td><td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td><td> <code>#fff</code>
</td></tr></tbody></table>
<p>Aby skorzystać z pełnej palety, określ dwie heksadecymalne liczby na każdy komponent:
</p>
<table style="border: 0px; margin-left: 2em;">
<tbody><tr>
<td>black </td><td style="width: 2em; height: 2em; background-color: #000;"> </td><td> <code>#000000</code>
</td></tr>
<tr>
<td>pure red </td><td style="width: 2em; height: 2em; background-color: #f00;"> </td><td> <code>#ff0000</code>
</td></tr>
<tr>
<td>pure green </td><td style="width: 2em; height: 2em; background-color: #0f0;"> </td><td> <code>#00ff00</code>
</td></tr>
<tr>
<td>pure blue </td><td style="width: 2em; height: 2em; background-color: #00f;"> </td><td> <code>#0000ff</code>
</td></tr>
<tr>
<td>white </td><td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td><td> <code>#ffffff</code>
</td></tr></tbody></table>
<p>Zazwyczaj te sześcioliczbowe, heksadecymalne kody możesz pobrać z Twojego programu graficznego lub innego narzędzia.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
<caption>Przykłady
</caption><tbody><tr>
<td> Odrobina praktyki i w większości wypadków możesz modyfikować trzyliczbowe kolory ręcznie:
<table style="border: 0px; margin-left: 2em; background-color: #fffff4;">
<tbody><tr>
<td>Zacznij od czystej czerwieni: </td><td style="width: 2em; height: 2em; background-color: #f00;"> </td><td><code>#f00</code>
</td></tr>
<tr>
<td>Aby ją rozjaśnić, dodaj trochę zielonego i niebieskiego: </td><td style="width: 2em; height: 2em; background-color: #f77;"> </td><td><code>#f77</code>
</td></tr>
<tr>
<td>Aby kolor był bardziej pomarańczowy, dodaj trochę zielonego: </td><td style="width: 2em; height: 2em; background-color: #fa7;"> </td><td><code>#fa7</code>
</td></tr>
<tr>
<td>Aby kolor był ciemniejszy, zmniejsz wartość wszystkich komponentów: </td><td style="width: 2em; height: 2em; background-color: #c74;"> </td><td><code>#c74</code>
</td></tr>
<tr>
<td>Aby zmniejszyć nasycenie, zmniejsz różnice między wartościami komponentów: </td><td style="width: 2em; height: 2em; background-color: #c98;"> </td><td><code>#c98</code>
</td></tr>
<tr>
<td>Jeśli ustawisz jednakową wartość wszystkich komponentów, uzyskasz kolor szary: </td><td style="width: 2em; height: 2em; background-color: #ccc;"> </td><td><code>#ccc</code>
</td></tr></tbody></table>
</td></tr>
<tr>
<td> Aby uzyskać pastelowy odcień, taki jak blady niebieski:
<table style="border: 0px; margin-left: 2em; background-color: #fffff4;">
<tbody><tr>
<td>Zacznij od białego: </td><td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td><td><code>#fff</code>
</td></tr>
<tr>
<td>Zredukuj trochę wartości komponentów innych, niż niebieski: </td><td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td><td><code>#eef</code>
</td></tr></tbody></table>
</td></tr></tbody></table>
<p><br>
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;">
<caption>Więcej szczegółów
</caption><tbody><tr>
<td> Możesz także określić kolor, używając decymalnych wartości RGB w zakresie 0 – 255, lub procentów.
<p>Na przykład to jest kasztanowaty (ciemnoczerwony):
</p>
<div style="width: 24em;"><pre>
rgb(128, 0, 0)
</pre></div>
<p>Więcej szczegółów na temat określania kolorów znajdziesz w sekcji
<a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Kolory</a> w specyfikacji CSS.
</p><p>Więcej informacji na temat dopasowania kolorów do kolorów systemowych, jak Menu czy ThreeDFace, znajdziesz w:
<a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 Kolory Systemowe</a> specyfikacji CSS.
</p>
</td></tr></tbody></table>
<p><br>
</p>
<h4 id="W.C5.82asno.C5.9Bci_kolor.C3.B3w" name="W.C5.82asno.C5.9Bci_kolor.C3.B3w"> Własności kolorów </h4>
<p>Korzystałeś(aś) już z własności <code>color</code> dla tekstu.
</p><p>Możesz też użyć własności <code>background-color</code>, aby zmienić tła elementów.
</p><p>Jeżeli ustawisz wartość tła na <code>transparent</code>, będzie ono przezroczyste i pokaże tło elementu rodzica.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
<caption>Przykład
</caption><tbody><tr>
<td> Boksy <b>Przykład</b> w tym kursie używają bladożółtego tła:
<div style="width: 24em;"><pre>
background-color: #fffff4;
</pre></div>
<p>Boksy <b>Więcej szczegółów</b> używają bladoszarego:
</p>
<div style="width: 24em;"><pre>
background-color: #f4f4f4;
</pre></div>
</td></tr></tbody></table>
<h3 id="Zadanie:_Korzystanie_z_kod.C3.B3w_kolor.C3.B3w" name="Zadanie:_Korzystanie_z_kod.C3.B3w_kolor.C3.B3w"> Zadanie: Korzystanie z kodów kolorów </h3>
<p>Wyedytuj swój plik CSS.
</p><p>Wykonaj zmiany oznaczone tutaj pogrubieniem, aby nadać pierwszym literom bladoniebieskie tło.
(Styl i komentarze w Twoim pliku będą prawdopodobnie inne niż pokazane tutaj.
Zachowaj styl i komentarze w stylu jaki wybrałeś(aś)).
</p>
<div style="width: 32em;">
<pre class="eval">/*** CSS Tutorial: Color page ***/

/* page font */
body {font: 16px "Comic Sans MS", cursive;}

/* paragraphs */
p {color: blue;}
#first {font-style: italic;}

/* initial letters */
strong {
 color: red;
 <strong>background-color: #ddf;</strong>
 font: 200% serif;
 }

.carrot {color: red;}
.spinach {color: green;}
</pre>
</div>
<p>Odśwież okno przeglądarki, aby zobaczyć wynik:
</p>
<table>
<tbody><tr>
<td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets
</td></tr>
<tr>
<td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets
</td></tr></tbody></table>
<p><br>
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 100%;">
<caption>Wyzwanie
</caption><tbody><tr>
<td> W swoim pliku CSS zmień wszystkie nazwy kolorów na 3-cyfrowe kody kolorów, tak, żeby rezultat pozostał taki sam.
<p>(To nie jest do końca możliwe, ale możesz być blisko ideału.
Aby uzyskać dokładnie taki efekt, potrzebujesz 6-cyfrowych kodów oraz musisz zajrzeć do specyfikacji CSS lub użyć narzędzia graficznego, aby znaleźć odpowiednie kody).
</p>
</td></tr></tbody></table>
<p><br>
</p>
<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4>
<p>Twój przykładowy dokument i przykładowy arkusz stylów ściśle rozdzielają treść od stylu.
</p><p>Następna strona wyjaśnia, jak robić wyjątki od tego rozdziału:
<b><a href="pl/CSS/Na_pocz%c4%85tek/Tre%c5%9b%c4%87">Treść</a></b>
</p>
<div class="noinclude">
</div>
{{ languages( { "en": "en/CSS/Getting_Started/Color", "fr": "fr/CSS/Premiers_pas/Couleurs", "it": "it/Conoscere_i_CSS/Colori", "ja": "ja/CSS/Getting_Started/Color", "pt": "pt/CSS/Como_come\u00e7ar/Cor" } ) }}