Apa itu Palet Monokromatik?

Pilih warna dasar lalu hasilkan shade (lebih gelap) dan tint (lebih terang) darinya. Tentukan jumlah langkah, lalu ekspor sebagai variabel CSS, konfigurasi Tailwind, atau salin nilai hex/RGB individual.

Pilih HEX apa pun atau gunakan pemilih warna, tentukan jumlah varian terang (tint), nada (campur abu) dan gelap (shade), lalu halaman akan menginterpolasi tiap skala di ruang LAB supaya langkahnya terlihat merata. Setiap kotak warna menampilkan HEX, RGB, dan HSL yang bisa disalin satu klik, dan Salin semua mengambil seluruh skala sekaligus. Kamu bisa menyaring tampilan hanya untuk yang terang, nada saja, atau yang gelap, atau ekspor seluruh skala sebagai CSS custom properties, potongan konfigurasi Tailwind, variabel SCSS, design token JSON, atau lembar swatch PNG.

Cara menggunakan

1. Pilih warna dasar dengan pemilih warna, ketik kode hex, atau ambil warna dominan langsung dari logo atau foto lewat Dari gambar.
2. Atur berapa banyak warna terang (tint), nada (campur abu), dan gelap (shade) yang kamu butuhkan, lalu pakai filter «Tampilkan» kalau cukup butuh satu baris saja.
3. Salin nilai warna satu per satu, tekan Salin semua untuk mengambil semua HEX sekaligus, atau ekspor seluruh palet sebagai properti kustom CSS, objek konfigurasi Tailwind, variabel SCSS, design token JSON, atau swatch gambar.

Kapan menggunakan

• Menyusun design system UI yang butuh sembilan langkah konsisten dari warna brand untuk komponen.
• Merancang visualisasi data ketika semua seri harus berasal dari satu hue (heatmap, batang sekuensial).
• Memilih pasangan teks dan latar: latar -100 dengan teks -900 biasanya jatuh di zona kontras aman.

Hasil

Anda membangun dashboard dan membutuhkan palet biru untuk visualisasi data. Anda memilih #3B82F6 sebagai dasar, menghasilkan 9 langkah dari hampir putih (#EBF2FE) hingga hampir hitam (#1A2744). Anda mengekspor sebagai variabel CSS dan menggunakan --color-blue-100 hingga --color-blue-900 di seluruh grafik Anda.

FAQ

Apa itu palet monokromatik sebenarnya?

Sekumpulan warna yang memiliki hue yang sama tapi berbeda saturasi dan kecerahan. Hasilnya terasa seperti satu keluarga warna (misalnya berbagai gelap-terang biru yang sama) dan menghindari ramai visual akibat campuran hue yang berbeda.

Berapa langkah yang sebaiknya dibuat?

Di UI angka standar adalah sembilan (Tailwind, Material, dan IBM Carbon menggunakan skala 50-900). Untuk visualisasi data, 5-7 langkah biasanya cukup. Lebih dari 11 mulai terlihat seperti gradien dan langkah-langkah yang berdampingan susah dibedakan.

Format mana yang sebaiknya diekspor?

Variabel CSS bisa ditempel ke stylesheet apa pun. Cuplikan Tailwind dimasukkan ke theme.extend.colors dan memunculkan utilitas seperti bg-brand-500. SCSS memberi kamu variabel $brand-500 sekaligus sebuah Sass map. JSON mengekspor skala sebagai design token terstruktur untuk style dictionary. Lembar PNG cocok untuk berbagi di Figma atau dokumen brand guideline.

Mengapa langkah paling terang terlihat pudar?

Pada kecerahan sangat tinggi, mata menerima hampir semua warna saturasi sebagai mendekati putih. Bila -100 sulit dibedakan dari putih, kurangi jumlah langkah terang atau tarik batas kecerahan lebih dekat ke warna dasar agar langkah bersebelahan kembali jelas.

Apakah warna yang dihasilkan ramah aksesibilitas?

Kini kamu bisa mengeceknya langsung di sini. Nyalakan lencana kontras WCAG dan tiap sampel menunjukkan apakah teks hitam atau putih lolos AA atau AAA di atasnya; pratinjau penglihatan warna mewarnai ulang skala seperti yang dilihat orang dengan deuteranopia, protanopia, atau tritanopia. Aturan cepat: pasangkan langkah -100/-200 dengan -700/-800 dan biasanya kamu lolos WCAG AA.

Alat terkait