Penjana Tona Cerah & Tona Gelap

Cara Penjana Tona Cerah & Tona Gelap Berfungsi

Apa yang Alat Ini Lakukan

Penjana Tona Cerah & Tona Gelap menghasilkan tona cerah yang lebih ringan (dicampur dengan putih) dan tona gelap yang lebih gelap (dicampur dengan hitam) daripada sebarang warna asas. Masukkan warna dan pilih bilangan langkah untuk menjana gradien variasi yang lancar. Setiap langkah memaparkan nilai HEX, RGB serta peratusan campuran, memudahkan pembinaan skala warna yang konsisten untuk reka bentuk UI, penjenamaan dan visualisasi data.

Kes Penggunaan Pembangun yang Lazim

Pembangun menggunakan penjana tona cerah dan tona gelap apabila membina skala token reka bentuk (cth., blue-100 hingga blue-900), mencipta keadaan hover dan active untuk elemen interaktif, mereka bentuk hierarki warna yang boleh diakses, serta menghasilkan warna latar belakang dan permukaan yang konsisten untuk tema cerah dan gelap. Alat ini penting untuk membina palet warna tersuai Tailwind CSS atau sistem warna Material Design.

Cara Tona Cerah dan Tona Gelap Berfungsi

Tona cerah dihasilkan dengan mencampurkan warna dengan putih, meningkatkan kecerahannya. Tona gelap dihasilkan dengan mencampurkan dengan hitam, mengurangkan kecerahan. Formula untuk tona cerah ialah: new = base + (255 - base) × factor. Untuk tona gelap: new = base × (1 - factor). Langkah diagihkan sama rata antara warna asas dan putih tulen (tona cerah) atau hitam tulen (tona gelap), menghasilkan gradien linear nilai warna.

Perangkap Lazim dan Kes Tepi

Pencampuran linear dengan putih atau hitam boleh menghasilkan tona cerah yang pudar atau tona gelap yang keruh bagi sesetengah rona. Kuning mungkin kelihatan kehijauan apabila digelapkan, dan biru mungkin kehilangan keceriaan apabila dicerahkan. Untuk skala yang seragam dari segi persepsi, pertimbangkan untuk menggunakan ruang warna OKLCH atau CIELAB. Sentiasa pastikan tona cerah paling ringan dan tona gelap paling gelap mengekalkan kontras yang mencukupi terhadap latar belakang yang dimaksudkan.

Bila Perlu Menggunakan Alat Ini Berbanding Kod

Gunakan alat pelayar ini untuk penerokaan pantas dan menjana skala warna semasa kerja reka bentuk. Untuk sistem reka bentuk produksi, jana tona cerah dan tona gelap secara programatik menggunakan pustaka warna seperti chroma.js atau culori yang menyokong ruang warna seragam dari segi persepsi dan boleh mengeluarkan token reka bentuk dalam sebarang format.