Najpopularniejsze standardy zapisu kolorów: HEX, RGB i Nazwy

Kolor to jeden z najważniejszych sygnałów, jakie Twoja strona wysyła odbiorcy – buduje nastrój, steruje uwagą i definiuje markę. Choć dla ludzkiego oka „czerwony” to po prostu czerwony, przeglądarka internetowa potrzebuje precyzyjnych instrukcji, aby wyświetlić dokładnie ten odcień, o który Ci chodzi. W HTML i CSS masz do dyspozycji kilka standardów zapisu barw. Zrozumienie różnic między nimi pozwoli Ci nie tylko swobodnie korzystać z gotowych palet, ale też świadomie dobierać kolory w kodzie strony.

• Najpopularniejsze standardy zapisu kolorów: HEX, RGB i Nazwy
  • 1. Nazwy kolorów (Color Names)
  • 2. Zapis szesnastkowy (HEX)
  • 3. Zapis RGB (Red, Green, Blue)
• Czy format podawanego koloru ma znaczenie?
• Popularne kody kolorów HTML
• Popularne pytania o kolory w HTML
  • Jak zmienić kolor czcionki w HTML?
  • Jak zmienić kolor tła w HTML?
  • Jak zmienić kolor tabeli, komórki lub wiersza w HTML?

Najpopularniejsze standardy zapisu kolorów: HEX, RGB i Nazwy

W projektowaniu stron internetowych spotkasz się najczęściej z trzema sposobami definiowania barw. Każdy z nich daje ten sam efekt wizualny, ale różni się składnią i zastosowaniem.

1. Nazwy kolorów (Color Names)

To najbardziej intuicyjny, ale też najmniej precyzyjny sposób. Wystarczy wpisać angielską nazwę, np. red, blue czy gold.

• Zalety: Łatwe do zapamiętania i świetne do szybkich testów (np. gdy chcesz sprawdzić, czy element w ogóle się wyświetla).
• Ograniczenia: Paleta jest sztywna – nowoczesne przeglądarki obsługują około 140 standardowych nazw. Jeśli potrzebujesz specyficznego odcienia "brudnego różu", nazwa pink może okazać się niewystarczająca.

Przykładowy zapis w HTML i CSS: HTML Colors – How to Use and Apply Colors in Web Design

HTML:
<p >Ten tekst ma być czerwony.</p>
<p >Ten tekst jest złoty.</p>
<p >Białe litery na czarnym tle.</p>

CSS:
.tytul {
 color: navy;
}

2. Zapis szesnastkowy (HEX)

To najpopularniejszy standard w webdesignie, który na pewno kojarzysz z charakterystycznym znakiem # na początku (np. #FF5733).

• Jak to działa: Kod składa się z trzech par znaków (cyfr 0-9 i liter A-F). Pierwsza para odpowiada za czerwień, druga za zieleń, trzecia za niebieski. Zobacz więcej o konwersji kolorów.
• Zastosowanie: Jest standardem przy kopiowaniu kolorów z programów graficznych (Photoshop, Figma) i zapewnia dostęp do ponad 16 milionów kombinacji barw.

CSS:
/* Przykłady popularnych kolorów w zapisie HEX */
body {
 background-color: #F4F4F4; /* Bardzo jasny szary (tło całej strony) */
 color: #333333;      /* Ciemny szary (główny tekst, łagodniejszy niż czarny) */
}

HTML:
<p >To jest tekst w czystej czerwieni.</p>
<div >Zielony kwadrat</div>

3. Zapis RGB (Red, Green, Blue)

Zapis ten, np. rgb(255, 0, 0), jest bardziej logiczny dla osób rozumiejących, jak działa ekran monitora.

• Jak to działa: Definiujemy jasność każdego z trzech kanałów świetlnych (czerwonego, zielonego i niebieskiego) w skali od 0 do 255. Wartość 0 oznacza brak koloru (czarny), a 255 pełną moc. Dowiedz się więcej o RGB.
• Zastosowanie: Format ten jest niezastąpiony, gdy planujemy używać półprzezroczystości – wystarczy wtedy skorzystać z rozszerzonej wersji RGBA, gdzie czwarta wartość określa stopień krycia (Alpha).

CSS:
/* Podstawowe kolory w zapisie RGB */
body {
 background-color: rgb(244, 244, 244); /* Bardzo jasny szary */
 color: rgb(51, 51, 51);        /* Ciemny szary (główny tekst) */
}

HTML:
<p >Tekst w czystej czerwieni.</p>
<p >Tekst w zieleni.</p>

