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

stripe.com

Zmierzono 4 dni temu.

background#ffffffsurface#e5edf5surface-2#ffe0efsurface-3#ffe0d1foreground#061b31muted-foreground#64748dprimary#533afdon-primary#ffffff

1#ffffff  background
2#e5edf5  surface
3#ffe0ef  surface-2
4#ffe0d1  surface-3
5#061b31  foreground
6#64748d  muted-foreground
7#533afd  primary
8#ffffff  on-primary
9#0f4d29  secondary
10#e5edf5  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.