rgb()
Zapisuje kolor jako mieszankę światła czerwonego, zielonego i niebieskiego, z opcjonalną przezroczystością. Obejmuje też zapis hex.
Przykład
#.btn {
background: rgb(124 58 237);
box-shadow: 0 8px 20px rgb(124 58 237 / 0.35);
}
.btn.ghost {
background: rgb(124 58 237 / 0.15);
box-shadow: none;
color: rgb(196 181 253);
}<div style="display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 0 16px;">
<button class="btn" type="button" style="padding: 10px 18px; border: 0; border-radius: 10px; color: #fff; font: 600 15px system-ui, sans-serif;">Rozpocznij lekcję</button>
<button class="btn ghost" type="button" style="padding: 10px 18px; border: 0; border-radius: 10px; font: 600 15px system-ui, sans-serif;">Później</button>
</div>Cień i tło drugiego przycisku to ten sam fiolet co tło pierwszego, tylko z kanałem alfa. Nie trzeba dobierać osobnych kolorów.
Definicja i zastosowanie
#Ekran składa każdy kolor z trzech świateł: czerwonego, zielonego i niebieskiego. Funkcja rgb() podaje natężenie każdego z nich w skali od 0 do 255 albo od 0% do 100%: rgb(0 0 0) to czerń, rgb(255 255 255) biel, a rgb(124 58 237) fiolet. Im większe liczby, tym jaśniejszy kolor, bo światła się sumują.
Przezroczystość, czyli kanał alfa, dopisujesz po ukośniku: rgb(124 58 237 / 0.5) albo rgb(124 58 237 / 50%). Starsza składnia z przecinkami, rgb(124, 58, 237), i funkcja rgba() nadal działają i znaczą to samo. Współczesne rgb() przyjmuje alfę bez dodatkowej litery w nazwie.
Zapis szesnastkowy #7c3aed to te same trzy składowe w systemie szesnastkowym: po dwie cyfry od 00 do ff na czerwony, zielony i niebieski. Skrót #fff rozwija się do #ffffff, a czwarta para cyfr to alfa: #7c3aed80 oznacza około 50% krycia. Hex i rgb() opisują dokładnie te same kolory, więc wybór to kwestia wygody.
Wadą RGB jest to, że trudno w nim myśleć o kolorach: nie widać od razu, jak rozjaśnić dany odcień albo zrobić jego bledszą wersję. Do budowania palet wygodniejsze są hsl() i oklch(), a do mieszania barw color-mix().
Składnia
#rgb(<czerwony> <zielony> <niebieski> [/ <alfa>]?)
#rrggbb #rrggbbaa #rgb #rgbaWarianty zapisu
#fiolet, pełne krycie
Trzy liczby od 0 do 255: sporo czerwieni, mało zieleni i najwięcej niebieskiego.ten sam fiolet, połowa krycia
Alfa po ukośniku. Przez kolor prześwituje szachownica, a tekst pozostaje w pełni widoczny.pomarańcz w procentach
Składowe w procentach zamiast liczb. 100% to 255, a 60% to 153, więc wychodzi kolor 255, 153, 0.szmaragd w hex
Zapis szesnastkowy:10czerwieni,b9zieleni i81niebieskiego, czylirgb(16 185 129).skrót od #ff4433
Trzy cyfry to skrót, w którym każda cyfra się podwaja:#f43znaczy#ff4433.hex z alfą
Czwarta para cyfr to alfa:80w zapisie szesnastkowym to 128 z 255, czyli około 50% krycia.starsza składnia
Dawny zapis z przecinkami i literą „a” w nazwie. Nadal działa, ale w nowym kodzie wystarczyrgb()z ukośnikiem.
Warianty zapisu w praktyce
#rgb(124 58 237)
.demo { background: rgb(124 58 237); }rgb(124 58 237 / 50%)
.demo { background: rgb(124 58 237 / 50%); }rgb(100% 60% 0%)
.demo { background: rgb(100% 60% 0%); }#10b981
10 czerwieni, b9 zieleni i 81 niebieskiego, czyli rgb(16 185 129)..demo { background: #10b981; }#f43
#f43 znaczy #ff4433..demo { background: #f43; }#0ea5e980
80 w zapisie szesnastkowym to 128 z 255, czyli około 50% krycia..demo { background: #0ea5e980; }rgba(14, 165, 233, 0.6)
rgb() z ukośnikiem..demo { background: rgba(14, 165, 233, 0.6); }Więcej przykładów
#:root {
--brand-rgb: 167 139 250;
}
.chip {
border: 1px solid rgb(var(--brand-rgb));
background: rgb(var(--brand-rgb) / 0.15);
color: rgb(var(--brand-rgb));
}<span class="chip" style="display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 600;">Moduł 3: Flexbox</span>Zmienna przechowuje same składowe, bez nazwy funkcji. Dzięki temu w każdym miejscu możesz dopisać inną przezroczystość.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Gdy przezroczyste ma być tylko tło, użyj koloru z alfą zamiast
opacity. Właściwośćopacityrozjaśnia cały element razem z tekstem i dziećmi. - Kolory z narzędzi graficznych, np. z Figmy, zwykle dostaniesz w hex. Możesz je wkleić bez przeliczania, bo hex i
rgb()są równoważne. - W jednym wywołaniu nie mieszaj przecinków i spacji. Zapis
rgb(124, 58 237)jest błędny i przeglądarka go pominie.
Powiązane hasła
#- hsl()Zapisuje kolor przez odcień na kole barw, nasycenie i jasność. Łatwo w nim rozjaśnić, przyciemnić albo stonować kolor.
- oklch()Zapisuje kolor przez jasność, chromę i odcień w przestrzeni dopasowanej do oka. Kolory o tej samej jasności wyglądają równie jasno.
- color-mix()Miesza dwa kolory w podanych proporcjach i wybranej przestrzeni barw. Tworzy jaśniejsze, ciemniejsze i półprzezroczyste warianty.
- colorUstawia kolor tekstu i domyślny kolor obramowań, dekoracji oraz ikon SVG z currentcolor.
- background-colorUstawia kolor tła elementu.
- opacityUstawia przezroczystość całego elementu razem z jego zawartością.
Widzisz błąd albo brakuje przykładu? Napisz do nas.