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

linear.app

Zmierzono 4 dni temu.

background#08090asurface#101112surface-2#1c1d1esurface-3#07220aforeground#f7f8f8muted-foreground#8a8f98primary#e5e5e6on-primary#111111

1#08090a  background
2#101112  surface
3#1c1d1e  surface-2
4#07220a  surface-3
5#f7f8f8  foreground
6#8a8f98  muted-foreground
7#e5e5e6  primary
8#111111  on-primary
9#5e6ad2  secondary
10#1c1d1e  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.