Langsung ke konten

Ambil warna dari gambar

Klik bagian mana saja pada gambar untuk mendapatkan nilai HEX, RGB, HSL, dan OKLCH serta mengekstrak palet warna; gambar dianalisis di perangkat Anda.

Letakkan gambar untuk memilih warnaatau klik untuk menelusuri · tempel tangkapan layar dengan Ctrl+V
Pilih gambarDiproses di perangkat Anda — tidak diunggah
Berjalan di browser Anda · tanpa unggahCara kerja

Cara menggunakan Ambil warna dari gambar

  1. 1

    Buka gambar

    Seret, pilih, atau tempel tangkapan layar, foto, atau logo hingga 25 MB — JPG, PNG, WebP, AVIF, HEIC, GIF, atau SVG.

  2. 2

    Bidik dengan kaca pembesar

    Arahkan kursor atau seret di atas gambar; kaca pembesar 11 × 11 piksel menampilkan piksel tepat di bawah garis bidik beserta kode HEX-nya.

  3. 3

    Klik untuk memilih

    Dapatkan nilai HEX, RGB, HSL, dan OKLCH, masing-masing dengan tombol salin sendiri. Tombol panah menggeser garis bidik dan Enter memilih warna.

  4. 4

    Ambil palet

    Pilih 5 sampai 12 warna dominan lalu salin sebagai variabel CSS, JSON, atau blok tema Tailwind.

Batas dan Pro

Satu gambar per sesi, hingga 25 MB, dengan pemilihan warna tanpa batas, 5–12 warna palet, dan riwayat 24 warna.

Dengan Pro, Anda dapat mengambil sampel dari gambar hingga 4 GB. Lihat Pro

Tentang Ambil warna dari gambar

Pemilih warna dari gambar ini membaca nilai persis dari piksel mana pun dalam sebuah gambar dan mengubah seluruh gambar menjadi palet. Setiap warna yang dipilih ditampilkan dalam empat notasi: HEX untuk alat desain, rgb() dan hsl() untuk CSS, serta oklch() untuk pengolahan warna CSS modern, di mana kecerahan dan kroma berperilaku sesuai yang diharapkan mata. Warna yang Anda pilih masuk ke riwayat 24 warna terakhir yang disimpan di browser ini, sehingga masih ada saat Anda kembali. Di Chrome dan Edge desktop, Pilih dari layar juga dapat mengambil warna apa pun di luar halaman lewat pipet bawaan browser.

Palet dihitung dengan klaster k-means di ruang warna OKLab pada salinan gambar yang diperkecil hingga maksimal 200 piksel di sisi terpanjangnya. Klaster yang mirip digabungkan, piksel transparan diabaikan, dan warna diurutkan berdasarkan seberapa luas area yang ditutupinya, dengan persentase tampil di setiap kotak warna. Gambar yang sama selalu menghasilkan palet yang sama.

Desainer memakainya untuk mencocokkan warna merek dari logo, membuat tema dari foto, memeriksa warna tepat sebuah tombol di tangkapan layar, atau mengumpulkan moodboard. Nilainya berupa sRGB standar seperti yang ditampilkan browser Anda, jadi artefak JPG atau sumber gamut lebar dapat menggeser hasil beberapa satuan dari file desain aslinya. Piksel semitransparan dilaporkan warnanya tanpa transparansi, dan alat ini tidak memberi nama warna maupun memeriksa rasio kontras.

Privasi

Gambar didekode dan diambil sampelnya di tab ini, dan pengklasteran palet berjalan di Web Worker kecil yang dibuat setelah Anda membukanya; tidak ada yang diunggah. Riwayat warna Anda hanya disimpan di penyimpanan lokal browser ini, dan Pilih dari layar memakai pipet bawaan browser, yang hanya membagikan satu warna yang dipilih kepada halaman ini.

Fitur

Kaca pembesar akurat per piksel

Kaca pembesar 11 × 11 piksel dengan penggeseran lewat keyboard untuk pilihan presisi di mouse maupun layar sentuh.

Palet warna dominan

5–12 warna dengan k-means di OKLab, diurutkan menurut porsinya di gambar.

Ekspor untuk developer

Nilai HEX, RGB, HSL, dan OKLCH plus variabel CSS, JSON, atau blok @theme Tailwind.

Riwayat warna

24 warna terakhir yang Anda pilih tersimpan di browser ini, siap disalin sebagai daftar.

Ambil warna dari gambar: pertanyaan yang sering diajukan

Bagaimana cara mendapatkan kode HEX warna dari gambar?
Buka gambar, gerakkan kursor di atasnya sampai garis bidik kaca pembesar berada tepat di piksel yang Anda inginkan, lalu klik. Kode HEX tampil besar di panel Warna yang dipilih bersama RGB, HSL, dan OKLCH; tekan tombol salin di samping nilai mana pun. Di ponsel, geser jari di atas gambar lalu angkat untuk memilih piksel yang terlihat di kaca pembesar.
Apa itu OKLCH dan mengapa perlu memakainya?
OKLCH menggambarkan warna lewat kecerahan, kroma (intensitas), dan rona, berdasarkan model OKLab yang dirancang agar selisih yang sama terlihat sama berbedanya oleh mata. Mengubah kecerahan saja tidak menggeser rona, sehingga lebih mudah membuat tint, shade, dan tema yang mudah diakses dibanding HSL. Semua browser terkini mendukung oklch() di CSS, dan Tailwind CSS 4 memakainya untuk palet bawaannya.
Bagaimana palet warna dihitung?
Gambar diperkecil hingga maksimal 200 piksel di sisi terpanjang, piksel transparan dibuang, dan sisanya dikelompokkan dengan klaster k-means di ruang OKLab agar kelompok sesuai tampilan warna, bukan sekadar angka RGB mentah. Klaster yang hampir sama digabungkan. Setiap kotak warna menunjukkan persentasenya di gambar, dan hasilnya dapat diekspor sebagai CSS, JSON, atau Tailwind.
Bisakah saya memilih warna dari luar gambar?
Di Chrome, Edge, dan Opera desktop bisa: tekan Pilih dari layar lalu klik di mana saja pada layar Anda, termasuk jendela dan aplikasi lain. Warnanya masuk ke panel dan Riwayat seperti pilihan lainnya. Safari, Firefox, dan browser seluler belum menyediakan pipet ini, jadi ambil tangkapan layar, tempel dengan Ctrl+V atau Cmd+V, lalu pilih warna dari situ.
Mengapa warna yang dipilih sedikit berbeda dari file desain saya?
Kompresi JPG dan WebP menggeser nilai piksel sedikit, terutama di dekat tepi dan pada gradasi, dan gambar gamut lebar di Display P3 ditampilkan, sehingga juga disampel, dalam sRGB. Perbesar dengan kaca pembesar dan pilih dari area datar yang jauh dari tepi untuk nilai paling akurat. Untuk warna merek yang persis, ambil sampel dari ekspor PNG, bukan foto atau tangkapan layar yang terkompresi.

Alat terkait

Semua alat gambar

Palet warna & cek kontras

Palet, gradasi, kontras WCAG, dan cek buta warna

Penampil & penghapus EXIF

Lihat metadata dan GPS foto — lalu hapus

Generator gradien & bayangan CSS

Rancang gradien dan box shadow secara visual

Konverter HEIC, WebP & AVIF

Ubah HEIC, WebP, dan AVIF ke JPG atau PNG — dan sebaliknya