YappyKit

Pemilih warna dari gambar

Tunjuk bagian mana pun dari gambar untuk melihat hex, RGB, dan HSL, dan lihat beberapa warna penyusunnya. Masing-masing memberi tahu apakah teks di atasnya benar-benar terbaca. Tidak ada yang diunggah.

Cara kerjanya

Mengambil warna dari sebuah gambar adalah pekerjaan yang semestinya dilakukan sistem operasi dan hampir tidak pernah dilakukannya. Warna yang Anda mau ada di foto sebuah dinding, di tangkapan layar sebuah grafik, di logo yang dikirim orang sebagai JPEG, sedangkan yang Anda butuhkan adalah enam digit heksadesimal untuk ditempel ke lembar gaya.

Menunjuk sebuah piksel adalah bagian yang mudah. Gambar digambar satu banding satu dan dengan penghalusan dimatikan sebelum pikselnya dibaca, yang terdengar rewel padahal tidak: dengan penghalusan menyala, browser mengembalikan campuran piksel itu dengan tetangganya, jadi warna yang Anda dapat tidak pernah ada di gambar dan tidak cocok saat ditempel.

Paletnya bagian yang sulit, dan pendekatan standarnya punya kelemahan yang terkenal. Median cut memilah warna ke dalam kotak, lalu buku teks merata-ratakan tiap kotak, dan begitulah alat palet menghasilkan cokelat keruh yang tidak muncul di mana pun pada aslinya: rata-rata bunga merah dan daun hijau adalah lumpur. Di sini tiap contoh adalah piksel asli yang paling dekat dengan kotaknya, jadi setiap warna yang ditawarkan adalah warna yang bisa Anda tunjuk sendiri. Persentasenya dihitung terpisah, dengan menanyakan tiap piksel paling dekat ke contoh yang mana, sebab median cut sengaja memberi tiap kotak jumlah piksel yang sama, dan membaca itu sebagai persentase berarti mengklaim semua warna menempati bagian yang sama pada foto yang jelas-jelas sebagian besarnya langit.

Lalu ada angka yang menentukan apakah semua ini terpakai. Warna yang diambil dari foto hampir selalu berakhir di belakang teks, dan apakah itu berhasil bisa diukur: rasio kontras WCAG terhadap putih dan terhadap hitam, lengkap dengan ambangnya. Warna merek yang tampak indah di sebuah logo sering kali hanya 2,8:1 di atas putih, dan itu keputusan yang sebaiknya diambil dengan sengaja alih-alih ditemukan belakangan.

Cara memakainya

  1. 1 Pilih gambar, atau tempel langsung dari papan klip.
  2. 2 Ketuk di mana saja pada gambar untuk mengambil warna di titik itu.
  3. 3 Salin hex, RGB, atau HSL dengan sekali ketuk.
  4. 4 Atau ambil salah satu contoh warna di bawah, itulah warna-warna penyusun gambar.

Perlu diketahui

  • Tiap contoh adalah warna yang benar-benar ada di gambar, tidak pernah rata-rata dua warna yang ada.
  • Palet diurutkan menurut seberapa banyak bagian gambar yang diwakili tiap warna, bukan menurut rona.
  • Kontras memakai rasio WCAG: 4,5:1 ambang untuk teks isi dan 3:1 untuk teks besar.
  • Warna dibaca dengan penghalusan dimatikan, jadi itu piksel persisnya dan bukan campuran dengan tetangganya.
  • Tangkapan layar bekerja sebaik foto, dan itu cara cepat mengambil warna dari sebuah grafik.

Dukungan peramban

  • Chrome 94 ke atas
  • Firefox 93 ke atas
  • Safari 16.4 ke atas
  • Edge 94 ke atas

Ini versi paling lama yang punya semua yang dipakai alat ini. Angkanya dihitung dari alatnya sendiri, jadi ikut berubah kalau alatnya berubah.

Nomor versi diperiksa pada 2026-09-04.

Pertanyaan yang sering diajukan

Bagaimana mendapat kode hex sebuah warna di gambar?

Pilih gambarnya lalu ketuk bagian yang Anda mau. Hex, RGB, dan HSL muncul di bawahnya, dan sekali ketuk menyalin salah satunya. Pikselnya dibaca persis, tanpa penghalusan, jadi yang Anda tempel cocok dengan yang Anda tunjuk.

Bagaimana menemukan warna dominan sebuah gambar?

Warna-warna itu dihitung begitu gambar dimuat dan ditampilkan sebagai contoh warna, masing-masing berlabel seberapa banyak bagian gambar yang diwakilinya. Ketuk satu contoh untuk menjadikannya warna aktif dan melihat angka kontrasnya.

Kenapa alat palet lain memberi saya warna keruh?

Karena mereka merata-ratakan tiap kelompok warna yang ditemukan, dan rata-rata dua warna yang sangat berbeda adalah warna yang tidak ada pada keduanya. Alat ini justru mengambil piksel asli yang paling dekat dengan rata-rata itu, jadi bunga merah dan daun hijau menghasilkan merah dan hijau, bukan cokelat.

Apa arti angka-angka kontras itu?

Itu rasio kontras WCAG terhadap putih dan hitam, dari 1:1 sampai 21:1. Nilai 4,5:1 ke atas lulus AA untuk teks isi, 7:1 lulus AAA, dan 3:1 hanya cukup untuk teks besar. Di bawah 3:1 warnanya sama sekali tidak layak dipakai di belakang teks.

Bisakah saya mengambil warna dari tangkapan layar?

Bisa, dan ini salah satu kegunaan paling praktis di sini. Tempel tangkapan layar dengan Ctrl+V lalu ketuk batang sebuah grafik atau latar sebuah aplikasi untuk mendapat hex persisnya.

Apakah gambar saya diunggah?

Tidak. Gambar itu diurai dan dibaca di dalam tab browser ini oleh perangkat Anda sendiri, dan tidak ada salinannya yang dikirim ke mana pun. Anda bisa mengawasi tab Network di browser sambil bekerja.

Alat terkait

File Anda diproses di perangkat Anda dan tidak diunggah. Anda bisa memverifikasinya di alat pengembang browser Anda, pada tab Network.