Pemilih Warna Gambar

Cara kerja color picker

Unggah foto, tangkapan layar, atau logo lalu klik di mana saja. Alat ini membaca piksel tepat di titik itu dan menampilkan warnanya dalam HEX (misalnya #1e88e5) dan RGB (rgb(30, 136, 229)). Tombol Salin menyalin kode HEX ke clipboard. Begitu gambar dimuat, piksel di tengah langsung dibaca sehingga Anda segera melihat nilainya.

Setiap warna yang Anda klik masuk ke deretan sampel terbaru (hingga delapan), jadi Anda bisa mencoba beberapa titik — tombol, latar, judul — lalu membandingkannya sebelum memilih. Gambar dibaca di canvas dalam browser Anda dan tidak pernah diunggah.

HEX, RGB, dan HSL dengan bahasa sederhana

Ketiganya menggambarkan warna yang sama di layar, hanya cara penulisannya yang berbeda.

• HEX — #RRGGBB, tiga pasang digit heksadesimal untuk merah, hijau, dan biru, dari 00 sampai ff. Inilah yang diminta CSS, Figma, Canva, tema WordPress, dan sebagian besar kolom "warna brand".
• RGB — tiga kanal yang sama dalam angka desimal 0 sampai 255. #1e88e5 dan rgb(30, 136, 229) itu identik. Berguna di kode, Office, dan aplikasi yang memakai slider.
• HSL — hue (0–360° pada roda warna), saturasi, dan kecerahan dalam persen. Color picker ini tidak menampilkan HSL, tetapi aplikasi desain mana pun atau CSS bisa langsung mengonversi HEX. HSL berguna saat Anda ingin versi lebih terang atau lebih gelap dari warna yang dipilih: hue tetap, cukup ubah kecerahannya.

Mengambil warna dari tangkapan layar

Untuk meniru warna dari aplikasi, situs, atau cuplikan video, ambil tangkapan layar (Windows: Win + Shift + S; Mac: Cmd + Shift + 4; HP: tombol power + volume bawah, atau tombol samping + volume atas di iPhone) lalu taruh di sini.

Tips agar hasilnya akurat:

• Klik area yang rata. Bidik bagian tengah tombol, bukan tepinya — tepi sudah bercampur (antialiasing) dengan latar dan memberi warna peralihan.
• Foto punya noise. Piksel yang berdekatan dalam foto sedikit berbeda; coba beberapa titik dan pilih yang paling mewakili.
• Tangkapan layar bisa menggeser warna. Mode malam, Night Shift, HDR, atau layar dengan manajemen warna bisa mewarnai hasil tangkapan. Matikan dulu jika warna brand harus persis.
• JPG yang terlalu dikompres melenceng. JPG yang disimpan berkali-kali tampak belang di dekat tepi. Gunakan PNG atau SVG asli logo bila ada.
• Area transparan tidak punya warna sebenarnya; mengkliknya menghasilkan hitam (#000000). Klik bagian logo yang terlihat.

Cek kontras sebelum memakai warna

Warna yang indah belum tentu terbaca sebagai teks. Pedoman aksesibilitas (WCAG) meminta kontras minimal 4,5:1 antara teks biasa dan latarnya, serta 3:1 untuk teks besar dan ikon. Abu-abu muda di atas putih atau biru sedang di atas biru tua sering tidak lolos.

Setelah mendapat warna teks dan latar, tempel kedua kode HEX ke pemeriksa kontras mana saja. Jika rasionya rendah, gelapkan teks atau terangkan latar — mengatur kecerahan di HSL adalah cara tercepat memperbaikinya tanpa keluar dari warna brand.

Kegunaan umum

• Mengetahui warna brand dari logo yang dikirim dalam bentuk gambar.
• Meniru warna tombol atau latar sebuah situs untuk desain Anda sendiri.
• Membuat palet dari foto untuk slide, konten media sosial, atau moodboard dekorasi.
• Memilih warna latar ikon Apple touch di pembuat favicon.

Alat terkait

• Potong objeknya dulu, lalu ambil warnanya tanpa latar: Hapus Background.
• Pisahkan area kecil agar klik lebih tepat: Potong Gambar.
• Butuh gambarnya sebagai kode untuk CSS? Gambar ke Base64.