MUTools

Lainnya

Pembuat Palet Warna

Pembuat Palet Warna adalah generator skema warna gratis yang membuat pola warna seperti komplementer, analog, dan triadik secara otomatis hanya dengan memilih satu warna dasar. Alat ini menghitung teori warna yang dibutuhkan untuk membuat palet warna, sehingga Anda dapat langsung menemukan kombinasi warna yang indah untuk desain web, pembuatan materi, ilustrasi, hingga branding.

Jenis skema warna

Bagikan atau simpan skema warna saat ini melalui URL.

Palet yang dihasilkan

  • L 0.27
    #1E90FF
  • L 0.40
    #FF8D1E

Ekspor

:root {
  --color-1: #1E90FF;
  --color-2: #FF8D1E;
}

Pembuatan skema warna sepenuhnya dilakukan di dalam browser yang Anda gunakan, dan warna yang Anda masukkan tidak dikirim ke server eksternal.

Apa itu alat Pembuat Palet Warna?

Pembuat Palet Warna adalah generator skema warna gratis yang membuat pola warna seperti komplementer, analog, dan triadik secara otomatis hanya dengan memilih satu warna dasar. Alat ini menghitung teori warna yang dibutuhkan untuk membuat palet warna, sehingga Anda dapat langsung menemukan kombinasi warna yang indah untuk desain web, pembuatan materi, ilustrasi, hingga branding.

Warna dasar dapat dimasukkan dalam format HEX seperti #1E90FF, maupun rgb(30, 144, 255) atau hsl(210, 100%, 56%). Anda juga dapat memilih warna dari color picker bawaan, atau mencari ide kombinasi warna dengan tombol "Acak". Tersedia 7 jenis skema warna: Komplementer, Analog, Triadik, Tetradik, Split-Komplementer, Monokromatik, serta Shades & Tints (gradasi gelap-terang). Pada Monokromatik, Analog, dan sejenisnya, jumlah warna yang dihasilkan (3–10 warna) juga dapat disesuaikan.

Palet yang dihasilkan dapat Anda salin nilai HEX-nya hanya dengan satu klik, dan dapat diekspor sekaligus dalam format CSS variable (:root { --color-1 }), theme.extend.colors milik Tailwind, variabel SCSS, maupun JSON. Karena dapat langsung ditempel ke dalam kode, alur kerja dari penentuan skema warna hingga implementasi menjadi mulus. Setiap swatch juga menampilkan apakah teks hitam atau teks putih yang lebih mudah dibaca di atasnya (acuan kontras), yang berguna untuk menentukan warna teks pada perancangan UI.

Seluruh perhitungan skema warna dilakukan di dalam browser yang Anda gunakan, dan warna yang Anda masukkan tidak dikirim ke server eksternal. Dapat langsung dipakai tanpa pendaftaran akun maupun klik iklan.

Cara penggunaan

  1. Masukkan warna dasar pada kolom input (mendukung HEX, RGB, HSL), atau pilih warna dengan color picker. Saat ingin mencari ide, Anda juga dapat menggunakan tombol "Acak".
  2. Pilih jenis skema warna (Komplementer, Analog, Triadik, Tetradik, Split-Komplementer, Monokromatik, Shades & Tints).
  3. Pada jenis yang jumlah warnanya dapat disesuaikan seperti Monokromatik atau Analog, atur jumlah warna yang dihasilkan (3–10 warna) dengan slider.
  4. Periksa palet yang dihasilkan, lalu salin nilai HEX setiap warna dengan tombol salin pada kartunya.
  5. Pada "Ekspor", beralihlah antartab CSS variable, Tailwind, SCSS, dan JSON, lalu salin seluruh kode dengan tombol "Salin" untuk ditempel ke implementasi Anda.
  6. Tekan "Salin URL" untuk memperoleh URL berbagi yang dapat mereproduksi skema warna saat ini. URL ini dapat digunakan untuk berbagi dengan tim atau menyimpannya sebagai bookmark.

