Ostatnio zajmuję się kolejnym zleceniem na stronę. Tym razem nie zaczynam od nowa, lecz przepisuję istniejącą stronę na WordPress.
Zadanie wydaje się być proste. Mam dostęp do plików starej strony, również do pliku CSS. A właściwie kilku plików CSS. Jaka w tym trudność – znaleźć kolory? Poza tym, niektóre strony udostępniają swoją identyfikację kolorystyczną. Powinno być łatwo, lekko i przyjemnie!
W trakcie analizy strony okazało się jednak, że jedyne, na co mogę liczyć w moich poszukiwaniach, to narzędzia developerskie i plik CSS. Lekko zabałaganiony, wyglądający na przynajmniej częściowo zminifikowany. Przeglądając stronę w Chrome Dev Tools zauważyłam, że strona ma różne odcienie kolorów, których użycie nie jest do końca uzasadnione. To z kolei powodowało błędy związane z niewystarczającym kontrastem elementów w narzędziu PageSpeed Insights. Niedobrze…
Pierwsza myśl, która przebiegła mi przez głowę, miała zdecydowanie rys martyrologiczny – myślałam o samodzielnym przegrzebywaniu się przez kod i szukaniu heksadecymalnych zapisów kolorów. Potem jednak stwierdziłam, że szkoda mi na to życia, przekopałam internet, i…
Znalazłam to narzędzie: Alwane.io. Zasada jest prosta: dodajemy adres URL strony. Narzędzie analizuje nam jej kod i zwraca wykorzystane kolory. Samo narzędzie jego autorzy opisują na stronie Dev.to.
Dużą zaletą tego narzędzia jest to, że możemy z jednej strony zobaczyć sam kolor, a z drugiej w oddzielnej zakładce zobaczyć zapis heksadecymalny. Mi akurat te dwie opcje wystarczyły do szczęścia, acz możliwe jest również „wyciągnięcie” kolorów z kodu CSS oraz z zapisu heksadecymalnego. Dodatkowym atutem jest możliwość sortowania i grupowania kolorów (radzę zostawić te opcje), a także wyświetlenia ich w zapisie CSS oraz SASS.
Na stronie jest również opcja generowania palety na bazie znalezionych kolorów. Może się ona przydać w przypadku, gdy chcemy się zainspirować kolorystyką danej strony, jednak ponieważ sama eksperymentuję z kolorystyką dla klientów nie testowałam akurat tego narzędzia.
Na ten moment Alwane.io testowałam na kilku stronach i widzę, że to narzędzie ma czasem zbyt szeroki zakres działania. WordPress w nowszych wersjach dodaje swoje style do motywu, co sprawia, że strona wypluwa mieszankę kolorów WordPressowych i tych, które są w motywie. Dlatego też w przypadku CMSów dla bezpieczeństwa proponowałabym skorzystanie z opcji dodawania do analizy kodu CSS – chyba że strona, którą analizujecie nie serwuje nadprogramowych styli 😉
Generalnie narzędzie jest całkiem dobrze napisane i myślę, że przyda mi się w niejednym Front Endowym boju.
