HEX, RGB, HSL: zrozumienie kodów kolorów w sieci
Edytujesz stronę internetową i widzisz #FF5733 w CSS. Albo pracujesz z projektantem, który wysyła rgb(255, 87, 51). Albo narzędzie projektowe pokazuje kolor jako hsl(11, 100%, 60%). Wszystkie opisują dokładnie ten sam kolor — żywą czerwono-pomarańczową — ale w trzech różnych formatach.
Jak działają kolory cyfrowe
Każdy kolor na ekranie jest tworzony przez mieszanie trzech podstawowych kolorów światła: czerwonego, zielonego i niebieskiego (RGB). Zmieniając intensywność każdego kanału od zera do maksimum, można stworzyć każdy z około 16,7 miliona kolorów.
Czy wiesz, że? Cyfra 16,7 miliona pochodzi z 256 poziomów na kanał (0-255) w trzech kanałach: 256 x 256 x 256 = 16 777 216 możliwych kolorów.
Kolory HEX
Kod koloru HEX to sześcioznakowy ciąg poprzedzony symbolem hash. Sześć znaków jest podzielone na trzy pary, każda reprezentująca kanał koloru w systemie szesnastkowym:
| Para | Kanał | Zakres |
|---|---|---|
| Pierwsze dwa znaki | Czerwony | 00 do FF |
| Środkowe dwa znaki | Zielony | 00 do FF |
| Ostatnie dwa znaki | Niebieski | 00 do FF |
Wskazówka Kody HEX to najczęściej używany format w web developmencie. Jeśli nauczysz się tylko jednego formatu, naucz się tego.
Kolory RGB
Notacja RGB bezpośrednio podaje wartości kanałów czerwonego, zielonego i niebieskiego jako liczby dziesiętne od 0 do 255.
RGBA: dodawanie przezroczystości
RGBA dodaje czwartą wartość dla krycia (alpha), od 0 (całkowicie przezroczysty) do 1 (całkowicie nieprzezroczysty).
Kolory HSL
HSL oznacza Hue (odcień), Saturation (nasycenie), Lightness (jasność). Zamiast myśleć w kategoriach kanałów czerwonego/zielonego/niebieskiego, HSL opisuje kolor tak, jak ludzie naturalnie o nim myślą.
Odcień to sam kolor, wyrażony jako stopień na kole kolorów (0-360). Nasycenie to jak żywy jest kolor, od 0% (szary) do 100% (pełne nasycenie). Jasność to jak jasny lub ciemny jest kolor, od 0% (czarny) do 100% (biały).
Czy wiesz, że? HSL jest uważany za najbardziej przyjazny dla projektantów format kolorów, ponieważ mapuje się na to, jak naturalnie opisujemy kolory. „Zrób trochę jaśniejszy" oznacza zwiększenie wartości L. „Zrób mniej żywy" oznacza zmniejszenie wartości S.
Kiedy używać którego formatu
| Format | Najlepszy do | Zaleta |
|---|---|---|
| HEX | Arkusze stylów CSS, specyfikacje projektowe | Kompaktowy, powszechnie rozumiany |
| RGB | Programowa manipulacja kolorami | Intuicyjne wartości kanałów |
| HSL | Praca projektowa, tworzenie schematów kolorów | Odpowiada ludzkiemu postrzeganiu kolorów |
Konwersja między formatami
Wskazówka Konwertuj między HEX, RGB, HSL i więcej: Jak konwertować kody kolorów. Wpisz dowolny kolor w dowolnym formacie i natychmiast uzyskaj wszystkie pozostałe.
Zacznij pracę z kolorami:
Wszystkie narzędzia są darmowe i działają bezpośrednio w przeglądarce.