Przekształć kolor HEX w HSL

Narzędzie HEX na HSL przydaje się projektantom i programistom front-end, gdy chcą dopracować interfejs przed wdrożeniem. Przekształć kolor HEX w HSL.

Przekształć kolor HEX w HSL. Możesz użyć go bezpłatnie w przeglądarce bez konta, a potem sprawdzić wynik przed kolejnym krokiem.

Jak używać

  1. Wprowadź prawidłowy szesnastkowy kod koloru w obszarze wejściowym, używając formatu pokazanego przez interfejs.
  2. Uruchom konwersję, aby uzyskać odpowiednie składowe HSL bez dodatkowej konfiguracji.
  3. Odczytaj wartości odcienia, nasycenia i jasności, a następnie porównaj je z oryginalnym kolorem w projekcie.
  4. Skopiuj wartości HSL do arkusza stylów lub narzędzia projektowego i wyczyść pole, jeśli udostępniasz ekran.

Przykład

W przypadku przykładowego koloru narzędzie powinno zwrócić odcień, nasycenie i jasność zgodne z wprowadzonym kodem szesnastkowym. Zwróć uwagę na odcień i jasność przed dostosowaniem palety lub stanu przycisku.

Dane wejściowe

#16A34A

Wynik

hsl(142 76% 36%)

Ograniczenia i formaty

Gdzie odbywa się przetwarzanie

Konwersja odbywa się lokalnie w przeglądarce. Wprowadzony kod koloru nie jest nigdzie wysyłany i nie opuszcza Twojego urządzenia.

Częste pytania

Do czego służą wartości HSL?

HSL opisuje kolor za pomocą odcienia, nasycenia i jasności. Te składowe są praktyczne przy dostosowywaniu palety, tworzeniu wariantów lub wyjaśnianiu koloru w dokumentacji.

Czy mogę przekonwertować kilka kolorów naraz?

Nie, narzędzie działa na wartości w obszarze wejściowym. Aby porównać kilka kolorów, uruchom konwersję ponownie kolejno dla każdego kodu.

Co zrobić, jeśli wynik wygląda źle?

Najpierw sprawdź, czy kod szesnastkowy jest kompletny i poprawnie zapisany. Nieprawidłowa lub niekompletna wartość nie może zostać przekonwertowana na wiarygodne składowe HSL.

Czy narzędzie ocenia kontrast koloru?

Nie. Narzędzie konwertuje kod szesnastkowy na składowe HSL, ale nie sprawdza kontrastu z tekstem ani nie ocenia dostępności. Nie buduje też palet, nie proponuje wariantów i nie naprawia nieprawidłowego kodu. Otrzymane wartości możesz skopiować do arkusza stylów lub narzędzia projektowego, a ocenę kontrastu wykonaj osobno.

Czy mój kod koloru opuszcza urządzenie?

Nie. Konwersja odbywa się lokalnie w przeglądarce. Wpisany kod koloru nie jest wysyłany na zewnątrz i nie opuszcza Twojego urządzenia. Możesz więc sprawdzić kolor bez zakładania konta. Jeśli udostępniasz ekran, wyczyść pole po skopiowaniu wyniku, aby uniknąć przypadkowego pokazania wartości. Dzięki temu możesz porównać wynik z kolorem w swoim projekcie bez wysyłania kodu do zewnętrznej usługi.

Narzędzia w tej samej kategorii