Jak to działa
Zaciśnij każdy kanał na 0-255, zaokrąglij go, a następnie wpisz dwie cyfry szesnastkowe na kanał za #. HSL wyprowadza się ze współczynników RGB: odcień z kanału dominującego, nasycenie z odległości między maks. i min., jasność z ich średniej.
- HEX akceptuje 3 lub 6 cyfr; wartości są ograniczone do 0–255.
Dlaczego to ma znaczenie
Narzędzia projektowe eksportują różne formaty, a CSS oczekuje konkretnych. Ręczna konwersja sprzyja błędom w zaokrąglaniu, a ten sam kolor zapisany na trzy sposoby jest łatwy do sprawdzenia, gdy zobaczysz wszystkie reprezentacje obok siebie.
Sprawdzony przykład
rgb(99, 91, 255) to #635BFF i hsl(244, 100%, 68%). Autorzy CSS najczęściej wklejają formę HEX; HSL łatwiej jest przyciemnić lub zmniejszyć nasycenie bez zgadywania nowych kanałów.
Typowe błędy
- Zakładając, że ten sam HEX wygląda wszędzie identycznie bez zarządzania kolorami.
- Zapominając, że trzycyfrowy HEX rozszerza każde półbajt dwukrotnie.
- Edycja kanałów RGB, gdy chcesz dostosować jasność.
Praktyczne wskazówki
Projektuj w HSL, gdy potrzebujesz systematycznych odcieni i odcieni: zachowaj barwę i nasycenie, stopniowo zmieniaj jasność. Zapisz kod HEX do wydruku, ale zachowaj notatki HSL w pliku projektu do przyszłych poprawek.
Jak z niego korzystać
- Otwórz narzędzie. Wszystko działa w zakładce przeglądarki.
- Wklej lub wpisz wprowadzone dane, a następnie wybierz żądaną czynność.
- Sprawdź wynik i skopiuj go jednym kliknięciem.
Często zadawane pytania
Dlaczego moja wartość HEX jest inna w innym narzędziu?
Wartości są zawężane do 0-255 i zaokrąglane, a następnie zapisywane jako wielkie litery HEX. Niektóre narzędzia przechowują małe lub nieprawidłowe dane wejściowe.
Co to jest HSL?
Alternatywne przedstawienie: odcień w stopniach, nasycenie i jasność w procentach. Jest to przydatne przy dostosowywaniu kolorów.
Czy sprawdza kontrast?
Nie. Konwertuje formaty kolorów; sprawdzanie kontrastu to inne narzędzie.
Czy to narzędzie jest naprawdę darmowe?
Tak. Nie ma konta, nie ma paywalla i nie ma limitu użytkowania. Aplikacja Tools została ufundowana przez stojące za nią studio aumenso.
Czy wszystko, co wprowadzę, zostanie przesłane?
Nie. Narzędzie działa w zakładce przeglądarki; to, co wpiszesz, nigdy nie jest do nas wysyłane ani przechowywane.