Penjana Warna Tona

Cipta palet warna lengkap dengan tona, bayangan dan skor kontras WCAG

Penjana Warna Tona

Warna Asas

HEX

RGB

HSL

Palet Dijana Klik untuk salin

Pratonton

Eksport

100% di sebelah klien. Warna anda tidak pernah meninggalkan pelayar anda.

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

Alat ini menukar warna asas anda kepada HSL dan melaraskan nilai Kecerahan untuk mencipta 10 langkah yang diagihkan sama rata. Langkah 50 adalah yang paling cerah (hampir putih), langkah 900 adalah yang paling gelap (hampir hitam). Skala ini menepati pendekatan palet warna Tailwind CSS, di mana langkah 500 menghampiri warna asas asal anda.

Setiap tona menunjukkan nisbah kontrasnya berbanding putih dan berbanding hitam. Untuk pematuhan WCAG AA, teks biasa memerlukan 4.5:1, teks besar memerlukan 3:1. Untuk AAA: 7:1 teks biasa, 4.5:1 teks besar. Tona cerah (50-300) biasanya lulus AA berbanding teks hitam; tona gelap (700-900) biasanya lulus AA berbanding teks putih.

Klik Eksport Konfigurasi Tailwind dan salin objek JavaScript. Tampalkan ke bahagian "colors" dalam tailwind.config.js anda. Tailwind akan menjana kelas utiliti seperti bg-brand-500, text-brand-700, border-brand-200 secara automatik.

Klik Eksport Pembolehubah CSS untuk pengisytiharan sifat tersuai CSS (cth. --color-500: #0ea5e9). Tampal ke blok :root anda dan rujuk dengan var(--color-500). Berfungsi dengan mana-mana persediaan CSS.

Tona cerah (tint) adalah versi yang lebih terang (dicampur dengan putih, Kecerahan lebih tinggi). Tona gelap (shade) adalah versi yang lebih gelap (dicampur dengan hitam, Kecerahan lebih rendah). Langkah 50-400 adalah tona cerah, langkah 600-900 adalah tona gelap, langkah 500 menghampiri warna asal.

Keperluan kontras WCAG menjelaskan hal ini: latar cerah + teks gelap menghasilkan kontras tinggi. Latar langkah 50-100 yang dipasangkan dengan teks langkah 700-900 biasanya memenuhi WCAG AA. Latar gelap (800-900) dengan teks putih atau teks langkah 50-100 juga berfungsi dengan baik.

Ya. Masukkan mana-mana warna HEX, RGB, atau HSL yang sah. Penjana mencipta palet tersuai penuh daripada warna asas tepat anda — berguna untuk warna jenama yang tiada dalam palet Tailwind lalai.

Tidak. Semua pengiraan warna berjalan secara tempatan dalam pelayar anda melalui JavaScript.

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.

Keselamatan dan Privasi

Keselamatan data anda adalah keutamaan kami

Pemprosesan Tempatan

Semua pemprosesan berlaku dalam pelayar anda

Tiada Pemindahan Data

Data anda tidak dihantar ke pelayan kami

Tiada Penyimpanan Data

Tiada data disimpan atau dikongsi

Penyulitan SSL

Penyulitan SSL untuk sambungan selamat

Adakah alat ini berguna?

Penjana Warna Tona