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.com linear.app airbnb.com

airbnb.com

Zmierzono 4 dni temu.

background#ffffffsurface#ddddddsurface-2#f2f2f2foreground#222222muted-foreground#6c6c6cprimary#da1249on-primary#ffffffborder#ffffff

1#ffffff  background
2#dddddd  surface
3#f2f2f2  surface-2
4#222222  foreground
5#6c6c6c  muted-foreground
6#da1249  primary
7#ffffff  on-primary
8#ffffff  border

Otwórz pełną stronę z odpowiedzią Otwórz pakiet designu

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.