Buat palet warna 6 langkah (50, 100, 300, 500, 700, 900) bernilai HEX dari warna dasar. Salin satu nuansa atau semua sebagai variabel CSS.
Semuanya terjadi secara lokal di browser Anda. Tidak ada yang diunggah atau dikirim.
Warna dasar adalah langkah 500. Langkah yang lebih terang (50, 100, 300) diinterpolasi ke arah putih; yang lebih gelap (700, 900) diinterpolasi ke arah hitam, dalam ruang HSL.
Sistem desain jarang memakai satu warna saja: mereka memakai tangga nuansa terkait untuk latar, garis, aksen, status hover, dan teks. Alat ini membangun tangga tersebut dari satu warna dasar dengan interpolasi di ruang HSL (rona, saturasi, kecerahan), sehingga "lebih terang" dan "lebih gelap" berperilaku seperti yang mata kita harapkan.
Warna dasar Anda menjadi langkah 500. Tiga langkah lebih terang (50, 100, 300) dibuat dengan interpolasi di ruang HSL ke arah putih — kecerahan naik dan saturasi memudar secara proporsional. Dua langkah lebih gelap (700, 900) diinterpolasi ke arah hitam — kecerahan turun sementara rona dan saturasi dipertahankan. Hasilnya adalah tangga warna yang mulus dan mudah diprediksi di sekitar warna dasar Anda.
Sebagian besar sistem desain hanya membutuhkan beberapa titik per warna: rona hampir putih, rona terang, aksen lembut, warna utama, status hover yang lebih gelap, dan nuansa hampir hitam untuk teks. Langkah 50, 100, 300, 500, 700, dan 900 menutupi fungsi itu dengan tepat tanpa kebisingan dari skala 10 atau 12 langkah.
500 untuk aksi utama dan aksen, 700 untuk status hover dan aktif, 50 atau 100 untuk latar dan isian yang halus, 300 untuk garis dan status nonaktif, dan 900 untuk teks di atas latar terang. Pembagian peran yang sama ini dipakai sebagian besar sistem token (seperti Tailwind).
Tidak. Nilai warna hanyalah tiga angka. Semuanya — konversi HSL, interpolasi, keluaran HEX, dan pembuatan variabel CSS — terjadi di JavaScript di dalam browser Anda. Tidak ada yang disimpan atau dikirim.
Tidak secara langsung — seluruh tangga diturunkan dari warna dasar agar semua langkah tetap konsisten satu sama lain. Untuk mengubah satu nuansa, pilih warna dasar yang lain (atau sesuaikan nilainya) di pemilih warna, dan seluruh palet langsung dibuat ulang.
Jika Anda baru saja memakai Pembuat palet warna, langkah berikutnya yang wajar adalah Konverter warna, Pemeriksa kontras warna, Generator gradient CSS, atau telusuri semua alat Alat file privat.