MUTools

Lainnya

Color Picker

Alat Color Picker adalah alat untuk mengambil warna (kode warna) dari gambar. Muat gambar yang Anda unggah atau URL gambar, lalu sambil memperbesar dengan loupe yang ditampilkan, Anda dapat mengambil warna per piksel hanya dengan mengeklik.

Seret gambar ke sini

atau

Mendukung PNG / JPG / WebP / GIF / BMP / SVG (maksimal 20MB). .png,.jpg,.jpeg,.webp,.gif,.bmp,.svg

Warna yang diambil0 warna

Klik piksel pada gambar, dan warnanya akan ditambahkan di sini.

Alat Terkait

Pembuat Kode QR

Buat kode QR untuk URL, Wi-Fi, email, SMS, telepon, kontak, dan acara. Atur ukuran, warna, logo; QR tanpa kedaluwarsa. Berjalan sepenuhnya di browser Anda.

Undian

Pilih 1–N secara acak dari daftar nama atau rentang angka, dengan mode tanpa pengulangan, animasi gulungan, dan riwayat. Berjalan sepenuhnya di browser Anda.

Timer Pomodoro

Timer Pomodoro online gratis: siklus fokus 25/5 menit, progres melingkar, alarm, layar penuh, dan jendela pop-out. Berjalan sepenuhnya di browser Anda.

Konverter Kode Warna

Konversi kode warna antara HEX, RGB, HSL, HSV, OKLCH, beserta alpha dan referensi CMYK. Salin format apa pun sekali klik. Berjalan sepenuhnya di browser Anda.

Pemeriksa Kontras

Cek rasio kontras warna terhadap WCAG 2.1/2.2 AA dan AAA, dengan saran warna lulus, simulasi buta warna, dan APCA. Berjalan sepenuhnya di browser Anda.

Konverter Satuan

Konversi satuan panjang, berat, suhu, luas, volume, dan kecepatan — cm ke inci, °C ke °F, kg ke pound, dan lainnya. Berjalan sepenuhnya di browser Anda.

Apa itu alat Color Picker?

Alat Color Picker adalah alat untuk mengambil warna (kode warna) dari gambar. Muat gambar yang Anda unggah atau URL gambar, lalu sambil memperbesar dengan loupe yang ditampilkan, Anda dapat mengambil warna per piksel hanya dengan mengeklik.

Warna yang diambil dapat ditampilkan dalam 3 format yang dapat dialihkan: HEX (#RRGGBB), RGB, dan HSL. Tingkat pembesaran loupe memiliki 3 level: 5x / 10x / 20x. Ambil beberapa warna untuk membuat palet, lalu salin ke clipboard dalam format JSON atau variabel CSS, sehingga dapat langsung Anda tempel ke mockup desain, style guide, atau kode.

Pada browser berbasis Chrome, Anda juga dapat menggunakan "Ambil warna dari layar" (EyeDropper API), yang memungkinkan Anda menyedot warna tidak hanya dari gambar tetapi dari seluruh layar desktop. Gambar yang dimuat seluruhnya diproses di dalam browser pengguna dan tidak dikirim ke server eksternal. Berjalan sepenuhnya di browser Anda.

Cara penggunaan

  1. Unggah berkas gambar, atau tempel URL gambar untuk memuatnya.
  2. Arahkan kursor ke atas gambar untuk menampilkan loupe. Pilih tingkat pembesaran loupe (5x / 10x / 20x).
  3. Klik lokasi yang ingin Anda periksa per piksel, dan warna pada titik tersebut akan ditambahkan ke palet.
  4. Periksa warna dengan mengalihkan format tampilan antara HEX / RGB / HSL.
  5. Pada browser yang mendukung, Anda juga dapat mengambil warna dari posisi mana pun di layar desktop dengan tombol "Ambil warna dari layar".
  6. Anda dapat mengekspor palet yang diambil sekaligus dengan "Salin JSON" atau "Salin variabel CSS".

Skenario penggunaan

  • Desainer web / front-end engineer yang ingin mengambil skema warna dari mockup desain dan mengimplementasikannya sebagai variabel CSS situs web.
  • Desainer UI yang ingin menganalisis skema warna dari tangkapan layar situs pesaing atau desain referensi.
  • Penanggung jawab branding yang ingin mengambil warna merek dari foto atau materi untuk membuat panduan skema warna.
  • Ilustrator / fotografer yang ingin mengambil warna pada bagian tertentu dari ilustrasi atau foto secara presisi.
  • Pengguna bisnis yang ingin menyelaraskan warna diagram pada materi atau presentasi berdasarkan gambar referensi.

Hal yang perlu diperhatikan

  • "Ambil warna dari layar" (EyeDropper) hanya tersedia pada sebagian browser berbasis Chrome. Pada browser yang tidak mendukung seperti Firefox / Safari, fitur ini tidak ditampilkan.
  • Saat memuat dari URL gambar, jika server gambar target tidak mengizinkan CORS (Cross-Origin Resource Sharing), pengambilan warna (getImageData) dapat gagal.
  • Warna diambil dalam ruang warna sRGB. Untuk gambar dengan gamut lebar (seperti Display P3), nilai yang ditampilkan adalah hasil konversi ke sRGB.
  • Warna yang ditampilkan di loupe terkadang terlihat berbeda dengan warna saat dilihat pada keseluruhan gambar (pengaruh piksel di sekitarnya).
  • Alat ini mengambil warna per piksel. Tujuannya berbeda dari "ekstraksi warna representatif keseluruhan gambar" menggunakan AI.

Pertanyaan yang sering diajukan

Apakah gambar diunggah ke server?
Tidak diunggah. Seluruh proses pengambilan warna berjalan sepenuhnya di dalam browser Anda. Anda pun dapat menggunakannya dengan tenang untuk materi desain internal atau foto pribadi.
Saya memasukkan URL gambar tetapi warnanya tidak bisa diambil.
Jika sisi host gambar tidak mengizinkan CORS (akses lintas asal), pengambilan warna tidak dapat dilakukan karena ketentuan browser. Sebagai solusinya, silakan unduh gambar ke lokal lalu coba unggah.
Apa perbedaan HEX / RGB / HSL?
HEX adalah notasi heksadesimal #RRGGBB, RGB adalah format yang menyatakan kecerahan merah, hijau, dan biru dalam rentang 0–255, sedangkan HSL adalah format yang menyatakan dengan 3 unsur yaitu hue, saturasi, dan kecerahan. Pada CSS, HEX dan RGB banyak digunakan, sementara HSL berguna saat mendesain dengan penyetelan halus berfokus pada hue. Pada alat ini, Anda dapat mengalihkan warna yang sama antara 3 format hanya dengan satu klik.
"Ambil warna dari layar" tidak muncul.
Fitur ini hanya ditampilkan pada browser berbasis Chrome yang mendukung EyeDropper API (seperti Google Chrome / Microsoft Edge / Brave). Karena Firefox dan Safari tidak mendukungnya, silakan gunakan metode mengunggah gambar.
Apakah warna yang diambil bisa dibawa ke Figma / Sketch / Photoshop?
Jika Anda menyalin HEX apa adanya, warna tersebut dapat ditempel di hampir semua alat desain. Jika ingin membawa beberapa warna sekaligus, ekspor string dengan "Salin JSON" atau "Salin variabel CSS" lalu impor melalui plugin atau fitur impor yang sesuai.