Cara Mengetahui Kode Warna dari Gambar Apa Pun

Mengetahui kode warna yang persis adalah kebutuhan sehari-hari dalam desain: meniru warna sebuah logo referensi, mengambil palet dari foto inspirasi, menjaga konsistensi antarmateri dalam satu identitas visual. Metode yang paling efisien berbeda-beda tergantung situasi — apakah Anda punya file aslinya, apakah warnanya ada di gambar online, di sebuah situs, atau di foto hasil jepretan ponsel.

Memahami format kode warna

Sebelum masuk ke metodenya, pahami dulu tiga format yang paling sering dipakai untuk menuliskan warna secara digital:

HEX dan RGB membawa informasi yang sama, hanya ditulis dengan cara berbeda — keduanya selalu bisa saling dikonversi. HSL menjelaskan warna lewat rona, saturasi, dan kecerahan, sehingga lebih mudah dipakai untuk penyetelan manual. CMYK khusus untuk cetak.

Metode 1: Ekstraktor warna online (paling cepat)

Untuk mengenali warna dominan dari seluruh gambar — atau menunjuk satu piksel tertentu dengan presisi — ekstraktor warna online adalah jalan paling singkat. Cukup unggah gambarnya dan alat itu langsung mengenali warna yang paling banyak muncul, lengkap dengan kode HEX yang siap disalin.

Ekstrak Warna dari ImageTools menganalisis foto atau gambar apa pun dan menampilkan warna dominannya beserta kode HEX masing-masing. Semuanya berjalan langsung di browser — gambar Anda tidak pernah meninggalkan perangkat.

1. Buka alat Ekstrak Warna.
2. Unggah gambarnya atau seret file ke area yang tersedia.
3. Alat ini otomatis mengenali warna yang paling banyak muncul di gambar.
4. Klik warna mana pun untuk menyalin kode HEX-nya.

Metode 2: Memakai pipet warna bawaan browser (Chrome DevTools)

Kalau warna yang Anda cari ada di sebuah situs — di latar halaman, di tombol, atau di logo — Chrome sudah punya alat bawaan untuk itu.

1. Buka situsnya di Google Chrome.
2. Tekan F12 (atau klik kanan lalu pilih "Inspect").
3. Di panel DevTools, klik ikon kursor di pojok kiri atas (atau tekan Ctrl+Shift+C).
4. Arahkan kursor ke elemen mana pun di halaman — DevTools akan menampilkan properti CSS-nya, termasuk warna dalam HEX atau RGB.
5. Untuk membuka pemilih warna visual, klik kotak berwarna di samping nilai warna mana pun di panel CSS.

DevTools Chrome juga punya Color Picker bawaan: saat Anda mengklik kotak warna di panel gaya CSS, terbuka pemilih yang memungkinkan Anda menjelajahi spektrum dan melihat nilai HEX, RGB, HSL, dan HSLA sekaligus.

Metode 3: Pipet warna di Canva

Kalau Anda sedang bekerja di Canva dan ingin mengambil warna dari gambar yang sudah ada di proyek:

1. Pilih elemen yang warnanya ingin Anda ubah (teks, bentuk, atau latar).
2. Klik warna elemen itu di panel samping untuk membuka pemilih warna.
3. Di pemilih warna, klik ikon pipet (eyedropper).
4. Klik titik mana pun pada gambar di kanvas untuk mengambil warna persis piksel tersebut.
5. Kode HEX-nya akan muncul di kolom teks pemilih warna.

Metode 4: Pipet warna di Photoshop dan Illustrator

Photoshop

Dengan gambar sudah terbuka, pilih alat Eyedropper (pintasan: tombol I). Klik titik mana pun pada gambar — warna yang terambil muncul di kotak warna pada panel alat. Untuk melihat kode HEX, klik dua kali kotak warna itu (Color Picker terbuka) dan nilai HEX-nya ada di kolom kanan bawah.

Illustrator

Dengan file sudah terbuka, pilih sebuah objek lalu klik warna isian atau garis tepi di panel alat. Pada Color Picker yang terbuka, kode HEX ada di kolom bawah. Alternatifnya, pakai alat Eyedropper (pintasan: I) untuk mengambil warna dari titik mana pun di kanvas.

Metode 5: Ekstensi browser — ColorZilla

Ekstensi ColorZilla (tersedia untuk Chrome dan Firefox) menambahkan pipet warna permanen ke browser Anda. Setelah terpasang, Anda bisa:

• Mengambil warna piksel mana pun di situs mana pun dengan sekali klik.
• Melihat kodenya dalam HEX, RGB, dan HSL seketika.
• Menyalin nilainya dengan sekali klik.
• Membuka riwayat warna yang terakhir diambil.

Ini pilihan paling praktis bagi siapa pun yang sering mengambil warna dari situs tanpa harus membuka DevTools setiap kali.

Metode 6: Aplikasi pengambil warna di ponsel

Untuk mengenali warna benda fisik — warna dinding, produk, atau kemasan — maupun warna gambar di ponsel, ada aplikasi khusus:

• Color Grab (Android) — arahkan kamera ke permukaan apa pun dan kode HEX-nya terbaca secara langsung.
• Palette Cam (iOS/Android) — mengambil palet warna lengkap dari foto yang baru dijepret atau dari galeri.
• Canva (iOS/Android) — pipet warna di Canva mobile bekerja untuk gambar yang Anda impor.

Cara memakai kode warna yang sudah didapat

Setelah kode HEX sebuah warna diketahui, penggunaannya yang paling umum adalah:

Di CSS / pengembangan web

Pakai langsung di kode: color: #3ecf8e; atau background-color: #3ecf8e;. Untuk versi yang lebih terang atau lebih gelap, pakai HSL — menyetel kecerahan jauh lebih mudah daripada mengutak-atik nilai HEX secara manual.

Di Canva, Figma, atau Adobe

Tempelkan kode HEX ke kolom warna elemen mana pun. Semua aplikasi desain utama menerima HEX secara langsung.

Untuk menyusun palet lengkap

Begitu warna dasarnya diketahui, Palet otomatis menghasilkan kombinasi harmonis — komplementer, analogus, triad, dan monokromatik — lengkap dengan kode HEX, RGB, dan HSL yang siap dipakai di proyek Anda.

Untuk cetak

Konversikan HEX ke CMYK sebelum mengirimkannya ke percetakan. Warna di layar (RGB/HEX) dan warna cetak (CMYK) punya gamut yang berbeda — yang terlihat identik di monitor bisa bergeser cukup jelas saat dicetak. Aplikasi seperti Adobe Illustrator dan Affinity Designer melakukan konversi ini otomatis saat mengekspor untuk cetak.

Kenapa warna yang terambil bisa meleset dari yang Anda mau

Satu hal penting: foto hampir tidak pernah punya warna yang benar-benar seragam dalam satu area. Bidang yang tampak biru solid di sebuah foto bisa menyimpan puluhan variasi halus dari piksel ke piksel, akibat pencahayaan, kompresi JPG, dan noise kamera. Pipet warna mengambil warna persis satu piksel tertentu — yang bisa sedikit berbeda dari "biru umum" yang sebenarnya ingin Anda tiru.

Untuk area foto, lebih baik pakai ekstraktor yang menghitung warna dominan sebuah area — seperti yang dilakukan Ekstrak Warna — ketimbang mengambil satu piksel saja. Hasilnya adalah warna yang lebih mewakili dan lebih berguna untuk desain.

Pertanyaan yang sering diajukan