Konwerter kolorów
Local only — nothing is uploaded unless you save or share it.
Konwerter kolorów: HEX na RGB, RGB na HEX i jedno albo drugie na HSL.
- Wpisz albo wklej kolor w dowolnym formacie
- Zobacz go natychmiast przeliczonego na każdy inny format
- Skopiuj potrzebny ci zapis
- HEX
- HEX z alfą
- RGB
- HSL
Zapisz to narzędzie
Miej Konwerter kolorów pod ręką
Użyj menu Udostępnij w przeglądarce, a potem „Dodaj do ekranu głównego”.
O tym narzędziu
Przeliczanie hexa na RGB, RGB na hexa albo jednego z nich na HSL to stały drobny podatek, bo narzędzia projektowe, CSS i edytory graficzne wolą każde inny zapis koloru. HEX jest zwięzły i króluje w CSS-ie oraz w przekazywaniu projektów. RGB odpowiada wprost temu, jak ekran naprawdę emituje światło. HSL opisuje kolor tak, jak myślą o nim ludzie: jako odcień z pewną ilością barwności i jasności, co znacznie ułatwia budowanie palety ręcznie — zachowaj odcień, zmień jasność, a masz spójny zestaw wariantów. Ten konwerter przyjmuje każdy z tych formatów plus popularne nazwy kolorów i jest celowo wyrozumiały dla składni. Możesz wkleić goły hex z kratką albo bez niej, użyć trzech lub sześciu znaków, dołączyć kanał alfa i napisać zarówno zapis z przecinkami, jak i nowszą składnię CSS rozdzieloną spacjami. Wszystko przelicza się w trakcie pisania, z żywą próbką koloru, żebyś zobaczył wynik, a nie go sobie wyobrażał.
Najczęstsze pytania
Którego formatu używać w CSS?
Każdy się nada. HEX jest najpowszechniejszy i najzwięźlejszy. HSL warto wziąć, gdy ręcznie budujesz odmiany jednego koloru, bo zmiana jasności przy zachowanym odcieniu i nasyceniu daje spójny zestaw wariantów o wiele łatwiej niż grzebanie w cyfrach hexa.
Czy oprócz przeliczania jest też próbnik kolorów?
Tak — próbka otwiera systemowy próbnik kolorów, więc wartość można wybrać okiem zamiast ją wpisywać, a zapisy HEX, RGB i HSL uaktualniają się razem. To w praktyce zadanie próbnika kolorów HTML: wybrać coś, co wygląda dobrze, i wynieść kod, który arkusz stylów przyjmie.
Co znaczą dodatkowe znaki w ośmioznakowym hexie?
Dwa ostatnie to kanał alfa, od 00 dla całkowicie przezroczystego do ff dla całkowicie krycia. Obsługuje go każda obecna przeglądarka i często jest to prostsze niż przechodzenie na rgba tylko po to, żeby dodać przezroczystość.
Dlaczego przeliczenie na HSL i z powrotem czasem lekko zmienia wartość?
Bo składowe HSL są zaokrąglane do liczb całkowitych dla czytelności, a takie zaokrąglenie nie jest doskonale odwracalne. Różnica to najwyżej krok albo dwa na kanał i nie widać jej, ale oznacza, że podróż tam i z powrotem nie zawsze jest identyczna co do bajta.
Czy mogę wkleić kolor bez kratki?
Tak. Gołe wartości hex są przyjmowane, podobnie jak trzyznakowy skrót, składnia CSS rozdzielona spacjami w rodzaju rgb(59 130 246) oraz popularne nazwy kolorów takie jak teal czy crimson.
Skąd mam wiedzieć, czy tekst będzie czytelny na kolorze?
Podgląd pokazuje na twoim kolorze zarówno czarny, jak i biały tekst, więc ocenisz to od razu. Po prawdziwe zaliczone albo niezaliczone wobec wytycznych dostępności sięgnij po sprawdzarkę kontrastu, która liczy współczynnik WCAG jak należy.
Pomóż ulepszyć to narzędzie
Znalazłeś błąd, chcesz zmiany albo brakuje Ci jakiegoś narzędzia?
Masz niewysłaną wiadomość.
Dzięki — mamy to. Odpowiedź znajdziesz w swojej skrzynce.Go to my messages