Konwerter kolorów

Trzy sposoby zapisu tego samego koloru

Ekrany mieszają każdy kolor z czerwonego, zielonego i niebieskiego światła, a HEX, RGB i HSL to po prostu trzy notacje dla tych samych 16,7 miliona kombinacji w przestrzeni barw sRGB. To, której potrzebujesz, zależy od tego, dokąd trafi wartość.

• HEX, np. #2563eb: trzy pary cyfr szesnastkowych dla czerwieni, zieleni i błękitu, każda od 00 do ff (od 0 do 255). Zwarty i łatwy do skopiowania, jest domyślny w narzędziach projektowych, księgach znaku i większości CSS.
• RGB, np. rgb(37, 99, 235): te same trzy kanały w zapisie dziesiętnym. Przydatny, gdy kod operuje bezpośrednio na liczbach, jak przy rysowaniu na kanwie, przetwarzaniu obrazów, zasobach kolorów w Androidzie czy w Pillow w Pythonie.
• HSL, np. hsl(221, 83%, 53%): odcień, nasycenie i jasność. Jedyna z trzech notacji, którą człowiek potrafi dostosować, rozumując o niej, dlatego jest ulubioną przy budowaniu palet i motywów.

Krótka forma HEX #36f to skrót od #3366ff, w którym każda cyfra jest podwojona. Działa tylko wtedy, gdy obie cyfry w każdej parze są takie same.

Jak czytać wartości HSL

HSL opisuje kolor tak, jak mówią o nim ludzie:

• Odcień to pozycja na kole barw w stopniach: 0 to czerwień, 60 żółć, 120 zieleń, 180 cyjan, 240 błękit, 300 magenta, a 360 wraca do czerwieni.
• Nasycenie biegnie od 0%, czyli neutralnej szarości, do 100%, najbardziej intensywnej wersji danego odcienia.
• Jasność biegnie od 0%, zawsze czerni, przez 50%, czysty kolor, do 100%, zawsze bieli.

To właśnie czyni HSL praktycznym w systemach projektowych. Zachowaj stały odcień i nasycenie, zmieniaj jasność od 95% do 15%, a otrzymasz skalę od rozjaśnień do przyciemnień dla przycisków, teł i obramowań. Obróć odcień o 180 stopni, by uzyskać akcent dopełniający, albo o 30 stopni w którąkolwiek stronę dla kolorów analogicznych.

Jedno ograniczenie: jasność w HSL to średnia matematyczna, a nie to, jak jasny kolor wydaje się oku. Żółć przy 50% jasności wygląda o wiele jaśniej niż błękit przy 50%, więc kolory o tej samej wartości L mogą mieć zupełnie inny kontrast z białym tekstem. Zawsze sprawdzaj kontrast na konkretnej parze.

Co przyjmuje ten konwerter

Wklej lub wpisz wartość w pole albo wybierz kolor próbnikiem, a wiersze HEX, RGB i HSL zaktualizują się razem z dużym podglądem. Akceptowane dane wejściowe:

• #rgb, #rgba, #rrggbb i #rrggbbaa, z # lub bez.
• 148 nazw kolorów CSS, takich jak tomato czy rebeccapurple.
• rgb(37, 99, 235) i rgba(37, 99, 235, 0.5) albo nowoczesna składnia ze spacjami rgb(37 99 235 / 50%). Kanały mogą być liczbami dziesiętnymi lub procentami.
• hsl(221, 83%, 53%), hsla(…) i hsl(221.5 83% 53%). Odcień może mieć jednostkę deg, turn, rad lub grad; znaki procentu są opcjonalne.
• Trzy same liczby: 37, 99, 235 lub 37 99 235.

Wartości spoza zakresu są przycinane: rgb(300, 0, 0) daje czerwień 255. Odcień 360 lub więcej albo ujemny zawija się wokół koła. Kanały dziesiętne są zaokrąglane do liczb całkowitych.

Kanał alfa — w 4- lub 8-cyfrowym HEX, w rgba(), hsla() czy po / — jest odczytywany, ale pomijany, więc wyniki są zawsze w pełni nieprzezroczyste.

Suwaki R, G i B pod wynikami zmieniają po jednym kanale. Przydają się, gdy chcesz nieco ocieplić lub ochłodzić kolor, obserwując podgląd i aktualizujące się wszystkie trzy notacje.

Dlaczego przy konwersji w drugą stronę wartości przesuwają się o jeden

Konwersje między HSL a RGB wymagają ułamków, a każdy wynik jest tu zaokrąglany do liczb całkowitych, tak jak zwykle zapisuje się CSS. HSL ma mniej kombinacji całkowitych niż RGB, mniej więcej 3,6 miliona wobec 16,7 miliona, więc kilka kolorów RGB dzieli jedną zaokrągloną wartość HSL.

Na przykład #2563eb konwertuje się na hsl(221, 83%, 53%), ale wpisanie tego HSL z powrotem daje #2463eb: czerwień wynosi 36 zamiast 37. Różnica jest niewidoczna dla oka, ale ma znaczenie, jeśli księga znaku określa dokładną wartość HEX. Traktuj HEX lub RGB jako źródło prawdy, a HSL wykorzystuj do eksplorowania wariantów, a nie do przechowywania oficjalnych kolorów.

Jak wykorzystać wyniki

• W CSS wszystkie trzy ciągi wynikowe można wkleić bez zmian. Zmienne CSS w rodzaju --brand: #2563eb; to najczystszy sposób na ich ponowne użycie.
• Przy ikonie witryny najpierw ustal tutaj kolor marki, zastosuj go do logo w narzędziu projektowym, a potem zamień logo w pełny zestaw ikon za pomocą generatora favicon.
• Przy firmowym kodzie QR zachowaj silny kontrast: ciemny pierwszy plan o jasności około 20–30% na białym tle skanuje się niezawodnie, a jasne lub mało nasycone kolory często zawodzą. Generator kodów QR pozwoli to sprawdzić.
• Kolor w druku to zupełnie inna sprawa. Ekrany używają RGB, drukarki CMYK, a intensywnego ekranowego błękitu może nie dać się odtworzyć farbą. Gdy dokładny kolor ma znaczenie, poproś drukarnię o próbny wydruk.

Cała konwersja odbywa się w przeglądarce.