Validator DESIGN.md
Tempel DESIGN.md untuk mengecek struktur dan token-nya serta melihat pratinjaunya, langsung di browser.
Buka Validator DESIGN.mdAlat gratis, tanpa daftar
Ambil palet warna dari website apa pun
Tempel URL untuk mendapatkan warna brand, teks, latar, dan aksen sebuah situs dengan kode hex, diurutkan berdasarkan pemakaian. Gratis, tanpa daftar. Lihat contoh lengkap untuk DESIGN.md Stripe dan DESIGN.md Linear, atau pelajari apa yang ditambahkan oleh DESIGN.md.
Coba
Pakai palet ini di kode Anda
Ekstraktor mengelompokkan warna berdasarkan peran (background, surface, teks, brand, aksen, dan border) dan mengurutkannya berdasarkan seberapa luas area halaman yang ditutupi masing-masing. Untuk memakainya lagi, beri nama setiap peran alih-alih menempelkan kode hex di seluruh style Anda, sehingga satu perubahan memperbarui semua tempat warna itu muncul.
1. Beri nama warna berdasarkan peran, bukan rona. --color-text-muted tetap masuk akal setelah redesain; --gray-600 tidak memberi tahu di mana warna itu dipakai. Ganti dengan kode hex yang Anda salin.
:root {
--color-brand: #635bff;
--color-text: #0a2540;
--color-text-muted: #425466;
--color-surface: #ffffff;
--color-surface-muted: #f6f9fc;
--color-border: #e3e8ee;
}
body { background: var(--color-surface); color: var(--color-text); }
a, .button-primary { color: var(--color-brand); }2. Pakai di Tailwind. Setiap variabel menjadi sekumpulan utility seperti bg-surface, text-ink-muted, dan border-line.
/* app.css, Tailwind CSS v4 */
@theme {
--color-brand: #635bff;
--color-ink: #0a2540;
--color-ink-muted: #425466;
--color-surface: #ffffff;
--color-surface-muted: #f6f9fc;
--color-line: #e3e8ee;
}3. Cek pasangan warna yang Anda pakai. Teks isi butuh rasio kontras minimal 4.5:1 terhadap latarnya, dan teks besar 3:1. Ekstraktor menampilkan rasio warna teks utama terhadap latar halaman; cek pasangan lain yang ingin Anda pakai sebelum merilisnya.
Warna hanyalah satu lapisan dari sistem desain. DESIGN.md menyimpannya bersama skala tipografi, spacing, dan aturan komponen, sehingga agen coding Anda memakai warna yang tepat di tempat yang tepat.
FAQ
Pertanyaan tentang palet warna
Jawaban singkat tentang Ekstraktor Palet Warna Website gratis.
Halaman dimuat di browser sungguhan, lalu warna yang digambarnya diukur berdasarkan seberapa luas area halaman yang ditutupi. Setiap warna mendapat perkiraan peran terbaik: background, panel, teks, brand, aksen, atau border.
Palet menampilkan warna yang benar-benar dipakai halaman, diurutkan berdasarkan cakupan dan dibatasi dua belas warna. Warna di dalam gambar atau video, warna yang hanya muncul saat hover, dan warna yang dipakai di halaman lain dari situs itu tidak dihitung.
Tidak. Alat ini membaca halaman dalam tema default yang dilihat pengunjung baru, biasanya terang. Situs yang default-nya gelap akan terbaca gelap. DESIGN.md lengkap mencakup mode gelap jika situs memilikinya.
Tidak sebagai file. Anda bisa menyalin kode hex-nya: pilih satu swatch untuk satu warna, atau salin semuanya sekaligus, satu per baris.
Bisa, satu piksel setiap kali. Di Chrome atau Edge, klik kanan sebuah elemen, pilih Inspect, lalu klik kotak warna di samping warna mana pun di panel Styles; color picker-nya punya eyedropper yang bisa membaca titik mana pun di halaman. Firefox punya eyedropper yang sama di toolbar Inspector.
Alat ini hanya menampilkan warna. DESIGN.md mencakup warna beserta perannya, skala tipografi, spacing, dan aturan komponen sebuah situs, dalam satu file yang bisa diikuti agen coding Anda.
Alat gratis lainnya
Lihat semua alat gratisPencari Font Website
Masukkan URL untuk melihat font apa saja yang dipakai sebuah website, gratis dan tanpa daftar.
Buka Pencari Font Website
Butuh sistem desain lengkapnya?
Dapatkan DESIGN.md berisi warna, skala tipografi, spacing, dan komponen situs apa pun, siap untuk agen coding Anda.