Kolory w CSS: nazwy, RGB, HEX, HSL

Kolory to jeden z podstawowych elementów stylizacji stron internetowych. Dzięki nim możesz nadawać charakter swoim projektom, poprawiać czytelność oraz tworzyć spójne kompozycje wizualne.

W CSS możesz ustawiać kolory na wiele sposobów. Najpopularniejsze z nich to:

• ✅ Nazwy kolorów (np. red, blue, green)
• ✅ RGB – wartości czerwonego, zielonego i niebieskiego
• ✅ HEX – szesnastkowy zapis koloru
• ✅ HSL – odcień, nasycenie i jasność

1. Nazwy kolorów

Najprostszy sposób to użycie angielskich nazw kolorów. Przeglądarki obsługują ponad 140 nazw.

h1 {
  color: blue;
}

Efekt:

To jest niebieski nagłówek

2. Kolory RGB

RGB oznacza Red (czerwony), Green (zielony), Blue (niebieski). Wartości podaje się w przedziale od 0 do 255.

p {
  color: rgb(255, 0, 0); /* czerwony */
  background-color: rgb(240, 240, 240); /* jasnoszare tło */
}

Efekt:

To jest czerwony tekst na jasnym tle

3. Kolory HEX

body {
  background-color: #f0f0f0;
}

h2 {
  color: #ff6600; /* pomarańczowy */
}

Efekt:

Pomarańczowy nagłówek

4. Kolory HSL

div {
  background-color: hsl(200, 100%, 90%);
  color: hsl(200, 80%, 30%);
}

Efekt:

🎯 Ćwiczenie w JSFiddle

Przetestuj kod w JSFiddle.
Wklej poniższy kod w sekcji HTML i CSS:

HTML:

<h1>Kolory w CSS</h1>
<p class="rgb">Tekst RGB</p>
<p class="hex">Tekst HEX</p>
<p class="hsl">Tekst HSL</p>

CSS:

h1 {
  color: navy;
}

.rgb {
  color: rgb(0, 128, 0);
  background-color: rgb(220, 255, 220);
}

.hex {
  color: #990000;
  background-color: #ffe5e5;
}

.hsl {
  color: hsl(240, 80%, 30%);
  background-color: hsl(240, 100%, 90%);
}

✅ Podsumowanie

• Kolory możesz definiować za pomocą nazw, RGB, HEX i HSL.
• HEX i RGB oferują precyzję – HSL pozwala manipulować odcieniem i jasnością.
• Używaj kolorów m.in. w: color, background-color, border-color.

Gotowe? Przejdź teraz do kolejnego tematu: czcionki i ich stylizacja!