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

Mengubah URL / kontak / Wi-Fi / email / acara / koordinat geografis / SMS / telepon / teks menjadi gambar kode QR. Ukuran, format, warna, dan logo dapat dipilih. Berjalan sepenuhnya di browser Anda.

Undian

Mengundi secara acak 1–N item dari daftar teks atau rentang angka. Mendukung tanpa pengulangan, animasi gulungan, dan penyimpanan riwayat undian. Berjalan sepenuhnya di browser Anda.

Timer Pomodoro

Timer Pomodoro online gratis yang mengulang 25 menit fokus dan 5 menit istirahat. Sebagai timer fokus untuk belajar dan bekerja, mendukung progres melingkar, suara alarm, layar penuh, dan tampilan pop-out yang selalu di depan. 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.