C& Color & Design

Konwerter HEX RGB

Konwertuj kolory między HEX, RGB(A) i HSL(A) z aktualizacją na żywo, obsługą alfa i gotowymi do skopiowania wartościami CSS.

🔒 Działa całkowicie w Twojej przeglądarce — nic nie jest przesyłane

HEX

RGB

HSL

HEX

RGB

RGBA

HSL

HSLA

Advertisement

Konwertuj formaty kolorów bez zgadywania

Wartości kolorów często wędrują między narzędziami preferującymi różne formaty. Projektant może przekazać token HEX, animacja CSS może wymagać kanałów RGB, a zmiana motywu bywa najłatwiejsza w HSL. Ten konwerter HEX RGB synchronizuje popularne formaty webowe, więc wpisujesz posiadaną wersję i kopiujesz tę, której potrzebujesz. Podgląd na żywo od razu ujawnia też pomyłki: jeśli kanał zostanie wpisany błędnie, podgląd natychmiast się zmieni.

Konwerter obsługuje codzienny przepływ pracy z CSS: sześciocyfrowy HEX, RGB, RGBA, HSL i HSLA. Alfa jest kontrolowana osobno, ponieważ przezroczystość to zwykle decyzja projektowa, a nie część tokenu koloru marki. Ustaw alfa na jeden dla kolorów pełnych albo obniż ją, aby tworzyć nakładki, obwódki fokusa, cienie i półprzezroczyste tła o tym samym odcieniu bazowym.

Kiedy używać RGB, RGBA, HSL lub HSLA

RGB to bezpośredni opis koloru ekranu, przydatny przy dopasowywaniu wartości ze zrzutów ekranu, danych wyjściowych canvas lub starszych narzędzi projektowych. RGBA dodaje przezroczystość, wygodną dla nakładek i subtelnych obramowań. HSL opisuje kolor za pomocą odcienia, nasycenia i jasności, więc jest bardziej naturalny, gdy chcesz tworzyć kolory pokrewne: obróć odcień dla nowego akcentu, zmniejsz nasycenie dla stonowanego stanu lub zwiększ jasność, aby uzyskać jaśniejszy wariant. HSLA dodaje tę samą kontrolę alfa do tego bardziej czytelnego modelu.

Wiarygodne wartości dla CSS i design tokenów

Spójne konwersje mają znaczenie w systemach projektowych. Błędy zaokrągleń lub skopiowane literówki mogą tworzyć niemal identyczne kolory, trudne do zauważenia, a kłopotliwe w utrzymaniu. To narzędzie ogranicza kanały RGB do prawidłowego zakresu 0–255, utrzymuje procenty HSL w zakresie 0–100 i formatuje wynik jako gotowy do wklejenia CSS. Ponieważ działa lokalnie, możesz bezpiecznie konwertować kolory niewydanych produktów, palety klientów czy wewnętrzne tokeny marki bez wysyłania ich gdziekolwiek.

Jak używać

  1. Wprowadź wartośćWpisz wartość HEX lub dostosuj kanały RGB i HSL.
  2. Sprawdź formatyKonwerter utrzymuje zsynchronizowane wyniki HEX, RGB(A) i HSL(A).
  3. Skopiuj CSSUżyj przycisków kopiowania, aby wkleić potrzebny format do CSS, design tokenów lub dokumentacji.

Najczęściej zadawane pytania

Czy mogę konwertować z RGB na HEX?
Tak. Zmień pola czerwieni, zieleni lub błękitu, a wyniki HEX, RGB, RGBA, HSL i HSLA zaktualizują się natychmiast.
Czy HEX obsługuje tutaj przezroczystość?
Główny wynik HEX używa popularnego formatu sześciocyfrowego. Użyj pola alfa, aby uzyskać wartości RGBA i HSLA, gdy potrzebna jest przezroczystość.
Dlaczego HSL czasem zaokrągla wartości?
Kanały RGB są liczbami całkowitymi od 0 do 255, a HSL oblicza się z proporcji. Wyświetlane wartości HSL są zaokrąglane, aby skopiowany CSS pozostał czytelny.
Czy ten konwerter jest prywatny?
Tak. Wszystkie obliczenia konwersji odbywają się w Twojej przeglądarce za pomocą JavaScriptu i nie jest potrzebne żadne zapytanie sieciowe.
Advertisement