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

linear.app

Diukur 4 hari yang lalu.

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

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.