Desain · utilitas Lokal

Generator Nuansa Warna

Color Shades Generator

Buat skala 3–20 gradasi deterministik dari satu warna dasar yang tetap terpatok di tengah ramp, lalu ekspor sebagai properti kustom CSS bernomor.

Jalur tugas / dari masukan ke hasil

Atur warna dasar

Berjalan lokal · Tidak ada yang diunggah

Cara kerja Generator Nuansa Warna, privasi, dan alat terkait

Jalur tugas / dari masukan ke hasil

Cara membuat skala gradasi warna

01
Atur warna dasar
Masukkan nilai heksa di Warna dasar — #RGB, #RGBA, #RRGGBB, dan #RRGGBBAA semuanya bisa, dan kolomnya terbuka dengan #6D5EF8. Warna dasar selalu berada di tengah skala yang jadi.
02
Pilih jumlah gradasi
Atur Jumlah gradasi ke bilangan bulat dari 3 hingga 20 — defaultnya 9. Jumlah ganjil menyeimbangkan sisi yang lebih gelap dan lebih terang secara merata di sekitar warna dasar; jumlah genap tetap memusatkan dasar dan memberi sisi terang satu sampel ekstra.
03
Buat ramp-nya
Tekan Buat gradasi. Palet berjalan dari gradasi gelap melalui warna dasar Anda hingga tint terang, dan setiap sampel diberi nomor serta label nilai heksanya, sehingga posisi 1 selalu langkah paling gelap.
04
Periksa perilaku campurannya
Gradasi di bawah dasar dicampur ke arah hitam dan tint di atasnya ke arah putih, tetapi campurannya tidak pernah menempuh lebih dari 78% perjalanan ke salah satu ekstrem. Langkah-langkah ujungnya tetap kromatik dan bisa dipakai alih-alih runtuh menjadi nyaris hitam atau nyaris putih.
05
Muat skala contoh
Tekan Muat contoh untuk membuat tujuh gradasi di sekitar #0EA5E9 — satu proses referensi lengkap yang bisa Anda periksa sebelum memasukkan warna merek Anda sendiri. Atur ulang mengembalikan dasar #6D5EF8 dan jumlah 9.
06
Salin atau unduh tokennya
Tekan Salin keluaran untuk menyalin blok :root berisi properti kustom --toolars-shade-1 …, atau Unduh untuk menyimpannya sebagai toolars-color-shades.css, siap ditempel ke stylesheet. Setiap kartu sampel juga menampilkan nilai heksanya untuk salinan satu kali.

Fakta alat

Pemrosesan: Di browser Anda
Input meninggalkan perangkat: Tidak pernah
Retensi: Tidak ada yang disimpan
Harga: Gratis

Masukan Anda tetap di peramban.

Generator Nuansa Warna menggunakan jalur eksekusi lokal terverifikasinya dan tidak membuat riwayat masukan atau keluaran tersembunyi.

Eksekusi lokal

Berjalan di dalam tab peramban saat ini.

Tanpa pemrosesan tersembunyi

Data alat aktif tidak pernah menjadi catatan dokumen Toolars.

Tanpa perlu akun

Gunakan alur kerja inti tanpa membuat profil. Favorit disinkronkan ke akun Anda setelah masuk.

Atur ulang seketika

Bersihkan tab dan data kerja aktif pun hilang.

Apa yang sebenarnya dilakukan Generator Nuansa Warna

Warna merek tiba sebagai satu nilai heksa, tetapi antarmuka nyata butuh satu skala penuh: status hover yang lebih gelap, tint latar yang halus, border satu langkah dari dasar. Memilih langkah-langkah itu dengan mata bergeser antarlayar dan antaranggota tim. Generator Nuansa Warna menginterpolasi ramp secara deterministik di sekitar warna dasar Anda, menjaga dasar tetap terpatok di tengah dan kedua ekstrem jauh dari hitam dan putih murni. Hasilnya diekspor sebagai properti kustom CSS dengan nama bernomor yang stabil, siap untuk berkas token desain — dihitung secara lokal, tidak pernah diunggah.

Pertanyaan umum

Berapa banyak gradasi yang bisa dimiliki satu skala?

Antara 3 dan 20, diatur dengan kolom Jumlah gradasi; ruang kerjanya memakai default 9. Jumlah di luar rentang itu ditolak dengan pesan yang menyebutkan batasnya.

Bagaimana skalanya dihitung?

Secara deterministik: gradasi di bawah dasar dicampur ke arah hitam, tint di atasnya ke arah putih, dan warna dasar itu sendiri selalu memegang posisi tengah. Campurannya dibatasi pada 78% ke salah satu ekstrem, sehingga tidak ada langkah yang mencapai hitam atau putih murni dan setiap stop tetap bisa dipakai.

Apa yang berubah dengan jumlah gradasi genap?

Warna dasar tetap memegang posisi tengah, tetapi kedua sisi tidak bisa saling mencerminkan dengan persis: jumlah genap memberi sisi yang lebih terang satu sampel lebih banyak daripada sisi yang lebih gelap. Pilih jumlah ganjil seperti 9 atau 11 bila Anda menginginkan ramp yang simetris sempurna.

Apakah skalanya mempertahankan transparansi?

Ya. Jika warna dasar membawa byte alfa — misalnya #6D5EF8CC — alfa yang sama dipertahankan di seluruh ramp, dan nilai heksa yang diekspor mendapat byte alfa setiap kali alfa dasarnya di bawah 1.

Format apa yang dipakai ekspornya?

Blok :root berisi properti kustom CSS bernama --toolars-shade-1 hingga --toolars-shade-N yang memegang nilai heksa, dapat diunduh sebagai berkas .css atau disalin ke papan klip. Setiap kartu sampel juga menampilkan nilai heksanya untuk disalin langsung.

Apakah warnanya dikirim ke mana pun?

Tidak. Seluruh ramp dihitung di dalam tab peramban ini, masukan dan hasil tidak pernah keluar dari tab ini, dan tidak diperlukan akun.

Tugas terkait, bukan jalan buntu.

Pindah ke ruang kerja terfokus lainnya tanpa kembali ke indeks lengkap.

Generator Loader CSS

CSS Loader Generator

Rancang loader CSS cincin orbit atau tiga titik dengan ukuran, durasi, dan warna yang dapat disetel, lalu salin kode lengkap dengan blok prefers-reduced-motion.

Buat

Generator Checkbox CSS

CSS Checkbox Generator

Beri gaya kotak centang HTML asli dengan ukuran, border, dan warna pilihan, lalu salin CSS yang mempertahankan fokus keyboard dan status disabled.

Buat

Generator Switch CSS

CSS Switch Generator

Rancang sakelar alih murni CSS dengan geometri lintasan dan kenop yang dapat diukur, lalu salin kodenya dengan dukungan reduced-motion — tanpa JavaScript.

Buat

Generator Clip Path CSS

CSS Clip Path Generator

Edit titik poligon dengan menyeret, papan ketik, atau koordinat. Mulai dari empat prasetel dan salin deklarasi clip-path atau CSS lengkap secara lokal.

Buat

Generator Nuansa Warna