Konwerter kodów kolorów
Wprowadź kolor i skopiuj wartości HEX, RGB oraz HSL.
#624DE3CC
O tym narzędziu
Narzędzie Konwerter kodów kolorów pokazuje ten sam kolor jednocześnie w formatach HEX, RGB i HSL oraz przelicza między nimi. Kolor możesz wybrać, wpisując wartość, korzystając z gotowych presetów lub używając kroplomierza, a także dostosować przezroczystość. Idealne, gdy potrzebujesz przeliczyć kolor do formatu wymaganego w projektowaniu stron, pracy z UI, CSS czy edycji obrazów.
Jak używać
Wybierz kolor
Wpisz wartość w pole HEX, RGB lub HSL albo wybierz kolor z presetów. W środowiskach, które to obsługują, możesz też kliknąć przycisk kroplomierza i pobrać kolor bezpośrednio z ekranu.
Dostosuj przezroczystość
Przesuń suwak przezroczystości, aby ustawić krycie koloru. Ustawienie jest odzwierciedlane w podglądzie u góry oraz w kodach koloru.
Sprawdź i skopiuj wynik
Sprawdź kolor w podglądzie, a następnie naciśnij przycisk kopiowania przy polu HEX, RGB lub HSL, aby skopiować potrzebną wartość do schowka.
Funkcje
HEX, RGB i HSL w jednym miejscu
Wpisz kolor w jednym formacie, a jego wartości HEX, RGB i HSL zobaczysz od razu.
Podgląd na żywo i przezroczystość
Podgląd aktualizuje się natychmiast po zmianie wartości koloru lub przezroczystości, a suwak pozwala tworzyć kolory półprzezroczyste.
Kroplomierz i gotowe kolory
W obsługiwanych przeglądarkach pobieraj kolory z ekranu kroplomierzem albo kliknij popularny kolor presetowy, aby zastosować go od razu.
Kopiuj każdy format osobno
Skopiuj wartość HEX, RGB lub HSL oddzielnie, aby użyć jej bezpośrednio w CSS, narzędziach projektowych i dokumentach.
Wprowadzaj wartości ręcznie
Jeśli znasz już kod koloru, wpisz go w odpowiednie pole, aby zobaczyć wynik konwersji.
Przetwarzanie w przeglądarce
Twoje wartości kolorów i wyniki konwersji pozostają w przeglądarce — nic nie jest wysyłane na serwer.
Przypadki użycia
Konwersja kolorów CSS
Przelicz kolor HEX z makiety projektu na RGB lub HSL, aby użyć go w stylach CSS.
Przenoszenie kolorów między narzędziami projektowymi
Gdy programy wymagają różnych formatów, przelicz ten sam kolor na format, jakiego potrzebuje każde z nich.
Tworzenie półprzezroczystych tła
Dostosuj przezroczystość, aby uzyskać półprzezroczyste kolory do nakładek, tła, przycisków i obramowań.
Pobieranie kolorów z ekranu
Użyj kroplomierza, aby wybrać kolor widoczny na stronie, obrazie lub w aplikacji i podejrzeć go jako kod.
Zarządzanie kolorami marki
Trzymaj wartości HEX, RGB i HSL kolorów marki w jednym miejscu, aby spójnie używać ich w sieci, druku i dokumentach projektowych.
Często zadawane pytania
Czym różnią się formaty HEX, RGB i HSL?
HEX przedstawia kolor w systemie szesnastkowym, np. #8AD0FF. RGB wyraża natężenie czerwieni, zieleni i błękitu jako liczby, a HSL opisuje kolor za pomocą barwy, nasycenia i jasności.
Jakiego formatu użyć?
HEX jest prosty i powszechnie stosowany w sieci oraz dokumentach projektowych. RGB wygodnie sprawdzi się przy bezpośredniej regulacji kanałów koloru, a HSL ułatwia intuicyjną zmianę barwy lub jasności.
Jak przezroczystość jest uwzględniana w kodzie koloru?
Wartość HEX z przezroczystością to 8-cyfrowy kod, w którym po zwykłych 6 cyfrach dodawana jest wartość alfa. Na przykład w #8AD0FFCC dwie ostatnie cyfry oznaczają przezroczystość.
Czym różni się 6-cyfrowy HEX od 8-cyfrowego?
6-cyfrowy HEX zawiera tylko wartości czerwieni, zieleni i błękitu. 8-cyfrowy HEX dodaje na końcu wartość alfa, która określa przezroczystość.
Co oznacza przezroczystość 100% i 0%?
100% oznacza pełne krycie, a 0% całkowitą przezroczystość. Wartości pośrednie dają kolory półprzezroczyste, przez które widoczne jest tło.
Jaki jest zakres wartości RGB?
Wartości RGB mieszczą się w zakresie od 0 do 255 dla każdego składnika: czerwieni, zieleni i błękitu. Wyższa wartość wzmacnia dany składnik koloru.
Co oznaczają wartości HSL?
H to barwa, zwykle wartość od 0 do 359 stopni. S to nasycenie, a L to jasność; obie wyrażane są w procentach.
Czy kroplomierz działa w każdej przeglądarce?
Obsługa zależy od przeglądarki i środowiska. W środowiskach bez wsparcia skorzystaj z pól koloru lub gotowych presetów.
Czy mogę edytować kolor po wybraniu presetu?
Tak. Po wybraniu presetu dostosuj wartości HEX, RGB lub HSL albo przezroczystość, aby dopracować kolor.
Co kopiuje przycisk kopiowania?
Każdy przycisk kopiowania kopiuje aktualną wartość koloru w danym formacie. Możesz skopiować tylko tę wartość HEX, RGB lub HSL, której potrzebujesz.
Czy wprowadzony kolor jest wysyłany na serwer?
Nie. Cała konwersja odbywa się lokalnie w przeglądarce. Wprowadzone kolory i wyniki nigdy nie są przesyłane na serwer.
Powiązane narzędzia
