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

stripe.com

Diukur 4 hari yang lalu.

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

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.