Czy format podawanego koloru ma znaczenie?

Krótka odpowiedź: nie, jeśli chodzi o efekt końcowy. #FF0000, rgb(255, 0, 0) i red dają w przeglądarce dokładnie ten sam piksel kolorystyczny.

Zostaje kwestia wygodny i kontekstu, np.:

• Nazwy – szybkie testy i prototypy, gdy potrzebujesz czegoś "na chwilę"
• HEX – kopiujesz kolor z Figmy, Photoshopa lub brandbooka klienta – graficy zawsze podają HEX
• RGB/RGBA – gdy potrzebujesz manipulować przezroczystością lub dynamicznie zmieniać wartości koloru przez JavaScript

Natomiast, o ile format jakiego używasz nie ma większego znaczenia, to znaczenie mają palety kolorów do jakich masz dostęp. I tutaj jest ważna różnica:

• Nazwy kolorów to tylko ~140 z góry ustalonych barw – ograniczona lista
• HEX i RGB obejmują dokładnie tę samą przestrzeń: ponad 16 milionów kolorów (256 × 256 × 256 kombinacji)

No i powiedzmy sobie, że dodatkowo standardowe RGB nie ma przezroczystości. Dopiero jego rozszerzenie RGBA dodaje czwarty kanał Alpha. HEX też ma swoją wersję z przezroczystością – HEX 8-cyfrowy (ostatnie dwie cyfry to Alpha), ale jest znacznie rzadziej używany i mniej intuicyjny

Popularne kody kolorów HTML

Teraz, gdy znasz już sposoby zapisu kolorów (nazwy, HEX, RGB), czas na praktykę! Poniżej znajdziesz 16 podstawowych kolorów w pełnej kodzie – dokładnie te same, które od lat używają webdesignerzy na całym świecie.

Ta paleta pokazuje wszystkie trzy formaty obok siebie, więc możesz od razu porównać i wybrać najwygodniejszy dla swojego projektu.

Dlaczego te kolory? To klasyczna paleta VGA – działa wszędzie, na każdym urządzeniu i przeglądarce.

Popularne pytania o kolory w HTML

Przećwiczmy w praktyce, jak wygląda zmiana koloru w HTML i CSS. Ogólnie CSS jest nieco inaczej zbudowany (używa selektorów i klas), ale pokażemy Ci to na przykładach, abyś sam wybrał, co w danym momencie potrzebujesz. Możesz kopiować kody bezpośrednio z naszych palet powyżej!

Jak zmienić kolor czcionki w HTML?

<p >Czerwony tekst</p>
<p >Zielony tekst</p>
<p >Granatowy tekst</p>

/* W CSS (rekomendowane): */
<style>
.czerwony { color: #FF0000; }
.zielony { color: rgb(0,128,0); }
.granatowy { color: navy; }
</style>

<p >Czerwony tekst</p>
<p >Zielony tekst</p>
<p >Granatowy tekst</p>

Jak zmienić kolor tła w HTML?

<div >
 Żółte tło tekstu
</div>

<div >
 Fioletowe tło z białym tekstem
</div>

/* W CSS: */
<style>
.zolte-tlo { background-color: #FFFF00; padding: 20px; }
.fioletowe-tlo { 
 background-color: rgb(128,0,128); 
 color: white; 
 padding: 20px; 
}
</style>

<div >Żółte tło</div>
<div >Fioletowe tło</div>

Jak zmienić kolor tabeli, komórki lub wiersza w HTML?

<table border="1" >
 <tr > <!-- Szary wiersz -->
  <td >Zielona komórka</td>
  <td>Normalna komórka</td>
 </tr>
 <tr > <!-- Jasnoniebieski wiersz -->
  <td colspan="2" >
   Pomarańczowa komórka na 2 kolumny
  </td>
 </tr>
</table>

/* Cała tabela z kolorowym nagłówkiem: */
<table border="2" >
 <thead >
  <tr>
   <th>Nagłówek 1</th>
   <th>Nagłówek 2</th>
  </tr>
 </thead>
 <tbody>
  <tr >
   <td>Wiersz szary</td>
   <td>Dane</td>
  </tr>
  <tr>
   <td >Cyjan</td>
   <td>Dane</td>
  </tr>
 </tbody>
</table>

Szybka ściągawka: Zawsze używaj class="page_speed_781730444" dla HTML lub twórz klasy CSS dla powtarzalnych elementów. Kopiuj kolory prosto z naszej palety powyżej!