Grab the exact color from any image

Unggah JPG, PNG, WebP, atau GIF apa pun dan klik di mana saja pada gambar yang ditampilkan — piksel persis di bawah kursor Anda akan diambil dan ditampilkan sebagai HEX, RGB, dan HSL dengan salin satu klik untuk setiap format. Sempurna untuk mencocokkan warna merek, mengambil contoh warna dari foto, atau menangkap nuansa aksen dari mockup desain.

Klik piksel mana pun dan alat pemilih warna ini menampilkan kode warna HEX-nya (misalnya #FF6B35) bersama RGB dan HSL — kode warna HTML/CSS yang sama yang Anda tempel langsung ke stylesheet, token desain, atau atribut HTML. Tekan Salin untuk mengambil kode hex dalam satu klik.

Gambar diperkecil hingga 320 piksel pada sisi terpanjangnya, lalu setiap piksel dikelompokkan berdasarkan 4 bit teratas per channel. Kelompok yang paling padat dirata-ratakan kembali menjadi warna 8-bit penuh, diurutkan berdasarkan frekuensi, dan dikembalikan sebagai palet Anda. Hasilnya biasanya 5-24 warna dominan yang merangkum gambar secara visual.

Ya. Tombol Unduh menghasilkan dua format: blok variabel CSS yang siap ditempelkan ke selektor :root (--color-1, --color-2…), dan file JSON berisi hex, komponen RGB, dan persentase bobot untuk setiap warna. Kedua format terintegrasi dengan rapi ke dalam design token, konfigurasi Tailwind, dan pustaka palet.

Tidak — pemilihan warna dan ekstraksi palet sepenuhnya terjadi di peramban Anda menggunakan HTML canvas API. Gambar tetap berada di perangkat Anda, sehingga alat ini aman untuk foto produk yang belum dirilis, draf mockup, dan aset merek yang terikat NDA.

Untuk pekerjaan identitas merek, 5-8 warna adalah titik ideal — menangkap tema dominan tanpa mengencerkan pilihan aksen. Untuk visualisasi data, kami merekomendasikan 10-16 warna agar Anda memiliki cukup rona kategoris. Slider memungkinkan Anda memilih antara 5 dan 24.

Piksel dengan alpha di bawah 128 diabaikan, sehingga latar belakang transparan tidak mengotori palet dengan warna "latar belakang". Ini membuat Pemilih Warna Gambar sangat bagus untuk cutout produk, karya seni stiker, dan subjek yang terisolasi.

HEX (#RRGGBB) adalah yang paling ringkas dan merupakan format bawaan yang digunakan CSS, Figma, dan Sketch. RGB menampilkan tiga nilai komponen dari 0-255 — berguna saat bekerja dengan data gambar secara programatis. HSL (hue, saturasi, lightness) intuitif untuk menyesuaikan warna: geser hue untuk mengubah keluarga warna, sesuaikan lightness untuk tint dan shade.

Yes. Free, free account required to download, no limits on image size or number of palettes extracted. There is nothing to install — the entire tool is a single web page.

No image needed. The Color Picker & Wheel at the top works on its own — drag the saturation/brightness square and the hue slider, or type any HEX, RGB or HSL value to dial in an exact color. Uploading an image is optional, just for eyedropping colors out of a photo.

Pick your base color and the Color harmonies panel instantly builds complementary, analogous, triadic, split-complementary, tetradic and monochromatic schemes using color-wheel theory. Click any swatch to copy its HEX code.

Pada Color Picker & Wheel mandiri, atur warna Anda dan panel akan menampilkan rasio kontrasnya terhadap putih murni dan hitam murni beserta peringkat WCAG — AAA, AA, AA Large, atau Fail. Gunakan ini sebelum menyelesaikan warna teks atau tombol agar tetap terbaca dan memenuhi pedoman aksesibilitas WCAG 2.1.

Ya. Color Picker & Wheel mandiri menampilkan warna CSS bernama yang paling cocok di sebelah nilai HEX, RGB atau HSL apa pun yang Anda tetapkan, yang praktis untuk mendeskripsikan nuansa dengan cepat dalam brief, tiket atau spesifikasi desain tanpa menebak-nebak.

Klik Acak di Pemilih & Roda Warna untuk melompat ke warna baru, lalu gunakan panel Harmoni warna di bawahnya untuk melihat palet komplementer, analog, triadik, dan palet terkoordinasi lainnya yang dibangun dari warna itu — cara cepat untuk menemukan titik awal saat Anda mendesain dari nol alih-alih mengambil sampel dari gambar yang ada.

Gunakan dropdown Size di atas palet untuk memilih 5, 8, 10, 16, atau 24 warna dominan — palet dihitung ulang seketika saat Anda mengubahnya. Kombinasikan ukuran kecil seperti 5 untuk palet brand yang bersih dengan pipet picked-color untuk mengambil satu atau dua corak aksen persis yang mungkin diratakan oleh ekstraksi otomatis.

Ya — Color Picker & Wheel mandiri menampilkan rasio kontras warna Anda saat ini terhadap putih murni dan hitam murni tepat di bawah kotak warna, diberi label AAA, AA, AA Large, atau Fail sesuai ambang WCAG (7:1, 4.5:1, 3:1). Gunakan untuk memeriksa apakah pasangan teks/latar belakang memenuhi standar aksesibilitas sebelum Anda menetapkan warna desain.

Color Picker & Wheel otomatis mencocokkan warna apa pun yang telah Anda atur — melalui pemilih, kotak HEX, atau kolom RGB/HSL — dengan nama warna CSS standar terdekatnya, ditampilkan sebagai 'Closest name' di samping swatch. Ini cara cepat untuk mendeskripsikan warna secara verbal atau menemukan padanan web-safe terdekatnya.

Ya — setiap klik atau ketuk pada gambar yang diunggah menambahkan kotak warna baru ke daftar Warna Terpilih Anda alih-alih mengganti yang terakhir, jadi Anda dapat membangun kumpulan warna piksel yang tepat dari berbagai bagian foto. Hapus satu kotak warna dengan tombol ×-nya, atau bersihkan seluruh daftar dengan Bersihkan terpilih.

Ya — tombol Acak (ikon shuffle) di Color Picker & Wheel melompat ke kombinasi rona, saturasi, dan kecerahan baru dengan sekali klik, berguna untuk memecahkan kebuntuan kreatif atau menjelajahi palet yang tidak akan Anda ketik secara manual. HEX, RGB, HSL, dan kotak harmoni di bawahnya semuanya diperbarui bersama.

Pada layar sentuh, seret jari Anda di sepanjang gambar untuk melihat pratinjau warna di bawahnya dalam swatch mengambang langsung, lalu angkat jari Anda untuk menambahkan piksel persis itu ke daftar Warna Terpilih Anda — tanpa ketukan konfirmasi terpisah. Dropdown ukuran palet dan tombol ekspor yang sama bekerja identik di perangkat seluler.

Ya. Roda warna di bagian atas halaman memiliki tombol Random yang melompat ke warna acak dan langsung menampilkan kode HEX, RGB, dan HSL-nya, nama warna terdekatnya, rasio kontras pada latar putih dan hitam, serta seperangkat harmoni lengkap — komplementer, analog, triadik, split complementary, tetradik, dan monokromatik. Ini cara cepat untuk menjajaki titik awal sebuah palet.

Alat ini mengambil sampel warna dari gambar yang diunggah atau dari roda warna bawaan, bukan membaca layar Anda secara langsung. Cara tercepat untuk mendapatkan pengambil warna layar: ambil tangkapan layar, seret ke halaman ini, lalu klik piksel yang Anda inginkan — Anda mendapatkan kode HEX, RGB, dan HSL yang sama tanpa perlu memasang ekstensi apa pun, dan tangkapan layar tersebut tidak pernah meninggalkan browser Anda.

Ya — Pixoate mendukung pemrosesan batch dan massal. Beralih ke mode Batch, tambahkan hingga 60 gambar di Premium atau 200 gambar di Pro, atur pilihan Anda satu kali, dan setiap gambar diproses dengan pengaturan yang sama sebelum Anda mengunduh satu spreadsheet — satu baris palet per gambar. Pemrosesan massal adalah fitur Premium; outputnya menggunakan kualitas dan pengaturan yang sama dengan mode tunggal.

Ya — dengan pemrosesan massal, Anda mengonfigurasi pengaturan satu kali dan pengaturan tersebut berlaku untuk setiap item dalam batch — hingga 60 gambar di Premium atau 200 gambar di Pro. Tidak perlu mengulangi pengaturan per item, dan ekstraksi Palet berjalan di browser Anda; hanya spreadsheet yang sudah jadi yang disimpan untuk diunduh.