Langsung ke konten
Color Palette Extractor

Warna dari URL

Ekstraktor Warna Situs Web

Ekstraktor Warna Situs Web membaca HTML dan CSS sebuah situs web dari URL-nya dan menampilkan palet warna situs tersebut: warna merek, aksen, latar belakang, teks, dan garis tepi, lengkap dengan variabel CSS dan porsi penggunaan setiap warna.

  • Gratis, tanpa daftar
  • Membaca CSS asli dan variabelnya
  • Tidak ada yang disimpan
Ekstrak dari

Situs diblokir? Tempel HTML atau CSS-nya

Bagaimana cara kerja ekstraktor warna situs web?

Ekstraktor warna situs web mengunduh sebuah halaman beserta stylesheet-nya, membaca setiap nilai warna dalam kode, lalu mengurutkan warna berdasarkan tempat dan frekuensi pemakaiannya di halaman.

  1. Masukkan alamat

    Ketik domain seperti example.com atau tempel URL lengkap halaman publik mana pun. Ekstraktor mengambil halaman tersebut dan hingga 25 stylesheet-nya.

  2. Stylesheet diurai

    Setiap sintaks warna dibaca: hex, rgb, hsl, hwb, lab, lch, oklab, oklch, color(), dan 148 warna bernama. Variabel CSS diubah menjadi nilainya.

  3. Warna mendapat peran

    Properti CSS menentukan peran setiap warna: latar belakang, teks, garis tepi, isian, atau bayangan. Aturan yang cocok dengan elemen di halaman dihitung tiga kali.

  4. Salin palet

    Warna merek berada di urutan pertama, diikuti aksen, latar belakang, dan warna teks. Ekspor palet sebagai CSS, Tailwind, atau design token.

Bagaimana ekstraktor menemukan warna merek sebuah situs?

Warna merek adalah warna jenuh yang paling sering dipakai dan muncul pada tombol, tautan, atau variabel CSS yang dinamai sesuai merek.

  • Saturasi. Hanya warna dengan kroma OKLCH 0.05 atau lebih yang memenuhi syarat sebagai warna merek atau aksen. Abu-abu dan warna yang mendekati abu-abu dihitung sebagai netral.
  • Penempatan. Warna pada selector seperti .btn, button, a, dan .cta mendapat bobot tambahan.
  • Penamaan. Variabel seperti --primary, --brand, dan --accent mendapat bobot tambahan.
  • theme-color. Nilai <meta name="theme-color"> yang cocok dengan sebuah warna CSS menambah sinyal merek yang kuat.
Pemetaan properti CSS ke peran warna
PeranProperti CSS
Latar belakangbackground, background-color, gradien
Tekscolor, text-decoration-color, caret-color
Garis tepiborder, outline, column-rule
Isianfill, stroke, stop-color, accent-color
Bayanganbox-shadow, text-shadow (dicantumkan, tetapi tidak masuk palet utama)

Bagaimana ekstraktor memisahkan warna yang dipakai dari CSS yang tidak dipakai?

Ekstraktor memberi bobot tiga kali lipat pada aturan CSS yang selector-nya cocok dengan elemen di HTML halaman. Framework CSS membawa banyak warna yang tidak pernah dipakai halaman, dan pencocokan selector mencegah warna tersebut mengungguli desain yang sebenarnya.

  • Warna :hover dan :focus dihitung dengan setengah bobot, karena hanya muncul saat interaksi.
  • Aturan @media print diabaikan.
  • Warna dengan opasitas di bawah 35% dilewati karena dianggap overlay dan tint.
  • Warna yang berjarak kurang dari ΔE_OK 0.02 digabung menjadi satu swatch yang mencantumkan variannya.

Apakah ekstraktor menemukan warna mode gelap?

Ya. Aturan di dalam @media (prefers-color-scheme: dark) dan aturan di bawah selector seperti .dark atau [data-theme="dark"] membentuk palet mode gelap tersendiri.

Nilai gelap variabel CSS menggantikan nilai terangnya saat ekstraktor menguraikan aturan gelap, sehingga palet gelap menampilkan warna yang dilihat pengunjung dalam mode gelap.

Warna apa saja yang tidak bisa dibaca ekstraktor situs web?

Ekstraktor situs web membaca kode yang dikirim server, sehingga tiga jenis warna berada di luar jangkauannya.

  • Gaya runtime. Library CSS-in-JS menyisipkan gaya setelah halaman dimuat di browser.
  • Warna gambar. Warna di dalam foto, logo raster, dan video adalah piksel, bukan CSS. Ekstraktor membaca warna logo dan ikon situs secara terpisah.
  • Situs terlindungi. Situs dengan proteksi bot menolak permintaan otomatis.

Untuk kasus tersebut, tempel HTML atau CSS halaman ke kotak kode, atau ambil tangkapan layar dan letakkan di Ekstraktor Palet Warna. Panduan Cara menemukan warna yang dipakai situs web juga membahas metode DevTools browser.

Siapa yang memakai ekstraktor warna situs web?

  • Desainer

    Audit warna merek klien saat ini sebelum desain ulang, atau pelajari palet situs referensi.

  • Developer

    Pulihkan token warna dan nama variabel sebuah situs untuk membangun ulang tema.

  • Pemasar

    Samakan landing page, iklan, dan email dengan warna situs web utama.

  • Peninjau aksesibilitas

    Uji pasangan warna teks dan latar belakang situs terhadap ambang batas kontras WCAG di tab Kontras.

FAQ ekstraktor warna situs web

Mengapa beberapa warna situs tidak muncul?

Warna yang diterapkan JavaScript saat runtime, warna di dalam gambar, dan warna di halaman yang memerlukan login tidak muncul dalam HTML dan CSS yang dikirim server.

Bisakah saya mengekstrak warna dari situs yang memblokir bot?

Ya, dengan cara alternatif. Buka situs di browser Anda dan tempel HTML atau stylesheet-nya ke kotak kode, atau unggah tangkapan layar ke ekstraktor gambar.

Apakah ekstraktor menyimpan situs web yang saya periksa?

Tidak. Server mengambil halaman dan stylesheet-nya untuk permintaan Anda dan tidak menyimpan salinannya. Analisis warna berjalan di browser Anda.

Apa arti persentase di samping sebuah warna?

Persentase adalah porsi warna dalam penggunaan CSS berbobot di halaman. Angka ini mengukur seberapa sering kode memakai warna tersebut, bukan seberapa luas area layar yang ditutupi warna itu.

Bisakah saya memeriksa halaman selain beranda?

Ya. Masukkan URL lengkap halaman publik mana pun, misalnya example.com/pricing.