Wartości kolorów: nazwy, HEX, RGB i HSL
Poznają Państwo wszystkie formaty kolorów CSS: nazwy kolorów, kody szesnastkowe oraz funkcje rgb() i hsl().
Wartości kolorów: nazwy, HEX, RGB i HSL to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Formaty kolorów CSS
CSS obsługuje wiele formatów kolorów. Wybór właściwego zależy od sposobu pracy, używanych narzędzi oraz tego, czy potrzebna jest przezroczystość lub dynamiczna manipulacja kolorem.
Nazwane kolory
CSS definiuje ponad 140 nazwanych kolorów, takich jak red, tomato i cornflowerblue. Doskonale sprawdzają się podczas szybkiego prototypowania, ale oferują ograniczoną precyzję.
<h1>Named Colors</h1>
<button>cornflowerblue button</button>
Kolory szesnastkowe
Kolory szesnastkowe używają znaku #, po którym następuje 6 cyfr szesnastkowych (lub 3 w skróconej wersji). Każda para cyfr określa składową czerwoną, zieloną i niebieską (0–255).
<p class="full-hex">Full hex: #ff6347</p>
<p class="shorthand-hex">Shorthand hex: #f64</p>
Kolory szesnastkowe z kanałem alfa
Aby określić przezroczystość kanału alfa, należy dodać czwartą parę cyfr szesnastkowych (lub czwartą cyfrę w skróconej wersji):
<div class="hex-alpha-full">8-digit hex alpha</div>
<div class="hex-alpha-short">4-digit shorthand alpha</div>
Kolory RGB
rgb() przyjmuje trzy liczby całkowite (0–255) określające składowe czerwone, zielone i niebieskie. Ten zapis jest bardzo czytelny i ułatwia programową manipulację kolorem.
<p class="rgb-tomato">rgb(255, 99, 71)</p>
<p class="rgb-black">rgb(0, 0, 0)</p>
<p class="rgb-white">rgb(255, 255, 255)</p>
Kolory RGBA
Aby określić przezroczystość kanału alfa, należy dodać do rgb() czwarty parametr (0–1). Jest to odpowiednik nowszego zapisu rgb() z separatorem w postaci ukośnika.
<p class="rgba-legacy">rgba(255, 99, 71, 0.5)</p>
<p class="rgba-modern">rgb(255 99 71 / 0.5)</p>
Kolory HSL
hsl() definiuje kolor za pomocą odcienia (0–360°), nasycenia (0–100%) i jasności (0–100%). Ten zapis jest znacznie bardziej intuicyjny podczas tworzenia palet kolorów i ich wariantów.
<p class="hsl-tomato">hsl(9, 100%, 64%)</p>
<p class="hsl-steelblue">hsl(210, 70%, 50%)</p>
Kolory HSLA
Podobnie jak rgba(), hsla() dodaje kanał alfa. W nowoczesnym CSS można zamiast tego użyć separatora w postaci ukośnika:
<p class="hsla-legacy">hsla(9, 100%, 64%, 0.5)</p>
<p class="hsla-modern">hsl(9 100% 64% / 0.5)</p>
Tworzenie wariantów kolorów za pomocą HSL
HSL doskonale sprawdza się podczas generowania rozjaśnień i przyciemnień. Należy zachować stały odcień i nasycenie, a zmieniać jasność:
<button class="btn-light">Light</button>
<button class="btn">Base</button>
<button class="btn-dark">Dark</button>
Słowo kluczowe currentColor
currentColor to dynamiczna wartość równa bieżącej wartości właściwości color elementu. Można jej użyć, aby obramowania, cienie lub wypełnienia SVG automatycznie dziedziczyły kolor tekstu.
<a href="#">Link with currentColor border</a>
Słowo kluczowe transparent
Słowo kluczowe transparent jest równoznaczne z rgba(0,0,0,0) — oznacza pełną przezroczystość. Przydaje się w efektach po najechaniu, gdy następuje płynne przejście od przezroczystości do koloru.
<button>Transparent background</button>
Szybkie sprawdzenie
W którym formacie kolorów najłatwiej tworzyć jaśniejsze i ciemniejsze odcienie tego samego koloru?
Podsumowanie
CSS oferuje nazwane kolory oraz formaty szesnastkowe, RGB i HSL. HSL idealnie nadaje się do programowej manipulacji kolorami. Wszystkie formaty obsługują kanał alfa zapewniający przezroczystość. currentColor i transparent to przydatne specjalne słowa kluczowe.
Ucz się CSS dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „Wartości kolorów: nazwy, HEX, RGB i HSL” jest bezpłatna?
Tak — pełny tekst „Wartości kolorów: nazwy, HEX, RGB i HSL” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Wartości kolorów: nazwy, HEX, RGB i HSL”?
Poznają Państwo wszystkie formaty kolorów CSS: nazwy kolorów, kody szesnastkowe oraz funkcje rgb() i hsl(). Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Wartości kolorów: nazwy, HEX, RGB i HSL”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Wartości kolorów: nazwy, HEX, RGB i HSL
- Kolor i obraz tła
- Gradienty: liniowe i radialne
- Przezroczystość z opacity i RGBA