Langkau ke kandungan
Color Palette Extractor

Warna daripada URL

Pengekstrak Warna Laman Web

Pengekstrak Warna Laman Web membaca HTML dan CSS sesebuah laman web daripada URL-nya dan memaparkan palet warna laman tersebut: warna jenama, aksen, latar belakang, teks dan sempadan, dengan pemboleh ubah CSS dan bahagian penggunaan bagi setiap warna.

  • Percuma, tanpa pendaftaran
  • Membaca CSS sebenar dan pembolehubahnya
  • Tiada apa-apa yang disimpan
Ekstrak daripada

Laman disekat? Tampal HTML atau CSS-nya

Bagaimanakah pengekstrak warna laman web berfungsi?

Pengekstrak warna laman web memuat turun sesebuah halaman beserta helaian gayanya, membaca setiap nilai warna dalam kod, dan menyusun warna mengikut lokasi dan kekerapan halaman menggunakannya.

  1. Masukkan alamat

    Taip domain seperti example.com atau tampal URL penuh mana-mana halaman awam. Pengekstrak mengambil halaman tersebut dan sehingga 25 helaian gayanya.

  2. Helaian gaya dihuraikan

    Setiap sintaks warna dibaca: hex, rgb, hsl, hwb, lab, lch, oklab, oklch, color() dan 148 warna bernama. Pemboleh ubah CSS dileraikan kepada nilainya.

  3. Warna diberi peranan

    Sifat CSS menentukan peranan setiap warna: latar belakang, teks, sempadan, isian atau bayang. Peraturan yang sepadan dengan elemen pada halaman dikira tiga kali.

  4. Salin palet

    Warna jenama berada di hadapan, diikuti oleh aksen, latar belakang dan warna teks. Eksport palet sebagai CSS, Tailwind atau token reka bentuk.

Bagaimanakah pengekstrak mencari warna jenama sesebuah laman?

Warna jenama ialah warna tepu yang paling banyak digunakan dan muncul pada butang, pautan atau pemboleh ubah CSS yang dinamakan sempena jenama.

  • Ketepuan. Hanya warna dengan kroma OKLCH 0.05 atau lebih layak sebagai warna jenama atau aksen. Warna kelabu dan hampir kelabu dikira sebagai neutral.
  • Kedudukan. Warna dalam pemilih seperti .btn, button, a dan .cta mendapat pemberat tambahan.
  • Penamaan. Pemboleh ubah seperti --primary, --brand dan --accent mendapat pemberat tambahan.
  • theme-color. Nilai <meta name="theme-color"> yang sepadan dengan warna CSS menambah isyarat jenama yang kuat.
Cara sifat CSS dipetakan kepada peranan warna
PerananSifat CSS
Latar belakangbackground, background-color, gradien
Tekscolor, text-decoration-color, caret-color
Sempadanborder, outline, column-rule
Isianfill, stroke, stop-color, accent-color
Bayangbox-shadow, text-shadow (disenaraikan, tidak dimasukkan dalam palet utama)

Bagaimanakah ia memisahkan warna yang digunakan daripada CSS yang tidak digunakan?

Pengekstrak memberikan pemberat tiga kali ganda kepada peraturan CSS yang pemilihnya sepadan dengan elemen dalam HTML halaman. Rangka kerja CSS membawa banyak warna yang tidak pernah digunakan oleh halaman, dan pemadanan pemilih menghalang warna tersebut daripada mengatasi reka bentuk sebenar.

  • Warna :hover dan :focus dikira pada separuh pemberat, kerana warna ini hanya muncul semasa interaksi.
  • Peraturan @media print diabaikan.
  • Warna dengan kelegapan di bawah 35% dilangkau kerana dianggap lapisan tindihan dan ton cerah.
  • Warna yang lebih hampir daripada ΔE_OK 0.02 digabungkan menjadi satu sampel warna yang menyenaraikan variannya.

Adakah pengekstrak mencari warna mod gelap?

Ya. Peraturan di dalam @media (prefers-color-scheme: dark) dan peraturan di bawah pemilih seperti .dark atau [data-theme="dark"] membentuk palet mod gelap yang berasingan.

Nilai gelap pemboleh ubah CSS menggantikan nilai cerah apabila pengekstrak meleraikan peraturan gelap, jadi palet gelap menunjukkan warna yang dilihat oleh pengunjung dalam mod gelap.

Warna manakah yang tidak dapat dibaca oleh pengekstrak laman web?

Pengekstrak laman web membaca kod yang dihantar oleh pelayan, jadi tiga jenis warna berada di luar jangkauannya.

  • Gaya masa jalan. Pustaka CSS-in-JS menyuntik gaya selepas halaman dimuatkan dalam pelayar.
  • Warna imej. Warna di dalam foto, logo raster dan video ialah piksel, bukan CSS. Pengekstrak membaca warna logo dan ikon laman secara berasingan.
  • Laman yang dilindungi. Laman di sebalik perlindungan bot menolak permintaan automatik.

Untuk kes ini, tampal HTML atau CSS halaman ke dalam kotak kod, atau ambil tangkapan skrin dan lepaskannya ke dalam Pengekstrak Palet Warna. Panduan Cara mencari warna yang digunakan laman web turut merangkumi kaedah DevTools pelayar.

Siapakah yang menggunakan pengekstrak warna laman web?

  • Pereka

    Audit warna jenama semasa pelanggan sebelum reka bentuk semula, atau kaji palet laman rujukan.

  • Pembangun

    Dapatkan semula token warna dan nama pemboleh ubah sesebuah laman untuk membina semula tema.

  • Pemasar

    Padankan halaman pendaratan, iklan dan e-mel dengan warna laman web utama.

  • Penyemak kebolehcapaian

    Uji pasangan teks dan latar belakang laman berdasarkan ambang kontras WCAG dalam tab Kontras.

Soalan lazim pengekstrak warna laman web

Mengapakah sesetengah warna laman tidak ditemui?

Warna yang digunakan oleh JavaScript semasa masa jalan, warna di dalam imej dan warna pada halaman yang memerlukan log masuk tidak terdapat dalam HTML dan CSS yang dihantar oleh pelayan.

Bolehkah saya mengekstrak warna daripada laman yang menyekat bot?

Ya, dengan kaedah alternatif. Buka laman dalam pelayar anda dan tampal HTML atau helaian gayanya ke dalam kotak kod, atau muat naik tangkapan skrin ke pengekstrak imej.

Adakah pengekstrak menyimpan laman web yang saya semak?

Tidak. Pelayan mengambil halaman dan helaian gayanya untuk permintaan anda dan tidak menyimpan salinan. Analisis warna berjalan dalam pelayar anda.

Apakah maksud peratusan di sebelah warna?

Peratusan ialah bahagian warna tersebut daripada penggunaan CSS berpemberat pada halaman. Peratusan ini mengukur kekerapan kod menggunakan warna itu, bukan keluasan skrin yang diliputi oleh warna tersebut.

Bolehkah saya menyemak halaman selain laman utama?

Ya. Masukkan URL penuh mana-mana halaman awam, contohnya example.com/pricing.