Kolory HTML — kody HEX, RGB, HSL i nazwy kolorów (tabela + jak używać w CSS)

Kolory w HTML i CSS można definiować na kilka sposobów: nazwami (np. red, blue), kodami HEX (np. #FF0000), funkcjami RGB (np. rgb(255, 0, 0)) i HSL (np. hsl(0, 100%, 50%)). Każdy sposób opisuje ten sam kolor — różnią się tylko formatem zapisu.

W tym poradniku wyjaśniam czym jest każdy format, kiedy którego używać, daję tabelę najpopularniejszych kolorów i pokazuję narzędzia do wybierania kolorów.

Format 1. Nazwy kolorów (CSS Named Colors)

CSS definiuje 148 nazw kolorów, które możesz używać bezpośrednio:

color: red;
background-color: dodgerblue;
border-color: gold;

Tabela najpopularniejszych nazw kolorów

Pełna lista 148 kolorów: szukaj „CSS named colors” w MDN Web Docs.

Kiedy używać: szybkie prototypy, proste style, czytelność kodu. Kiedy nie: dokładne dopasowanie do brandingu (148 kolorów to za mało — użyj HEX/RGB).

Format 2. Kody HEX — najpopularniejszy

HEX (hexadecimal / szesnastkowy) to 6-znakowy kod poprzedzony #, który definiuje kolor przez składowe czerwony (R), zielony (G) i niebieski (B):

#RRGGBB

#FF0000  = czerwony (R=FF, G=00, B=00)
#00FF00  = zielony  (R=00, G=FF, B=00)
#0000FF  = niebieski (R=00, G=00, B=FF)
#FFFFFF  = biały    (R=FF, G=FF, B=FF)
#000000  = czarny   (R=00, G=00, B=00)
#808080  = szary    (R=80, G=80, B=80)
#FF6B35  = pomarańcz (własny kolor)

Każda para znaków (RR, GG, BB) to wartość od 00 (brak koloru) do FF (pełny kolor) w systemie szesnastkowym (0–255 w dziesiętnym).

Skrócony HEX (3 znaki)

Jeśli obie cyfry w parze są identyczne, możesz skrócić:

#FF0000 = #F00
#00FF00 = #0F0
#FFFFFF = #FFF
#000000 = #000
#336699 = #369

HEX z przezroczystością (8 znaków)

#FF000080  = czerwony z 50% przezroczystości (80 = ~50% w hex)
#00000033  = czarny z ~20% przezroczystości

Ostatnie 2 znaki = alpha (00 = pełna przezroczystość, FF = pełna nieprzezroczystość).

HEX to najczęściej używany format w web designie — kompaktowy, wspierany wszędzie, łatwy do skopiowania z narzędzi graficznych (Figma, Photoshop, Canva).

Format 3. RGB — intuicyjny

RGB definiuje kolor przez trzy wartości: Red (0–255), Green (0–255), Blue (0–255):

color: rgb(255, 0, 0);        /* czerwony */
color: rgb(0, 128, 0);        /* zielony */
color: rgb(0, 0, 255);        /* niebieski */
color: rgb(255, 255, 255);    /* biały */
color: rgb(0, 0, 0);          /* czarny */
color: rgb(128, 128, 128);    /* szary */

RGBA — RGB z przezroczystością

color: rgba(255, 0, 0, 0.5);  /* czerwony, 50% przezroczysty */
color: rgba(0, 0, 0, 0.8);    /* czarny, 80% nieprzezroczysty */
background: rgba(255, 255, 255, 0.9); /* biały, lekko przezroczysty */

Alpha: 0 = pełna przezroczystość, 1 = pełna nieprzezroczystość. 0.5 = 50%.

Kiedy RGB: gdy potrzebujesz przezroczystości (rgba) lub programistycznie manipulujesz kolorami (JS/Python — łatwiej operować na liczbach niż na hex strings).

Format 4. HSL — projektancki

HSL (Hue, Saturation, Lightness) definiuje kolor przez: odcień (0–360°, kąt na kole kolorów), nasycenie (0–100%, szary ↔ czysty kolor) i jasność (0–100%, czarny ↔ biały):

color: hsl(0, 100%, 50%);      /* czerwony */
color: hsl(120, 100%, 25%);    /* ciemnozielony */
color: hsl(240, 100%, 50%);    /* niebieski */
color: hsl(0, 0%, 50%);       /* szary (nasycenie 0%) */
color: hsl(210, 80%, 60%);    /* przyjemny niebieski */

Dlaczego HSL jest przydatny

HSL jest bardziej intuicyjny niż HEX/RGB do tworzenia wariantów koloru:

• Chcesz jaśniejszą wersję? Zwiększ L (lightness): hsl(210, 80%, 60%) → hsl(210, 80%, 80%)
• Chcesz ciemniejszą? Zmniejsz L: hsl(210, 80%, 60%) → hsl(210, 80%, 30%)
• Chcesz pastelową? Zmniejsz S (saturation): hsl(210, 80%, 60%) → hsl(210, 30%, 60%)
• Chcesz inny odcień w tej samej tonalności? Zmień H (hue): hsl(210, 80%, 60%) → hsl(150, 80%, 60%)

W HEX/RGB zmiana jasności wymaga przeliczania 3 wartości. W HSL: zmieniasz jedną liczbę. Dlatego HSL jest preferowany przez projektantów.

HSLA — z przezroczystością

color: hsla(210, 80%, 60%, 0.5); /* niebieski, 50% przezroczysty */

CSS Custom Properties (zmienne) — kolory w jednym miejscu

W nowoczesnym CSS definiujesz kolory jako zmienne (Custom Properties) i używasz ich w całym arkuszu:

:root {
  --primary: #1E90FF;       /* główny kolor marki */
  --primary-dark: #0D6BBF;  /* ciemniejszy wariant */
  --primary-light: #6BB3FF; /* jaśniejszy wariant */
  --text: #333333;          /* tekst */
  --bg: #FFFFFF;            /* tło */
  --gray: #F5F5F5;          /* sekcje szare */
}

h1 { color: var(--primary); }
a { color: var(--primary); }
a:hover { color: var(--primary-dark); }
body { color: var(--text); background: var(--bg); }
.section-gray { background: var(--gray); }

Zmiana koloru marki = zmiana w jednym miejscu (:root) → cała strona się aktualizuje. Bez zmiennych: zmieniasz kolor w 50 miejscach. Z zmiennymi: w jednym.

Narzędzia do wybierania kolorów

• Google Color Picker — wpisz „color picker” w Google → interaktywny picker z HEX/RGB/HSL.
• Coolors.co — generator palet kolorów. Naciskaj spację → nowe kombinacje. Eksport do HEX/RGB/CSS.
• ColorHunt.co — ręcznie kuratorowane palety (popularne w web designie).
• Contrast Checker (WebAIM) — sprawdza kontrast tekst/tło pod kątem dostępności (WCAG).
• Chrome DevTools — kliknij na wartość koloru w Styles → interaktywny picker z podglądem.
• Adobe Color (color.adobe.com) — zaawansowane tworzenie palet z koła kolorów (komplementarne, triadyczne, analogiczne).

Kontrast i dostępność — WCAG

Nie każda kombinacja kolorów jest czytelna. WCAG 2.1 (Web Content Accessibility Guidelines) wymaga minimalnego kontrastu tekst/tło:

• AA (minimum): kontrast ≥ 4.5:1 dla normalnego tekstu, ≥ 3:1 dla dużego tekstu (18px+)
• AAA (idealny): kontrast ≥ 7:1 dla normalnego tekstu

Przykłady:

• Czarny tekst (#000) na białym tle (#FFF): kontrast 21:1 ✅ (idealny)
• Szary tekst (#999) na białym tle (#FFF): kontrast 2.8:1 ❌ (za niski!)
• Biały tekst (#FFF) na niebieskim tle (#1E90FF): kontrast 3.2:1 ⚠️ (OK dla dużego tekstu)

Sprawdź kontrast: webaim.org/resources/contrastchecker — wpisujesz kolor tekstu i tła, dostajesz ocenę AA/AAA.

Konwersja między formatami

Konwerter online: wpisz „hex to rgb” w Google → wbudowany konwerter.

Najczęściej zadawane pytania

Który format wybrać — HEX, RGB czy HSL?

HEX — domyślny w web designie (kompaktowy, kopiujesz z Figma/Photoshop). RGB/RGBA — gdy potrzebujesz przezroczystości lub manipulujesz kolorem w JS. HSL — gdy tworzysz warianty koloru (jaśniejszy, ciemniejszy, pastelowy). W praktyce: większość projektów używa HEX + RGBA dla przezroczystości.

Co to jest opacity vs rgba?

opacity: 0.5 — sprawia, że CAŁY element (tekst + tło + border) jest przezroczysty. rgba(0,0,0,0.5) — sprawia, że TYLKO ten konkretny kolor jest przezroczysty (np. tło, ale tekst pełny). Użyj rgba gdy chcesz przezroczyste tło z nieprzezroczystym tekstem.

Jak wybrać kolory do strony?

Zasada: 1 kolor główny (brand) + 1 kolor akcentowy (CTA, linki) + szarości (tekst, tła, bordery). Narzędzie: Coolors.co — generuj palety, eksportuj do CSS. Inspiracja: ColorHunt.co, Dribbble.com (design showcases).

Dlaczego #008000 to „green” a nie #00FF00?

Historycznie: CSS nazwał green jako #008000 (ciemnozielony), a #00FF00 jako lime. To zaskakuje wielu ludzi — green w CSS nie jest „czystą zielenią”. Jeśli chcesz jasną zieleń: użyj lime (#00FF00) lub własnego HEX.

Podsumowanie

Kolory w HTML/CSS: HEX (#FF0000) — najpopularniejszy, kompaktowy. RGB (rgb(255,0,0)) — z przezroczystością (rgba). HSL (hsl(0,100%,50%)) — intuicyjny do tworzenia wariantów. Nazwy (red) — szybkie, ale ograniczone do 148 kolorów. Używaj CSS Custom Properties (--primary: #1E90FF) do zarządzania kolorami w jednym miejscu. I zawsze sprawdzaj kontrast (webaim.org/resources/contrastchecker) — czytelność > estetyka.