Kolorowy wybieracz Morph pozwala wybrać dowolny kolor wizualnie i natychmiast odczytać jego kod w formatach, które rzeczywiście używasz: HEX (`#3A7BD5`), RGB (`rgb(58, 123, 213)`) i HSL (`hsl(214, 64%, 53%)`). Przesuń się po polu koloru, dopasuj za pomocą suwaka odcienia, a następnie skopiuj wartość bezpośrednio do CSS, pliku projektowego lub gdziekolwiek potrzebujesz.
Wszystkie trzy kody opisują ten sam kolor — są to po prostu różne sposoby zapisu, a każdy ma swoje zastosowanie:
Zmieniaj kolor jak chcesz, a wszystkie trzy kody pozostają zsynchronizowane, więc możesz wybrać ten, który potrzebujesz dla projektu.
Projektanci używają go do precyzyjnego wyboru palety i kopiowania dokładnych wartości do pliku projektu lub przewodnika stylów. Programiści front-endowi używają go do pobierania HEX dla przycisku lub konwertowania RGB projektanta na HSL, aby stworzyć stan hover. Każdy, kto dostosowuje motyw, kolor wykresu lub szablon e-mailowy, może natychmiast uzyskać dokładny odcień i skopiować go w jednym kliknięciu. Dzięki temu, że HSL znajduje się obok HEX, tworzenie jaśniejszych i ciemniejszych wariantów podstawowego koloru jest znacznie łatwiejsze niż ocenianie cyfr hex.
Wybieracz kolorów to czysty kod przeglądarkowy — obliczenia kolorów i interfejs działają na Twoim urządzeniu. Nie ma wysyłania, nie ma konta i nic nie jest wysyłane na serwer. Ładuje się szybko i działa offline po otwarciu strony, ponieważ wybór koloru i obliczanie jego kodów nigdy nie wymagają połączenia internetowego.
Gdy skopiujesz wartość HEX, jest gotowa do wklejenia do CSS bez zmian. Jeśli potrzebujesz koloru z przezroczystością, przekonwertuj na RGB i dodaj kanał alfa (`rgba(...)`) w kodzie. Aby stworzyć spójną paletę, wybierz jeden kolor podstawowy i użyj wartości HSL jasności, aby wygenerować odcienie i cienie, przesuwając jasność w górę lub w dół, zachowując odcień i nasycenie stałe — to utrzymuje zbiór kolorów wrażenie rodziny, a nie przypadkowej zbiorowości.
Pokazuje HEX, RGB i HSL dla każdego wybranego koloru, wszystkie zsynchronizowane, więc możesz skopiować ten format, który potrzebujesz dla projektu.
HSL ułatwia dostosowanie koloru intuicyjnie — podnieś jasność dla odcienia, obniż ją dla cienia lub zmień odcień — bez zgadywania cyfr hex.
Wybierz kolor, skopiuj wartości RGB i dodaj kanał alfa w kodzie jako rgba(...) aby ustawić poziom przezroczystości.
Nie. Wybieracz działa całkowicie w przeglądarce. Nie ma wysyłania i nic nie jest wysyłane na serwer — działa nawet offline po załadowaniu.
Wybierz kolor podstawowy i użyj jego wartości HSL, a następnie przesuń jasność w górę lub w dół, zachowując odcień i nasycenie stałe, aby stworzyć odcienie i cienie, które wydają się być częścią tej samej rodziny.