rgb()

Wartości

• składowe – liczby 0–255 albo procenty 0–100% (wszystkie tego samego rodzaju). Odpowiadają parom zapisu szesnastkowego: #0088d1 = rgb(0 136 209).
• alfa – po ukośniku liczba 0–1 albo procenty: / 0.5, / 50%. Bez alfy kolor jest kryjący.
• starsza składnia – z przecinkami rgb(0, 136, 209) i rgba(0, 136, 209, 0.5); dziś rgb() i rgba() to to samo.
• kolor względny – rgb(from var(--blue) r g b / 50%): składowe przejęte z innego koloru.

Przykłady

Jeden kolor z różnym kryciem na paskowanym podłożu:

<div class="base">
  <span class="full">pełny</span>
  <span class="half">/ 50%</span>
  <span class="faint">/ 20%</span>
</div>

.base {
  max-width: 300px;
  padding: 10px;
  background: repeating-linear-gradient(45deg, #fff 0 8px, #ddd 8px 16px);
}
.base span {
  display: inline-block;
  padding: 10px 14px;
  color: #000;
}
.full { background: rgb(0 136 209); color: #fff; }
.half { background: rgb(0 136 209 / 50%); }
.faint { background: rgb(0 136 209 / 20%); }

Półprzezroczysty wariant koloru z własnej właściwości (kolor względny):

<p class="highlight">Wyróżniony wiersz</p>

:root { --blue: rgb(0 136 209); }
.highlight {
  max-width: 300px;
  margin: 0;
  padding: 8px 10px;
  border-left: 4px solid var(--blue);
  background: rgb(from var(--blue) r g b / 15%);
}

Na co uważać

• W składowych nie miesza się liczb i procentów: starsze przeglądarki odrzucą rgb(0 50% 209) (Chrome do wersji 121, Firefox do 112, Safari do 17).
• Składnię bez przecinków obsługują Chrome od wersji 65, Firefox od 52 i Safari od 12.1. Przecinków i ukośnika się nie łączy: rgb(0, 136, 209 / 50%) to błąd.
• Kolory względne (from) liczą się poprawnie od Chrome 122, Firefox 128 i Safari 18; starsze Chrome i Safari je znają, ale liczą składowe inaczej.
• getComputedStyle zwraca kolory zapisane jako rgb(), #hex i hsl() w starszej formie: rgb(0, 136, 209), z przezroczystością rgba(0, 136, 209, 0.5). Kolor względny zwraca jako color(srgb …).
• Przezroczysty kolor tła nie robi przezroczystej zawartości elementu – w odróżnieniu od opacity.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: działa we wszystkich popularnych przeglądarkach, i to od dawna (najpóźniej od 2015 roku). Od wersji: Chrome 1, Firefox 1, Safari 1. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
hsl()
oklch()
color-mix()
color
background-color
opacity