Pemilih Warna Gambar

Ambil warna apa pun dari gambar — HEX, RGB dan HSL

Color picker gambar gratis ini mengubah foto apa pun menjadi sumber warna yang bisa diklik: masukkan foto, screenshot, atau logo (atau tempel dengan Ctrl+V), arahkan kursor untuk melihat loupe piksel yang diperbesar, lalu klik untuk mendapatkan kode HEX, RGB, dan nilai HSL yang tepat — langsung tersalin ke clipboard. Riwayat pengambilan menyimpan 16 warna terakhir Anda sehingga bisa mengambil beberapa corak dari satu gambar.

Gambar dibaca oleh canvas API browser Anda dan tidak pernah dikirim ke mana pun. Ini membuatnya aman untuk desain yang belum dipublikasikan, logo klien, dan pekerjaan sensitif — berbeda dengan imagecolorpicker.com yang mengunggah file Anda ke server. Tanpa pendaftaran, tanpa akun, tanpa iklan yang mengganggu alur kerja.

Loupe pembesar untuk pengambilan warna yang presisi

Mengklik piksel yang tepat itu penting — tepi anti-aliasing, gradien, dan teks penuh dengan corak di antara warna. Loupe saat hover memperbesar piksel di sekitar kursor dengan crosshair tepat di piksel yang akan Anda ambil, sehingga Anda bisa mendapatkan warna dari gambar secara presisi: warna solid tombol, bukan tepinya yang buram, atau area padat logo, bukan artefak kompresi JPEG.

Gambar tetap dijaga dalam kualitas piksel penuh (foto besar hanya diskalakan untuk tampilan), dan setiap nilai diperbarui secara langsung saat Anda menggerakkan kursor. Klik, dan kode hex langsung ada di clipboard Anda.

Ekstraksi palet warna otomatis

Selain pengambilan satu piksel, alat ini juga mengekstrak palet warna dominan gambar secara otomatis — delapan swatch yang diurutkan berdasarkan seberapa besar area gambar yang mereka tutupi, masing-masing diberi label kode hex-nya. Ini adalah cara tercepat mengubah foto menjadi skema warna: moodboard brand, tema web dari gambar hero, atau palet interior dari foto inspirasi.

Ekstraksi ini mengelompokkan piksel menjadi klaster dan merata-ratakan setiap klaster, sehingga swatch yang dihasilkan benar-benar mewakili karakter gambar, bukan piksel-piksel yang menyimpang. Klik swatch mana pun untuk menyalinnya, atau gunakan 'Copy all' untuk daftar dipisah koma yang siap ditempel ke variabel CSS, dokumen desain, atau catatan.

Ambil warna dari layar dengan EyeDropper API

Butuh warna yang tidak ada di gambar tersimpan — situs web yang sedang aktif, aplikasi lain, atau frame video? Tombol Pick from screen membuka EyeDropper native browser Anda (Chrome dan Edge), memungkinkan Anda mengambil sampel piksel mana pun di mana saja di layar Anda. Warna yang diambil masuk ke panel dan riwayat HEX/RGB/HSL yang sama seperti pengambilan dari gambar.

Pada browser tanpa API ini (Safari, Firefox), alur tempel menutupi kekurangan itu: tekan PrtScn (atau Cmd+Shift+4 di Mac), lalu Ctrl+V langsung ke halaman ini — tanpa perlu menyimpan file screenshot terlebih dahulu. Pola ini juga berfungsi untuk mengambil sampel dari PDF yang terbuka di browser atau frame video.

Perbandingan dengan imagecolorpicker.com, Adobe Color, dan Canva

imagecolorpicker.com adalah alternatif paling populer dan menawarkan fitur serupa, tetapi mengunggah gambar Anda ke server setiap kali digunakan dan menampilkan iklan. Adobe Color mengekstrak palet dari foto tetapi memerlukan akun Adobe, mengirim gambar ke server Adobe, dan tidak menawarkan pengambilan satu piksel dengan loupe zoom — ini alat palet, bukan eyedropper. Alat berbayar Adobe (Photoshop, Illustrator) memang menawarkan pengambilan eyedropper yang presisi, tetapi memerlukan langganan mulai sekitar $20/bulan.

