Penjana Warna Tona
Cipta palet warna lengkap dengan tona, bayangan dan skor kontras WCAG
Penjana Warna Tona
Contoh Penggunaan
Tona lebih cerah (50-200) paling sesuai untuk latar belakang dan serlahan halus.
Tona pertengahan (400-600) sesuai untuk butang, pautan dan elemen utama.
Tona lebih gelap (700-900) sesuai untuk tajuk dan teks kontras tinggi.
Sentiasa semak kontras WCAG — AA memerlukan 4.5:1 untuk teks normal.
Kontras
WCAG contrast requirements
- AA: 4.5:1 (Normal text)
- AA Besar: 3:1 (Large text)
- AAA: 7:1 (Normal text)
Ciri-ciri
Palet 50-900 Lengkap
Jana palet gaya Tailwind lengkap daripada mana-mana warna asas
Kontras WCAG
Setiap tona menunjukkan skor kontras terhadap latar putih dan hitam
Pelbagai Format Eksport
Salin sebagai pembolehubah CSS, SCSS, konfigurasi Tailwind atau JSON
Peribadi & Luar Talian
Berjalan sepenuhnya dalam pelayar anda, tiada data dihantar ke pelayan
Cara Menggunakan
Pilih Warna Asas
Pilih warna menggunakan pemilih atau masukkan nilai HEX, RGB atau HSL.
Semak Palet
Lihat tona yang dijana dengan penunjuk kontras WCAG untuk kebolehcapaian.
Eksport atau Salin
Salin warna individu atau eksport seluruh palet sebagai CSS, SCSS, Tailwind atau JSON.
Soalan Lazim
Apakah Penjana Warna Tona?
Penjana Warna Tona mencipta julat penuh tona dan bayangan daripada satu warna asas. Daripada meneka variasi yang lebih cerah atau gelap untuk digunakan, anda mendapat palet konsisten yang berfungsi merentas butang, latar, sempadan dan teks. Alat ini menghasilkan skala 10 langkah dari 50 (paling cerah) hingga 900 (paling gelap), sepadan dengan sistem warna Tailwind CSS yang popular.
Cara Ia Berfungsi
Penjana menukar warna asas anda kepada HSL dan melaraskan nilai kecerahan untuk mencipta 10 langkah yang diagihkan sama rata. Setiap tona kemudian dinilai terhadap latar putih dan hitam menggunakan formula kontras WCAG 2.1, jadi anda segera tahu warna mana yang mudah diakses untuk teks. Semuanya berjalan dalam pelayar anda tanpa perjalanan pergi balik pelayan.
Kes Penggunaan Biasa
Pereka menggunakan penjana tona untuk membina palet jenama, mencipta token reka bentuk dan mengekalkan konsistensi visual merentas produk. Pembangun menyukainya untuk menjana entri konfigurasi Tailwind atau sifat tersuai CSS. Ia juga penting untuk audit kebolehcapaian, membantu anda memilih pasangan teks dan latar yang memenuhi keperluan WCAG AA atau AAA.
Privasi dan Keselamatan
Penjana Warna Tona ini adalah 100% di sebelah klien. Semua pengiraan warna berlaku dalam pelayar anda menggunakan JavaScript. Tiada warna, palet atau eksport dihantar ke mana-mana pelayan. Tiada kuki menjejaki pilihan anda, dan tiada apa-apa disimpan melebihi sesi semasa anda. Selamat untuk kerja jenama sulit dan sistem reka bentuk dalaman.
Teori Warna untuk Reka Bentuk Web - Tona dan Kontras WCAG
Kuasai teori warna, tona, piawaian WCAG dan cara membina palet sistem reka bentuk.