Color Picker & Generator Palet Warna Gratis
Pilih warna, buat palet dengan aturan harmoni, dan konversi antara HEX, RGB, HSL, HSV, CMYK secara real-time. Cek kontras WCAG, kunci warna favorit, dan salin kodenya dalam satu klik.
Generator Palet Warna
Klik swatch untuk pilih · kunci warna favorit · Spasi untuk acak
Generator Gradient CSS
Buat gradient linear, radial, atau conic dengan banyak warna, lalu salin kode CSS siap pakai.
Skala Tint & Shade
Skala 50–950 dari warna aktif (gaya Tailwind). Klik swatch untuk menyalin.
Ekstrak Warna dari Gambar
Unggah gambar, kami ambil warna dominannya. Diproses penuh di browser, tidak diunggah ke server.
Unggah gambar untuk melihat warna dominannya di sini.
Ekspor Palet & Warna Terbaru
Salin palet aktif dalam format siap pakai untuk proyek Anda.
Warna Terbaru
Cara Menggunakan Color Picker & Membuat Palet
Color Picker & Palette dari Diginstra adalah alat pemilih warna gratis yang berjalan sepenuhnya di browser Anda. Geser kotak area warna untuk memilih saturasi dan kecerahan, atur hue di slider pelangi, atau ketik langsung kode HEX yang Anda miliki. Kelima format, yakni HEX, RGB, HSL, HSV, dan CMYK, langsung diperbarui secara real-time tanpa perlu menekan tombol apa pun.
Untuk membuat palet warna, pilih aturan harmoni (analogous, monokromatik, komplementer, dan lainnya) lalu klik Acak Palet atau tekan tombol Spasi. Warnanya akan disusun otomatis mengikuti teori warna. Kunci warna yang Anda sukai dengan ikon gembok, lalu klik swatch mana pun untuk memuatnya ke pemilih warna utama.
Setiap kode warna bisa disalin dengan satu klik pada ikon salin di sebelahnya. Gunakan tombol Salin Semua untuk menyalin kelima warna palet sekaligus dalam format HEX, siap ditempel ke CSS atau desain Anda.
Jenis Format Warna: HEX, RGB, HSL, HSV, CMYK
HEX (Hexadecimal)
Format paling umum di web, ditulis dengan tanda pagar misal #FF6B35. Enam digit mewakili kombinasi merah, hijau, dan biru dalam bilangan heksadesimal. Karena bentuknya ringkas dan mudah disalin, HEX telah menjadi standar pada penulisan CSS maupun desain antarmuka.
RGB (Red, Green, Blue)
Mewakili warna sebagai kombinasi tiga cahaya primer dengan nilai 0–255, misal rgb(255, 107, 53). Cocok untuk CSS modern dan ketika Anda perlu mengatur opacity dengan rgba().
HSL (Hue, Saturation, Lightness)
Mendeskripsikan warna berdasarkan rona (0–360°), saturasi, dan kecerahan dalam persen, misal hsl(16, 100%, 60%). Lebih intuitif untuk manusia karena Anda bisa membuat warna lebih terang atau lebih pudar hanya dengan mengubah satu angka.
HSV & CMYK
HSV mirip dengan HSL, namun menggunakan komponen value (kecerahan murni) sehingga kerap dipakai pada perangkat lunak desain. Sementara itu, CMYK (Cyan, Magenta, Yellow, Key/black) merupakan model warna untuk dunia percetakan. Memahami perbedaan keduanya penting saat berpindah dari media layar ke media cetak agar warna tidak berubah drastis.
Teori Warna: Cara Memilih Kombinasi Warna Harmonis
Teori warna adalah dasar untuk memilih kombinasi warna yang enak dipandang. Generator palet kami menerapkan enam aturan harmoni yang paling banyak dipakai desainer dan pengembang:
Skema analogous memilih warna-warna yang berdekatan di roda warna, contohnya biru, biru-hijau, dan hijau, sehingga hasilnya terasa tenang dan menyatu. Skema komplementer memadukan dua warna yang saling berseberangan, seperti biru dan oranye, untuk memunculkan kontras yang kuat dan hidup. Adapun triadic menggunakan tiga warna dengan jarak yang sama, menghasilkan palet yang seimbang sekaligus berani.
Monokromatik bertumpu pada satu rona dengan beberapa tingkat kecerahan, sangat cocok untuk tampilan minimalis dan profesional. Sementara split-komplementer dan square merupakan variasi yang memberi kontras tanpa terasa mencolok. Pilihlah aturan yang sesuai dengan suasana brand Anda: analogous dan monokromatik untuk kesan yang kalem, komplementer dan triadic untuk kesan yang enerjik.
Satu hal yang tak boleh dilewatkan adalah pemeriksaan kontras. Panel kontras pada alat ini menghitung rasio WCAG secara otomatis sehingga Anda dapat memastikan teks tetap mudah dibaca di atas warna latar. Dengan demikian, hasil rancangan menjadi aksesibel bagi seluruh pengguna.
Generator Gradient CSS: Linear, Radial, dan Conic
Gradient atau gradien warna adalah perpaduan halus antara dua warna atau lebih yang banyak dipakai pada latar belakang situs modern, tombol, maupun bagian hero. Generator gradient pada alat ini memungkinkan Anda menyusun gradient linear, radial, ataupun conic, kemudian menyalin kode CSS-nya dalam satu klik.
Ketiga jenis gradient memiliki karakter yang berbeda. Gradient linear mengalir dalam garis lurus dan paling sering dipakai untuk tombol serta latar belakang. Gradient radial menyebar dari titik pusat sehingga cocok untuk menonjolkan satu elemen. Adapun gradient conic berputar dari satu titik dan kerap dimanfaatkan untuk efek kreatif seperti diagram ataupun pola melingkar.
Cara memakainya cukup sederhana. Pilih jenis gradient, tambahkan dua warna atau lebih pada stop warna, atur sudutnya bila memakai linear atau conic, lalu klik tombol salin untuk mendapatkan kodenya. Sebagai panduan, gradient dengan dua hingga tiga warna umumnya tampak paling bersih, dan pastikan teks di atasnya tetap memiliki rasio kontras yang memadai agar mudah dibaca.
Ekstrak Warna dari Gambar & Palet Tailwind
Terkadang warna terbaik justru berasal dari gambar yang sudah Anda miliki, misalnya logo, foto produk, atau sampul media sosial. Fitur ekstrak warna dari gambar menarik warna-warna dominan secara otomatis dari berkas yang Anda unggah, sehingga palet yang dihasilkan selaras dengan identitas visual brand. Seluruh proses berjalan di peramban Anda, sehingga gambar tidak pernah dikirim ke server mana pun.
Bagi para pengembang, fitur skala tint dan shade menyusun sebelas tingkat warna bergaya Tailwind, mulai dari 50 hingga 950, dari warna aktif Anda. Cukup pilih warna dasar, lalu salin seluruh skala sebagai variabel CSS ataupun konfigurasi Tailwind siap pakai. Demikian pula palet utama dapat diekspor ke format CSS, Tailwind, JSON, maupun SCSS, sehingga integrasi dengan proyek Anda menjadi cepat dan konsisten.
Psikologi Warna: Makna Warna untuk Branding
Warna memengaruhi emosi dan persepsi. Memahami psikologi warna membantu Anda memilih palet yang menyampaikan pesan brand dengan tepat. Berikut makna umum beberapa warna utama:
Gunakan pemilih warna kami untuk mencoba kombinasi di atas, lalu terapkan aturan harmoni untuk memastikan warna brand Anda selaras secara visual.
Pertanyaan Umum Seputar Color Picker & Palet Warna
Apa itu color picker atau pemilih warna?
Color picker adalah alat untuk memilih dan menentukan warna tertentu, lalu mendapatkan kodenya dalam berbagai format seperti HEX, RGB, atau HSL. Alat kami juga sekaligus menjadi generator palet warna sekaligus konverter antar format.
Bagaimana cara mengubah HEX ke RGB?
Ketik kode HEX (misal FF6B35) di kolom HEX, maka nilai RGB akan muncul otomatis di sebelahnya. Sebaliknya, RGB ke HEX juga dikonversi real-time. Tidak perlu tombol konversi.
Bagaimana cara membuat palet warna yang bagus?
Pilih aturan harmoni sesuai suasana yang diinginkan, klik Acak Palet atau tekan Spasi untuk mencari inspirasi, lalu kunci warna yang Anda sukai. Ulangi hingga menemukan kombinasi yang pas. Palet monokromatik dan analogous paling aman untuk pemula.
Apa itu kombinasi warna monokromatik, analogous, dan komplementer?
Monokromatik: satu rona, beberapa tingkat terang-gelap. Analogous: warna-warna bertetangga di roda warna. Komplementer: dua warna berseberangan yang saling mengontraskan. Detail lengkapnya ada di bagian Teori Warna di atas.
Berapa rasio kontras minimum WCAG AA dan AAA?
Standar WCAG AA mensyaratkan rasio kontras minimal 4,5:1 untuk teks normal (3:1 untuk teks besar). Standar AAA menuntut 7:1. Panel kontras kami menghitungnya otomatis dari warna aktif Anda.
Apakah tools ini gratis dan tanpa login?
Ya, alat ini sepenuhnya gratis dan tanpa registrasi. Seluruh proses berjalan di peramban Anda (client-side), sehingga tidak ada data warna yang dikirim ke server kami. Dengan demikian, penggunaannya aman, cepat, dan tanpa batas.
Bisakah saya menyalin semua kode warna sekaligus?
Bisa. Klik ikon salin di sebelah tiap format untuk menyalin satu nilai (HEX, RGB, HSL, HSV, atau CMYK), atau klik Salin Semua untuk menyalin kelima warna palet dalam format HEX sekaligus.
Apa perbedaan HEX, RGB, HSL, dan CMYK?
HEX dan RGB adalah format untuk layar/web. HSL lebih intuitif karena memisahkan rona, saturasi, dan kecerahan. CMYK adalah model untuk percetakan. Penjelasan lengkap tiap format beserta kapan dipakainya ada di bagian Jenis Format Warna di atas.
Bagaimana cara membuat gradient CSS?
Buka bagian Generator Gradient, pilih jenisnya (linear, radial, atau conic), tambahkan warna pada stop, atur sudut, lalu klik Salin CSS. Kode yang dihasilkan langsung dapat ditempel ke berkas CSS Anda.
Bagaimana cara mengambil warna dari gambar?
Gunakan fitur Ekstrak Warna dari Gambar, unggah berkas PNG, JPG, atau WebP Anda, dan alat ini otomatis menarik warna dominannya. Klik swatch hasil untuk memuatnya ke pemilih warna. Semua diproses di peramban, tanpa mengunggah gambar ke server.
Bagaimana cara mengekspor palet ke Tailwind?
Pada bagian Ekspor Palet, klik Tailwind Config untuk menyalin palet aktif dalam format konfigurasi Tailwind. Tersedia juga format CSS Variables, JSON Array, dan SCSS Variables untuk kebutuhan proyek lainnya.