Softonic

Generator Palet Monokromatik

Langkah 1 / 3 Buat skala

Warna dan palet dibuat di browser ini. Dalam mode bertahap, proyek disimpan hingga 30 menit di penyimpanan sesi tab ini; tidak ada nilai warna yang masuk ke server kami atau URL.

Buat skala monokromatik

Masukkan satu warna, lalu pilih transformasi, ruang interpolasi, dan jumlah sampel.

Format yang diterima: #RGB, #RRGGBB, rgb(0–255), dan hsl() dengan persentase. Kanal alfa tidak diterima.

Digunakan dalam ekspor variabel CSS, Tailwind, SCSS, dan token desain.

Pilih satu warna dasar, lalu generator akan membangun palet monokromatik di sekitarnya: tint (dicampur bertahap dengan putih untuk gradasi yang lebih terang), shade (dicampur bertahap dengan hitam untuk gradasi yang lebih gelap), dan tone (dicampur dengan abu-abu untuk menurunkan saturasi). Berguna bagi sistem desain yang butuh gradasi selaras dari satu warna merek, seperti skala 50–950 milik Tailwind, tetapi bisa disetel, atau untuk memilih warna status hover dan aktif tanpa keluar dari palet.

Cara palet dibuat

  1. 1

    Masukkan warna dasar

    Gunakan #RGB, #RRGGBB, kanal rgb() bilangan bulat, atau persentase hsl().

  2. 2

    Pilih jenis palet

    Pilih skala terang dan gelap penuh, tint menuju putih, shade menuju hitam, atau tone menuju netral.

  3. 3

    Pilih jumlah langkah

    5, 9, atau 11 langkah. Sembilan langkah memakai label umum 100–900 bergaya Material; 11 langkah menambahkan 50 dan 950 untuk skala bergaya Tailwind.

  4. 4

    Salin atau ekspor

    Salin HEX, RGB, HSL, atau OkLCH, atau ekspor CSS, Tailwind, SCSS, dan JSON Design Tokens Community Group.

Tint vs. shade vs. tone

  • Tint = warna dasar + putih. Lebih terang, lebih pastel. mix(base, #fff, p%), dengan p adalah persentase putih.
  • Shade = warna dasar + hitam. Lebih gelap, lebih muram. mix(base, #000, p%).
  • Tone = warna dasar + abu-abu. Kecerahan sama, saturasi lebih rendah, lebih kalem.

Ketiga transformasi ini menghasilkan karakter visual yang berbeda: tint terasa ringan dan optimistis, shade terasa mantap dan serius, tone terasa kalem dan berkelas.

Gradasi 9 langkah dari satu warna dasar

Langkah Deskripsi Penggunaan umum
100 Sangat terang Permukaan, latar chip
200 Terang Status nonaktif
300 Terang sedang Garis tepi, pembatas
400 Sedikit meredup Teks sekunder (latar terang)
500 Warna dasar Warna merek default, acuan Anda
600 Gelap sedang Status hover pada aksi utama
700 Gelap Status aktif, header
800 Sangat gelap Teks kuat pada latar terang
900 Shade paling gelap Teks kontras maksimal

Label angka terinspirasi oleh konvensi token umum; warna yang dihasilkan bukan nilai resmi Material atau Tailwind.

Mengapa monokromatik cocok untuk antarmuka

  • Keselarasan. Setiap elemen terlihat jelas saling terkait.
  • Konsistensi. Mengulang satu rona membuat hubungan mudah dikenali, tetapi tidak otomatis menjadikan antarmuka aksesibel bagi pengguna dengan perbedaan persepsi warna.
  • Kesederhanaan. Satu keputusan, warna dasar, menentukan seluruh palet.

Memadukan dengan warna netral

Palet monokromatik juga butuh abu-abu. Pola umum:

  • Gradasi utama dari warna merek Anda (9 langkah).
  • Gradasi netral dari versi warna utama yang saturasinya diturunkan (9 langkah).
  • Mungkin satu warna aksen (satu langkah pilihan untuk peringatan dan CTA).

Gunakan ini sebagai struktur awal, bukan aturan tetap. Jumlah palet bergantung pada status produk, visualisasi data, warna semantik, dan kebutuhan aksesibilitas.

Titik pemeriksaan kontras

Untuk teks di atas latar, WCAG mensyaratkan 4.5:1 untuk teks normal dan 3:1 untuk teks besar. Label 100, 500, atau 900 tidak menyatakan rasio kontras tertentu; hasilnya bergantung pada warna dasar, jenis palet, dan ruang interpolasi.

Selalu periksa kombinasi spesifik yang akan Anda pakai dengan alat pemeriksa kontras.

Mengekspor ke sistem desain Anda

Format keluaran:

  • CSS custom property: --primary-50: #f0f9ff; --primary-100: ...
  • Konfigurasi Tailwind: objek JS siap tempel ke tailwind.config.js → theme.extend.colors.
  • SCSS map untuk proyek Sass.
  • Design tokens JSON dengan bentuk $type/$value dari Design Tokens Community Group.

Pertanyaan yang Sering Diajukan

Tint sengaja bergerak menuju putih, jadi warna dasar yang sangat jenuh dapat cepat menjadi pastel. Bandingkan HSL dan OkLCH, gunakan lebih sedikit langkah, atau pilih warna dasar yang kurang jenuh.

Anda dapat memilih HSL atau OkLCH. HSL mengubah sumbu kecerahan dan saturasi; OkLCH mengubah kecerahan perseptual dan chroma, lalu mengurangi chroma bila perlu agar hasil tetap berada dalam sRGB.

Pada skala penuh, warna dasar adalah token 500 di tengah. Skala tint berakhir di warna dasar, skala shade dimulai dari sana, dan skala tone berakhir di sana. Label tidak menjamin tingkat kecerahan tertentu.

Tidak ada integrasi langsung dengan Figma. Salin nilai satu per satu atau gunakan teks CSS, Tailwind, SCSS, atau JSON berstruktur Design Tokens Community Group sebagai awal alur kerja Anda.

Alat Terkait

Pembuat Undangan

Buat undangan pernikahan, ulang tahun, akikah, atau acara kantor. Sesuaikan tulisan dan warna, lihat pratinjau langsung, lalu unduh PNG siap cetak ukuran 5R.

Pembaca Kode QR

Dekode kode QR dari gambar PNG, JPG, atau WebP di browser. Lihat URL, Wi-Fi, vCard, SMS, email, kalender, geo, atau teks sebelum digunakan.

Generator Kode QR

Buat kode QR secara lokal di browser dari URL, teks biasa, atau payload QR yang diformat benar, lalu unduh sebagai PNG.

Pembuat GIF

Ubah rangkaian gambar atau video pendek menjadi GIF animasi. Atur frame rate, pengulangan, dan ukuran sebelum mengekspor.

Editor Foto

Editor foto berbasis browser dengan pangkas, putar, kecerahan, kontras, saturasi, filter, hamparan teks, dan ekspor ke JPG, PNG, atau WebP.

Generator Favicon dari Inisial dan Emoji

Buat favicon dari inisial atau satu emoji. Pilih bentuk dan latar; desain teks juga menyediakan warna karakter dan gaya font.