Dokumentacja CSS z przykładami: Kolory

Q: Jakie formaty kolorów obsługuje CSS?

Nazwy kolorów (red), hex (#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() i color(), a także słowa kluczowe transparent i currentColor. Hex, rgb i hsl wystarczają do prawie całej codziennej pracy.

Q: Czym różni się rgb od rgba?

Już niczym. rgba() to starszy alias: obecny CSS pozwala rgb() przyjąć wartość alfa (rgb(37 99 235 / 50%)), a obie funkcje przyjmują te same argumenty we wszystkich obecnych przeglądarkach.

Q: Jak zrobić przezroczysty kolor w CSS?

Dodaj kanał alfa: rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5) albo 8-cyfrowy hex, na przykład #2563eb80. W przeciwieństwie do opacity wygasza to tylko ten jeden kolor, a nie cały element.

Q: Co oznacza currentColor?

To wartość właściwości color elementu. Użycie jej dla obramowania albo wypełnienia SVG sprawia, że automatycznie podążają za kolorem tekstu.

Sposoby zapisu koloru w CSS

Każda właściwość, która przyjmuje kolor (color, background-color, border-color, cienie, fill w SVG), akceptuje te same formaty. Pierwsze cztery próbki to ten sam niebieski zapisany na cztery sposoby, a piąta to nazwany kolor, który jest do niego zbliżony:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>One blue, four formats</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .swatch { padding: 10px 14px; margin: 6px 0; color: white; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="swatch" style="background: #2563eb;">#2563eb (hex)</div>
  <div class="swatch" style="background: rgb(37 99 235);">rgb(37 99 235)</div>
  <div class="swatch" style="background: rgb(37, 99, 235);">rgb(37, 99, 235) (comma syntax)</div>
  <div class="swatch" style="background: hsl(221.2 83.2% 53.3%);">hsl(221.2 83.2% 53.3%)</div>
  <div class="swatch" style="background: royalblue;">royalblue (a named color, close but not equal)</div>
</body>
</html>

Format	Przykład	Najlepszy do
Nazwa	`tomato`, `rebeccapurple`	Szybkich testów i prototypów
Hex	`#2563eb`, `#25e`	Kopiowania z narzędzi projektowych
`rgb()`	`rgb(37 99 235)`	Dodawania przezroczystości, pracy na wartościach RGB
`hsl()`	`hsl(221 83% 53%)`	Tworzenia jaśniejszych i ciemniejszych odcieni jednego koloru
`oklch()`	`oklch(55% 0.2 262)`	Palet o równomiernie odbieranej jasności
Słowa kluczowe	`transparent`, `currentColor`	Zobacz sekcje poniżej

Kolory hex

Kolor hex to #, a po nim czerwony, zielony i niebieski, każdy jako dwie cyfry szesnastkowe, od 00 do ff. Trzy formy to skróty albo rozszerzenia:

#rgb: każda cyfra jest podwajana, więc #25e to #2255ee.
#rrggbbaa: ostatnia para to alfa, więc #2563eb80 jest nieprzezroczysty w około 50%.
#rgba: krótka forma z alfą.

Wielkość liter w hex nie ma znaczenia: #2563EB i #2563eb to ten sam kolor.

rgb() i rgba()

rgb() przyjmuje czerwony, zielony i niebieski od 0 do 255 (albo od 0% do 100%). Opcjonalna czwarta wartość po ukośniku to alfa, od 0 (niewidoczny) do 1 albo od 0% do 100%.

color: rgb(37 99 235);          /* modern space syntax */
color: rgb(37 99 235 / 50%);    /* half transparent */
color: rgba(37, 99, 235, 0.5);  /* older comma syntax, same result */

rgba() i rgb() są teraz tą samą funkcją: obie przyjmują obie składnie i opcjonalną alfę. Stary kod używa rgba(), gdy potrzebuje przezroczystości, i nadal działa.

hsl(): format najłatwiejszy do modyfikacji

hsl() opisuje kolor tak, jak myślą o nim ludzie: barwą z koła barw, nasyceniem i jasnością. Zachowaj barwę i zmieniaj jasność, a dostaniesz całą skalę:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HSL scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 4px; margin-bottom: 8px; }
    .row div { flex: 1; padding: 20px 4px; text-align: center; border-radius: 4px; }
  </style>
</head>
<body>
  <div class="row">
    <div style="background: hsl(221 83% 90%);">90%</div>
    <div style="background: hsl(221 83% 75%);">75%</div>
    <div style="background: hsl(221 83% 53%); color: white;">53%</div>
    <div style="background: hsl(221 83% 35%); color: white;">35%</div>
    <div style="background: hsl(221 83% 20%); color: white;">20%</div>
  </div>
  <div class="row">
    <div style="background: hsl(0 70% 55%);">0 red</div>
    <div style="background: hsl(60 70% 55%);">60 yellow</div>
    <div style="background: hsl(120 70% 55%);">120 green</div>
    <div style="background: hsl(240 70% 55%); color: white;">240 blue</div>
    <div style="background: hsl(300 70% 55%);">300 magenta</div>
  </div>
</body>
</html>