Color picker Canva hanya berfungsi pada gambar yang sudah ada di dalam proyek Canva. macOS Digital Color Meter dan Windows PowerToys Color Picker adalah alat tingkat layar yang berfungsi di mana saja di desktop tetapi tidak mengekstrak palet dari file. Coolors.co bisa menghasilkan palet dari gambar tetapi mengirim file ke servernya. Alat ini menggabungkan loupe zoom, ekstraksi palet, eyedropper layar, riwayat 16 warna, output HEX/RGB/HSL, dan salin dengan sekali klik — semuanya di sisi klien, gratis, dan tanpa iklan.

Dibuat untuk desainer dan developer

Setiap output tinggal satu klik dari clipboard Anda dalam format yang siap pakai: HEX untuk CSS dan Tailwind, RGB untuk canvas dan kode, HSL untuk penyesuaian palet yang sistematis. Menemukan warna brand? Alat pendamping UtiloKit membawanya lebih jauh — cek terhadap warna teks di Contrast Checker, bangun harmoni di Color Palette Generator, atau campur di Color Mixer.

Karena seluruh alat ini berjalan di sisi klien, ia dimuat cepat, berfungsi offline setelah dibuka, dan tidak pernah menyandera gambar Anda demi tayangan iklan. Masukkan, klik, salin — itulah seluruh alur kerjanya. Di perangkat mobile, ketuk untuk mengambil sampel piksel dan perbesar dengan pinch terlebih dahulu jika perlu menyasar titik presisi pada gambar yang padat detail.

Model warna dijelaskan: RGB, HSL, HSV, dan lainnya

RGB adalah model warna aditif — ia mensimulasikan cahaya. Ketika ketiga kanal bernilai 0, Anda mendapat hitam murni (tanpa cahaya), dan ketika semuanya 255, Anda mendapat putih (intensitas penuh di setiap kanal). Ini adalah model native untuk layar dan yang diekspos oleh canvas browser. CMYK adalah kebalikannya: model subtraktif untuk tinta, di mana 0,0,0,0 adalah kertas putih dan 0,0,0,100 (tinta hitam 100%) adalah hitam. Ketika Anda mengambil warna web dan perlu menyerahkannya ke percetakan, konversi ke CMYK yang benar memerlukan alur kerja color-managed — bukan rumus sederhana — karena tinta di kertas dan cahaya dari layar mencakup gamut yang berbeda.

HSL (Hue 0–360°, Saturation 0–100%, Lightness 0–100%) mengungkapkan kembali titik RGB yang sama dalam bentuk yang sesuai dengan cara berpikir desainer. Lightness 50% adalah warna 'murni'; naikkan untuk tint, turunkan untuk shade, tanpa menyentuh hue. HSV/HSB (Hue, Saturation, Value/Brightness) menggunakan sumbu hue yang sama tetapi mengganti Lightness dengan Value — di mana Value 100% adalah bentuk paling cerah dari sebuah hue (bukan putih). Color picker Photoshop menggunakan HSB; CSS menggunakan HSL. Perbedaannya halus tetapi penting saat Anda membangun palet sistematis: pusat lightness 50% pada HSL menjaga hue tetap sebanding secara persepsi, sementara sumbu value pada HSB memampatkan palet ke arah hitam di ujung bawah.

