Alat

Palet warna dari situs web mana pun

Masukkan alamat situs web dan dapatkan paletnya: setiap warna beserta perannya, sebagai kode hex, variabel CSS, tema Tailwind, atau JSON.

Cobastripe.com linear.app airbnb.com

airbnb.com

Diukur 4 hari yang lalu.

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

Buka halaman jawaban lengkap Buka paket desain

Cara kerjanya

Stylepack membuka situs di browser sungguhan, mengukur apa yang tampil (bukan apa yang tertulis di stylesheet) pada empat lebar layar dan di kedua tema, lalu menyimpan hasilnya sebagai paket desain. Situs yang sudah diukur langsung terjawab; situs baru butuh kurang dari semenit. Setiap nilai di halaman ini berasal dari paket itu.

Pertanyaan

Bagaimana paletnya diukur?

Situs dirender di browser sungguhan, lalu warna latar, teks, tombol, tautan, dan border dibaca dari halaman, dikelompokkan, dan dinamai menurut perannya (background, foreground, primary, border, dan seterusnya). Aksen adalah warna tombol utama dan tautannya.

Apakah warna mode gelap ikut disertakan?

Bila situs punya tema gelap, tema itu ikut diukur dan CSS-nya memuat blok gelap dengan nilai yang sesuai.

Bisakah saya mendapatkan paletnya untuk Tailwind atau Figma?

Hasilnya tersedia sebagai kode hex, variabel CSS, tema Tailwind v4, dan JSON. Paket desainnya menambahkan tokens.json dalam format design token W3C, yang bisa dibaca Style Dictionary dan plugin Figma.