Pierwszy rząd zachowuje barwę 221 i nasycenie 83% i zmienia tylko jasność. Drugi rząd obchodzi koło barw przy tym samym nasyceniu i jasności.

Przezroczystość: alfa a opacity

Kanał alfa sprawia, że prześwituje jeden kolor. opacity sprawia, że prześwituje cały element, łącznie z tekstem i dziećmi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alpha vs opacity</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600;
      background: repeating-linear-gradient(90deg, #fde68a 0 16px, #ffffff 16px 32px);
      padding: 12px;
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .alpha { background: rgb(37 99 235 / 40%); }
    .opacity { background: rgb(37 99 235); opacity: 0.4; }
  </style>
</head>
<body>
  <div class="box alpha" id="a">Alpha background: the text stays solid</div>
  <div class="box opacity" id="o">opacity 0.4: the text fades too</div>
</body>
</html>

transparent to słowo kluczowe oznaczające całkowicie przezroczystą czerń, rgb(0 0 0 / 0). To domyślne tło większości elementów.

currentColor

currentColor jest równe własnemu color elementu. Przycisk, którego obramowanie, ikona i tekst używają tej wartości, zmienia wszystko jedną deklaracją:

.button {
  color: #16a34a;
  border: 2px solid currentColor;
}
.button svg { fill: currentColor; }

Obramowania domyślnie mają już currentColor, dlatego border: 2px solid bez koloru pasuje do tekstu.

Wypróbuj dowolny kolor

Wpisz kolor w dowolnym formacie. Przeglądarka go przetworzy i pokaże obliczoną wartość; niepoprawny kolor nie zmienia próbki.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #swatch { height: 60px; margin: 12px 0; border: 1px solid #d1d5db; border-radius: 6px; background: white; }
  </style>
</head>
<body>
  <label>Color: <input id="val" value="hsl(38 92% 50%)" size="28"></label>
  <div id="swatch"></div>
  <code id="out"></code>
  <script>
    const swatch = document.getElementById('swatch');
    const input = document.getElementById('val');
    const show = () => {
      if (!CSS.supports('color', input.value)) {
        document.getElementById('out').textContent = 'not a valid color';
        return;
      }
      swatch.style.background = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(swatch).backgroundColor;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Wypróbuj tomato, #0f0, #2563eb80, rgb(0 0 0 / 25%), oklch(70% 0.15 150) i color-mix(in srgb, #2563eb, white 50%).

Nowsze funkcje kolorów

oklch(L C H): jasność, chroma i barwa w przestrzeni zaprojektowanej tak, żeby równa jasność wyglądała na równie jasną. Palety zbudowane w niej mają mniej brudnych środkowych stopni niż palety w HSL.
color-mix(in srgb, A, B 30%): miesza dwa kolory. Z white albo black tworzy jaśniejsze i ciemniejsze odcienie jednego koloru marki i działa ze zmiennymi CSS: color-mix(in srgb, var(--brand), white 80%).

Obie działają w obecnych wersjach Chrome, Firefoksa i Safari. Kolory marki trzymaj w zmiennych CSS, żeby wybrane formaty były w jednym miejscu.

Częste błędy

Brak # przed kolorem hex. color: 2563eb jest niepoprawne i ignorowane.
Używanie opacity do przezroczystego tła. Wygasza też tekst. Użyj koloru z alfą.
Mieszanie separatorów w nowoczesnej składni. rgb(37 99, 235) jest niepoprawne: użyj samych spacji albo samych przecinków.
Założenie, że nazwany kolor pasuje do projektu. royalblue to nie #2563eb. Skopiuj dokładny kod.
Ocena kontrastu na oko. Sprawdzaj kolory tekstu względem tła narzędziem do kontrastu; 4.5:1 to minimum dla zwykłego tekstu.

Najczęściej zadawane pytania

Jakie formaty kolorów obsługuje CSS?

Nazwy kolorów (red), hex (#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() i color(), a także słowa kluczowe transparent i currentColor. Hex, rgb i hsl wystarczają do prawie całej codziennej pracy.

Czym różni się rgb od rgba?

Już niczym. rgba() to starszy alias: obecny CSS pozwala rgb() przyjąć wartość alfa (rgb(37 99 235 / 50%)), a obie funkcje przyjmują te same argumenty we wszystkich obecnych przeglądarkach.

Jak zrobić przezroczysty kolor w CSS?

Dodaj kanał alfa: rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5) albo 8-cyfrowy hex, na przykład #2563eb80. W przeciwieństwie do opacity wygasza to tylko ten jeden kolor, a nie cały element.

Co to jest HSL w CSS?

Barwa, nasycenie, jasność (hue, saturation, lightness). Barwa to kąt na kole barw (0 czerwony, 120 zielony, 240 niebieski), nasycenie to intensywność koloru, a jasność idzie od 0% czerni do 100% bieli. Łatwo w nim o jaśniejsze i ciemniejsze odcienie: zmieniasz tylko ostatnią liczbę.

Co oznacza currentColor?

To wartość właściwości color elementu. Użycie jej dla obramowania albo wypełnienia SVG sprawia, że automatycznie podążają za kolorem tekstu.

Powiązane zagadnienia