Skenario penggunaan

  • Desainer web / coder yang ingin menentukan skema warna dari warna dasar dapat membuat palet komplementer atau analog dengan cepat.
  • Front-end engineer yang ingin menuangkan skema warna langsung ke dalam kode sebagai CSS variable atau pengaturan Tailwind.
  • Pelaku bisnis yang ingin merapikan warna materi presentasi atau slide dengan pola skema warna seperti Triadik atau Tetradik.
  • Desainer yang ingin mengembangkan variasi nada berbeda dari warna merek dengan Monokromatik atau Shades & Tints.
  • Kreator yang membutuhkan inspirasi kombinasi warna yang selaras untuk ilustrasi maupun karya.
  • Pengguna yang ingin meneruskan skema warna yang sudah ditentukan kepada tim lewat URL berbagi, atau mereproduksi palet yang sama di kemudian hari.

Hal yang perlu diperhatikan

  • Pembuatan skema warna sepenuhnya dilakukan di dalam browser, dan warna yang Anda masukkan tidak dikirim keluar.
  • Warna dasar dapat dimasukkan dalam format HEX, RGB, maupun HSL. Transparansi (alpha) tidak didukung.
  • Komplementer, Triadik, Tetradik, dan Split-Komplementer memiliki jumlah warna yang ditentukan oleh teori warna, sehingga slider jumlah warna tidak ditampilkan. Pada Monokromatik, Analog, serta Shades & Tints, jumlah warna dapat disesuaikan.
  • Skema warna dihitung dengan memutar hue di ruang warna HSL. Jika warna dasar memiliki saturasi yang sangat rendah (mendekati abu-abu), perbedaan hue mungkin menjadi sulit dibedakan.
  • URL berbagi hanya memuat warna dasar, jenis skema warna, dan jumlah warna. Membuka URL tersebut akan mereproduksi palet dengan pengaturan yang sama.

Pertanyaan yang sering diajukan

Apakah warna yang saya masukkan dikirim ke server?
Tidak. Seluruh pembuatan skema warna dilakukan di dalam browser yang Anda gunakan. Anda dapat menggunakannya dengan tenang bahkan untuk warna merek maupun warna yang ditangani dalam pekerjaan.
Apa perbedaan antara komplementer, analog, dan triadik?
Komplementer adalah kombinasi warna yang berseberangan (180 derajat) pada roda warna sehingga menghasilkan kontras yang tegas. Analog menggunakan hue yang berdekatan (sekitar ±30 derajat) sehingga menghasilkan skema warna yang selaras. Triadik adalah 3 warna yang membagi roda warna menjadi tiga bagian sama besar (masing-masing 120 derajat), menghasilkan kesan seimbang dan semarak. Alat ini menghitung semuanya secara otomatis dari warna dasar.
Apakah bisa diekspor untuk CSS variable atau Tailwind?
Bisa. Pada tab ekspor, Anda dapat beralih antara CSS variable (format --color-1 pada :root), theme.extend.colors milik Tailwind, variabel SCSS, dan JSON, lalu menyalin seluruh kode dengan tombol "Salin" untuk langsung ditempel ke implementasi.
Apakah jumlah warna yang dihasilkan bisa diubah?
Pada Monokromatik, Analog, serta Shades & Tints, jumlah warna dapat disesuaikan dalam rentang 3–10 warna dengan slider. Komplementer, Triadik, Tetradik, dan Split-Komplementer memiliki jumlah warna tetap karena ditentukan oleh teori warna.
Apakah skema warna yang dibuat bisa dibagikan atau disimpan?
Tekan "Salin URL" untuk memperoleh URL berbagi yang memuat warna dasar, jenis skema warna, dan jumlah warna. Membuka URL tersebut akan mereproduksi palet yang sama, sehingga praktis untuk berbagi dengan tim maupun menyimpannya sebagai bookmark.
Apakah kontras setiap warna (keterbacaan teks) juga bisa diketahui?
Setiap swatch menampilkan acuan apakah teks hitam atau teks putih yang lebih mudah dibaca di atas warna tersebut (penilaian berdasarkan luminans relatif). Ini berguna sebagai rujukan ketika menentukan warna teks terhadap warna latar. Jika Anda membutuhkan penilaian kesesuaian yang lebih ketat, silakan gunakan pula pemeriksa kontras.