Narzędzia
Paleta kolorów z dowolnej strony
Wpisz adres strony i pobierz jej paletę: każdy kolor z jego rolą, jako kody hex, zmienne CSS, motyw Tailwind lub JSON.
Wypróbujstripe.comlinear.appairbnb.com
Jak to działa
Stylepack otwiera stronę w prawdziwej przeglądarce, mierzy to, co się renderuje (a nie to, co mówi arkusz stylów) w czterech szerokościach i w obu motywach, a wynik zapisuje jako pakiet designu. Strona już zmierzona odpowiada od razu; nowa zajmuje mniej niż minutę. Każda wartość na tej stronie pochodzi z tego pakietu.
Pytania
Jak mierzona jest paleta?
Strona jest renderowana w prawdziwej przeglądarce, a kolory teł, tekstu, przycisków, linków i obramowań są odczytywane ze strony, grupowane i nazywane według roli (background, foreground, primary, border i tak dalej). Akcent to kolor głównych przycisków i linków.
Czy zawiera kolory trybu ciemnego?
Gdy strona ma ciemny motyw, on też jest mierzony, a CSS zawiera blok ciemny z odpowiadającymi wartościami.
Czy mogę dostać paletę w Tailwind lub Figma?
Wynik oferuje kody hex, zmienne CSS, motyw Tailwind v4 i JSON. Pakiet designu dodaje tokens.json w formacie tokenów designu W3C, który czytają Style Dictionary i wtyczki do Figma.