Untuk pekerjaan tingkat lanjut ada model yang seragam secara persepsi. LAB (CIELAB) dirancang agar langkah numerik yang sama terlihat seperti langkah visual yang sama bagi mata manusia — berbeda dengan RGB, di mana lompatan dari 200 ke 210 pada kanal biru terlihat lebih kecil dibanding lompatan yang sama pada kanal hijau. LAB digunakan dalam pemrosesan gambar, ilmu warna, dan metrik Delta E (ΔE) untuk mengukur seberapa berbeda dua warna terlihat: ΔE di bawah 1 tidak terlihat oleh kebanyakan orang, ΔE 1–2 hanya terdeteksi oleh pengamat terlatih, dan ΔE di atas 10 adalah perbedaan yang jelas terlihat. OKLCH adalah penerus modern untuk pekerjaan web — ia membawa keseragaman persepsi ke CSS melalui fungsi oklch() di CSS Color Level 4, memungkinkan Anda melangkah melalui lightness atau chroma dalam interval yang merata dan terlihat rata di layar.

Cara kerja pengambilan warna berbasis canvas

Saat Anda memuat gambar ke alat ini, gambar itu digambar ke elemen HTML Canvas yang tersembunyi pada dimensi piksel aslinya. Mengklik memanggil ctx.getImageData(x, y, 1, 1), yang mengembalikan array piksel RGBA empat elemen — merah, hijau, biru, dan alpha, masing-masing sebagai integer dari 0 hingga 255. Untuk membaca piksel sembarang dari pembacaan kembali canvas yang lebih besar, indeks ke dalam Uint8ClampedArray datar yang dikembalikan oleh getImageData mengikuti rumus: index = (y × imageWidth + x) × 4. Empat nilai pada offset tersebut adalah R, G, B, dan A. Mengonversi ke HEX tinggal memformat setiap kanal sebagai string heksadesimal dua digit dan menggabungkannya: # + setiap kanal yang di-pad nol menjadi dua digit hex.

Anti-aliasing adalah alasan mengapa mengambil warna dari tepi bisa menyesatkan. Ketika browser atau editor gambar merender teks atau bentuk, piksel di batas dicampur antara warna latar depan dan apa pun di belakangnya — menghasilkan nilai antara. Piksel tepi huruf yang terlihat 'merah' mungkin sebenarnya rgb(210, 120, 110): sebagian isian merah, sebagian latar putih, tercampur menjadi satu. Loupe zoom di alat ini memperbesar grid piksel sehingga Anda bisa melihat piksel-piksel antara ini dengan jelas dan mengklik area isian solid, bukan piksel tepi yang tercampur.

EyeDropper Web API, tersedia di Chrome 95+ dan Edge, melangkah lebih jauh dari canvas: ia mengambil sampel piksel mana pun di seluruh layar Anda — tab browser lain, aplikasi native, pemutar video. Ia mengembalikan string sRGBHex melalui antarmuka berbasis promise. Berbeda dengan pendekatan canvas, ia tidak memerlukan sumber warna dimuat ke browser sama sekali. Firefox dan Safari belum mendukungnya, itulah sebabnya fallback tempel-screenshot ada: logika pembacaan piksel canvas yang sama menangani gambar screenshot begitu sampai di browser.

Akurasi warna, gamut, dan kalibrasi layar

Nilai HEX yang sama bisa terlihat cukup berbeda di berbagai monitor karena layar bervariasi dalam gamut warna — rentang warna yang bisa dihasilkan perangkat keras secara fisik — dan dalam apakah layar tersebut sudah dikalibrasi. sRGB adalah ruang warna standar web: warna hex yang ditulis dalam CSS diasumsikan sebagai sRGB, dan layar sRGB yang terkalibrasi dengan baik akan mereproduksinya secara akurat. Monitor yang tidak dikalibrasi mungkin menampilkan hex yang sama terlalu hangat, terlalu dingin, atau terlalu cerah karena output native panelnya belum dipetakan ke referensi sRGB.

