Pemilih warna
Ambil warna apa pun dari gambar dan dapatkan kode HEX, RGB, HSL, HSV, dan CMYK secara instan.
Unggah gambar untuk mengambil warna
Seret & lepas, tempel, atau telusuri — PNG, JPG, WEBP, atau GIF
Tips: Anda juga dapat menempel gambar dengan Ctrl/Cmd + V
Kode warna
Nama warna terdekat: Royal Blue
Harmoni warna
Pemeriksa kontras (WCAG)
Contoh teks
Warna tersimpan
Belum ada warna tersimpan — pilih satu dan ketuk “Simpan warna”.
Pemilih warna (color picker) adalah alat yang membantu Anda mengidentifikasi warna secara tepat dan mengubahnya menjadi kode warna yang dapat digunakan di mana saja. Alih-alih menebak-nebak, Anda cukup mengarahkan pipet (eyedropper) ke sebuah piksel pada gambar dan langsung mendapatkan nilai warnanya dalam format HEX, RGB, HSL, HSV, dan CMYK. Warna adalah bahasa visual, dan alat ini menerjemahkannya ke dalam angka yang dipahami oleh browser, aplikasi desain, dan mesin cetak.
Alat ini berguna untuk banyak keperluan: desain web dan antarmuka pengguna, pengembangan front-end, persiapan berkas cetak, hingga pengujian aksesibilitas. Semuanya gratis dan berjalan sepenuhnya di dalam browser Anda — gambar tidak diunggah ke server mana pun, sehingga privasi Anda tetap terjaga. Selain membaca kode HEX, RGB, HSL, HSV, dan CMYK, Anda juga dapat mengekstrak palet warna otomatis dari sebuah gambar, menghasilkan harmoni warna (komplementer, analog, triadik, dan lainnya), serta memeriksa rasio kontras sesuai standar WCAG untuk memastikan teks Anda mudah dibaca.
Cara mengambil warna dari gambar
- 1
Unggah atau seret gambar
Seret dan lepas berkas gambar ke area unggah, tempel dengan Ctrl/Cmd + V, atau klik untuk menelusuri berkas. Format PNG, JPG, WEBP, dan GIF didukung, dan gambar diproses langsung di browser Anda.
- 2
Klik pipet pada sebuah piksel
Aktifkan pipet (eyedropper), lalu klik di titik mana pun pada gambar. Gunakan tampilan perbesaran untuk mengarahkan sampel ke piksel yang tepat sehingga Anda mendapatkan warna yang benar-benar Anda inginkan.
- 3
Baca dan salin kode warna
Panel nilai menampilkan warna terpilih dalam format HEX, RGB, HSL, HSV, dan CMYK sekaligus. Klik salah satu kode untuk menyalinnya ke papan klip, siap ditempel ke CSS, alat desain, atau dokumen Anda.
- 4
Ekstrak palet dari gambar
Gunakan fitur ekstrak palet untuk menarik warna-warna dominan dari seluruh gambar secara otomatis. Ini sempurna untuk menyusun skema warna yang selaras dengan foto atau ilustrasi tertentu.
- 5
Hasilkan harmoni warna
Dari warna terpilih, hasilkan kombinasi harmoni seperti komplementer, analog, triadik, tetradik, split-komplementer, dan monokromatik untuk membangun palet yang seimbang secara visual.
- 6
Periksa kontras WCAG dan simpan palet
Pasangkan warna teks dengan warna latar untuk melihat rasio kontrasnya dan status kelulusan WCAG (AA/AAA). Setelah puas, simpan warna favorit Anda dan ekspor palet sebagai CSS, JSON, atau PNG.
HEX, RGB, HSL, HSV, dan CMYK dijelaskan
Warna yang sama dapat ditulis dalam beberapa format, dan masing-masing memiliki kegunaan tersendiri. HEX dan RGB umum dipakai di web dan layar, HSL serta HSV memudahkan penyesuaian warna secara intuitif, sedangkan CMYK dirancang untuk pencetakan. Tabel berikut merangkum perbedaan dan kapan sebaiknya menggunakan masing-masing format.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Web dan CSS |
| RGB | rgb(59, 130, 246) | Tampilan layar |
| HSL | hsl(217, 91%, 60%) | Penyesuaian warna yang intuitif |
| HSV | hsv(217, 76%, 96%) | Alat desain |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Cetak |
Desain web & UI
Ambil warna dari mockup, tangkapan layar, atau referensi inspirasi, lalu gunakan kode HEX dan HSL untuk membangun palet antarmuka yang konsisten. HSL memudahkan Anda menyesuaikan kecerahan dan saturasi tanpa kehilangan rona warna aslinya.
Pengembangan front-end
Salin kode HEX atau RGB langsung ke dalam variabel CSS, token desain, atau tema aplikasi Anda. Dengan nilai yang tepat, Anda memastikan warna di kode benar-benar cocok dengan desain, tanpa selisih akibat penebakan manual.
Cetak & branding
Untuk materi cetak seperti brosur, kartu nama, dan kemasan, Anda memerlukan nilai CMYK, bukan RGB. Alat ini memberikan konversi CMYK secara instan sehingga warna merek Anda tetap konsisten dari layar hingga hasil cetak.
Aksesibilitas
Gunakan pemeriksa kontras untuk memastikan teks Anda memenuhi standar WCAG AA atau AAA. Rasio kontras yang cukup membuat konten Anda dapat dibaca oleh semua pengguna, termasuk mereka dengan gangguan penglihatan.
Perbandingan
Banyak pemilih warna daring hanya menampilkan kode dasar dan dipenuhi iklan. Berikut perbandingan alat kami dengan imagecolorpicker.com pada fitur-fitur yang paling penting bagi desainer dan pengembang.
| Model warna | HEX, RGB, HSL, HSV, dan CMYK | Umumnya hanya HEX dan RGB |
| CMYK untuk cetak | Ya, ditampilkan secara instan | Tidak tersedia |
| Pemeriksa kontras WCAG | Ya, dengan status AA/AAA | Tidak |
| Harmoni warna | Ya, enam jenis harmoni | Terbatas atau tidak ada |
| Iklan | Bebas iklan | Menampilkan iklan |
Pertanyaan yang sering diajukan
Bagaimana cara mengambil warna dari gambar?
Unggah atau seret gambar ke area unggah, aktifkan pipet (eyedropper), lalu klik pada piksel yang warnanya ingin Anda ambil. Kode HEX, RGB, HSL, HSV, dan CMYK akan langsung muncul dan siap disalin.
Apa itu kode warna HEX?
Kode HEX adalah representasi warna dalam sistem heksadesimal yang diawali tanda pagar, misalnya #3B82F6. Enam digitnya menyatakan intensitas merah, hijau, dan biru (masing-masing dua digit) dan merupakan format warna yang paling umum digunakan di web dan CSS.
Bagaimana cara mengonversi RGB ke HEX?
Setiap komponen RGB (0–255) diubah menjadi dua digit heksadesimal, lalu digabung menjadi #RRGGBB. Anda tidak perlu menghitung manual — alat ini menampilkan nilai HEX dan RGB dari warna yang sama secara berdampingan sehingga konversinya otomatis.
Bagaimana cara membuat palet warna dari foto?
Setelah mengunggah foto, gunakan fitur ekstrak palet. Alat ini menganalisis gambar dan menarik warna-warna dominan secara otomatis. Anda dapat menyimpan swatch tersebut dan mengekspornya sebagai CSS, JSON, atau PNG.
Bagaimana cara memeriksa kontras warna untuk aksesibilitas?
Buka pemeriksa kontras, lalu tetapkan warna teks dan warna latar belakang. Alat ini menghitung rasio kontras dan menunjukkan apakah kombinasi tersebut lolos standar WCAG AA atau AAA untuk teks normal maupun teks besar.
Apakah alat ini gratis dan menjaga privasi?
Ya. Pemilih warna ini sepenuhnya gratis tanpa iklan, dan seluruh pemrosesan gambar berlangsung di dalam browser Anda. Gambar Anda tidak pernah diunggah ke server mana pun, sehingga data Anda tetap privat.