Layar wide-gamut — yang mendukung ruang warna Display P3, yang mencakup sekitar 26% lebih banyak warna dibanding sRGB — menambah lapisan kompleksitas lain. Foto yang diambil dengan iPhone atau dijepret dalam ProPhoto RAW bisa mengandung warna P3 yang sepenuhnya berada di luar segitiga sRGB. Ketika browser merender gambar itu dan Anda mengambil sampel piksel, Anda mendapat nilai yang dipetakan ke sRGB — yang mungkin merupakan aproksimasi yang terpotong atau bergeser dari warna wide-gamut sebenarnya. CSS Color Level 4 mengatasi ini dengan fungsi color(display-p3 r g b) dan query @media (color-gamut: p3), memungkinkan Anda menyajikan warna P3 ke layar yang mampu menampilkannya. API canvas getImageData selalu mengembalikan nilai sRGB, sehingga kode HEX dari alat ini selalu aman untuk penggunaan web — merepresentasikan persis apa yang sedang dirender browser.

Delta E (ΔE) adalah metrik standar untuk mengukur perbedaan warna secara persepsi. Ia dihitung dalam ruang LAB, di mana jarak Euclidean antara dua titik LAB berkorelasi dengan seberapa berbeda manusia mempersepsikan warna tersebut. ΔE di bawah 1 tidak terlihat oleh mata telanjang; ΔE antara 1 dan 2 hanya bisa dideteksi oleh pengamat berpengalaman dalam kondisi terkontrol; ΔE di atas 2 terlihat oleh kebanyakan orang dalam perbandingan berdampingan; ΔE di atas 10 merepresentasikan warna yang jelas berbeda. Ini penting saat membandingkan warna hasil pengambilan piksel dengan nilai brand resmi — ΔE sebesar 3 antara hex hasil ekstraksi Anda dan referensi Pantone mungkin tidak terlihat di layar tetapi signifikan dalam cetakan.

Aksesibilitas warna yang diambil: rasio kontras dan WCAG

Mengekstrak warna dari gambar hanyalah langkah pertama — menggunakan warna itu di UI berarti memverifikasi bahwa teks yang ditempatkan di atas atau di dekatnya tetap terbaca. WCAG 2.1 mendefinisikan rasio kontras minimum antara latar depan dan latar belakang: 4,5:1 untuk teks ukuran normal pada Level AA, 3:1 untuk teks besar (18pt+ atau 14pt tebal) pada AA, dan 7:1 untuk semua teks pada Level AAA yang lebih ketat. Rasio ini dihitung dari luminansi relatif — jumlah tertimbang dari kanal R, G, dan B yang telah dilinearisasi (Y = 0,2126R + 0,7152G + 0,0722B, dengan setiap kanal diekspansi gamma terlebih dahulu). Kontras kemudian dihitung sebagai (L1 + 0,05) / (L2 + 0,05) di mana L1 adalah luminansi yang lebih terang.

Warna brand yang diekstrak dari foto sering gagal memenuhi ambang ini. Amber cerah yang diambil dari foto sunset mungkin terlihat kuat terhadap putih di moodboard tetapi hanya menghasilkan rasio kontras 2,8:1 — cukup untuk elemen dekoratif, tetapi gagal untuk teks isi. Solusinya biasanya adalah menggelapkan hue untuk penggunaan teks dan menyimpan warna hasil ekstraksi asli untuk latar belakang, border, atau ikon. HSL membuat penyesuaian ini sistematis: pertahankan Hue dan Saturation tetap, lalu turunkan Lightness secara bertahap sampai pengecekan kontras lolos. Lightness 35–40% adalah rentang target umum untuk hue cerah yang perlu lolos 4,5:1 terhadap putih.

Elemen interaktif menambahkan persyaratan lain di bawah WCAG 1.4.11 (Non-text Contrast): komponen UI seperti tombol, input, dan focus ring memerlukan setidaknya rasio 3:1 terhadap warna di sekitarnya — bukan hanya 4,5:1 untuk teks labelnya. Teal brand yang lolos AA untuk teks mungkin masih gagal 3:1 terhadap latar kartu putih saat digunakan sebagai border tombol. Setelah mengekstrak palet dengan alat ini, tempel nilai HEX kunci ke Contrast Checker UtiloKit untuk memvalidasi setiap pasangan latar depan/latar belakang sebelum mengunci warna ke sistem desain Anda.