Bagaimana cara mengambil palet warna dari gambar?

Jatuhkan gambar ke halaman ini. Warna dominan langsung muncul, diurutkan menurut seberapa luas bagian gambar yang ditutupinya, dan Anda bisa mengubah jumlahnya, menyalin masing-masing sebagai HEX, RGB, atau HSL, serta mengekspor semuanya sebagai CSS, Tailwind, atau JSON.

Bagaimana cara mencari kode HEX warna di sebuah gambar?

Muat gambar dan klik titik yang Anda inginkan. Pipet menampilkan nilai HEX, RGB, dan HSL piksel tersebut, dan mengklik nilai mana pun akan menyalinnya.

Bagaimana warna dominan dihitung?

Gambar diperkecil dan pikselnya dikelompokkan dengan k-means di ruang warna OKLab, yang mengukur perbedaan warna sesuai persepsi manusia. Warna rata-rata setiap kelompok menjadi swatch, diurutkan menurut porsi piksel yang dimuatnya.

Kenapa warnanya sedikit berbeda dari alat lain?

Setiap alat pengambil warna mengelompokkan piksel yang mirip dengan cara berbeda, dan swatch adalah rata-rata kelompok itu, bukan satu piksel. Penentuan titik awal di alat ini deterministik, jadi gambar yang sama selalu memberi hasil yang sama di sini. Gunakan pipet jika Anda butuh nilai piksel yang tepat.

Bisakah palet diekspor ke Tailwind CSS?

Bisa. Pilih konfigurasi Tailwind v3 untuk objek colors yang ditempel ke tailwind.config.js, atau Tailwind v4 @theme untuk konfigurasi CSS-first, lalu salin atau unduh kodenya.

Apakah bisa untuk PNG transparan dan logo?

Bisa. Piksel yang sebagian besar transparan dilewati, jadi palet mencerminkan gambar yang terlihat, bukan latar kosongnya.

Apakah gambar saya diunggah?

Tidak. Gambar didekode dan dianalisis di browser Anda dan tidak pernah meninggalkan perangkat Anda.

Ambil Palet Warna dari Gambar

Ambil warna dominan dari foto apa pun sebagai HEX, RGB, dan HSL. Semuanya berjalan di perangkat Anda — tidak ada yang diunggah.

Masuk: PNG · JPEG · WebP · GIF · SVG
Keluar: HEX · RGB · HSL · CSS · JSON

Jatuhkan gambar

Foto, tangkapan layar, atau logo: PNG, JPEG, WebP, GIF, atau SVG. Anda juga bisa menempelkan gambar.

Ambil palet warna dari gambar apa pun

Jatuhkan foto, tangkapan layar, atau logo, dan color palette generator ini mengambil warna-warna dominannya, diurutkan menurut seberapa luas bagian gambar yang ditutupi tiap warna. Pilih 3 hingga 12 swatch, salin salah satunya sebagai HEX, RGB, atau HSL, klik di mana saja pada gambar untuk mengambil warna piksel yang tepat, dan ekspor palet sebagai variabel CSS, SCSS, konfigurasi Tailwind, JSON, atau strip PNG. Gambar dianalisis di perangkat Anda sendiri dan tidak pernah diunggah.

Cara mengambil warna dari gambar

Jatuhkan gambar ke halaman, pilih dari berkas Anda, atau tempelkan langsung dari clipboard. PNG, JPEG, WebP, GIF, dan SVG semuanya bisa.
Atur Warna sesuai jumlah swatch yang Anda inginkan. Strip di atas daftar menampilkan setiap warna sesuai porsinya di gambar.
Klik sebuah nilai untuk menyalinnya sebagai HEX, RGB, atau HSL.
Butuh titik tertentu, misalnya warna tombol di tangkapan layar? Klik titik itu pada gambar untuk mengambil sampelnya, lalu tambahkan ke palet dengan tombol plus.
Pilih format ekspor dan salin kodenya, atau unduh palet sebagai strip PNG.

Cara warna dominan ditemukan

Sebuah foto bisa dengan mudah berisi seratus ribu warna berbeda, sebagian besar hanya variasi kecil satu sama lain. Untuk menemukan segelintir warna yang penting, gambar diperkecil dan setiap piksel dikelompokkan dengan piksel yang paling mirip, memakai metode bernama k-means clustering. Setiap kelompok menjadi satu swatch: rata-rata pikselnya, diurutkan menurut jumlah piksel yang dimuatnya.

Dua detail membuat hasilnya lebih baik daripada pemilih warna yang naif. Pertama, warna dibandingkan di OKLab, ruang warna yang dirancang agar jarak yang sama terlihat sebagai perbedaan yang sama di mata. Pengelompokan di RGB biasa cenderung memecah hijau menjadi banyak nuansa yang nyaris identik sambil menyatukan biru yang berbeda. Kedua, titik awal dipilih secara deterministik, mengutamakan warna yang umum sekaligus jauh dari warna yang sudah dipilih, sehingga gambar yang sama selalu menghasilkan palet yang sama dan aksen kecil yang mencolok, seperti logo merah di dinding abu-abu, tidak tertelan latar.

Piksel transparan diabaikan, jadi logo pada PNG transparan memberi Anda warna logonya, bukan swatch hitam.

HEX, RGB, dan HSL: mana yang disalin

Butuh OKLCH, CMYK, atau HSV, atau tint yang lebih terang dari salah satu swatch? Tempel nilai HEX ke konversi warna, yang menampilkan setiap notasi beserta tint, shade, dan harmoni warna.

HEX: #2a9d8f. Enam digit heksadesimal untuk merah, hijau, dan biru. Bentuk paling ringkas, diterima semua alat desain dan CSS.
RGB: rgb(42, 157, 143). Tiga kanal yang sama sebagai angka 0 hingga 255. Praktis untuk kode yang menghitung warna, atau alat yang meminta nilai terpisah.
HSL: hsl(173 58% 39%). Hue, saturasi, dan kecerahan. Notasi paling mudah diubah manual: naikkan kecerahan untuk state hover, turunkan saturasi untuk varian yang lebih kalem.

Format ekspor

Variabel CSS: blok :root dengan --palette-1, --palette-2, dan seterusnya, siap untuk stylesheet apa pun.
SCSS: variabel bergaya $palette-1 untuk proyek Sass.
Konfigurasi Tailwind v3: objek theme.extend.colors untuk tailwind.config.js, yang menghasilkan kelas seperti bg-palette-1.
Tailwind v4 @theme: custom property --color-palette-1 untuk konfigurasi CSS-first Tailwind 4.
JSON: array berisi HEX, RGB, dan HSL setiap warna, untuk skrip dan design token.
Strip PNG: swatch berjajar sebagai gambar, untuk mood board, brief, atau pesan chat.

Tips agar paletnya berguna

Sedikit warna untuk branding, lebih banyak untuk ilustrasi. Lima atau enam swatch biasanya sudah menangkap suasana foto; naikkan ke 10 atau 12 jika Anda juga butuh warna pendukung.
Potong dulu. Langit yang luas atau tepi halaman putih akan mendominasi hasil. Potong ke bagian gambar yang Anda pedulikan agar paletnya mencerminkan bagian itu.
Periksa warna teks sebelum dipakai. Warna yang diambil dari foto jarang punya kontras cukup untuk teks. Uji setiap pasangan yang akan diberi teks dengan cek kontras.
Pakai pipet untuk nilai yang tepat. Warna dominan adalah rata-rata. Jika Anda butuh warna persis satu piksel, misalnya logo atau elemen UI di tangkapan layar, klik piksel itu.

Pertanyaan yang sering diajukan

Bagaimana cara mengambil palet warna dari gambar?: Jatuhkan gambar ke halaman ini. Warna dominan langsung muncul, diurutkan menurut seberapa luas bagian gambar yang ditutupinya, dan Anda bisa mengubah jumlahnya, menyalin masing-masing sebagai HEX, RGB, atau HSL, serta mengekspor semuanya sebagai CSS, Tailwind, atau JSON.
Bagaimana cara mencari kode HEX warna di sebuah gambar?: Muat gambar dan klik titik yang Anda inginkan. Pipet menampilkan nilai HEX, RGB, dan HSL piksel tersebut, dan mengklik nilai mana pun akan menyalinnya.
Bagaimana warna dominan dihitung?: Gambar diperkecil dan pikselnya dikelompokkan dengan k-means di ruang warna OKLab, yang mengukur perbedaan warna sesuai persepsi manusia. Warna rata-rata setiap kelompok menjadi swatch, diurutkan menurut porsi piksel yang dimuatnya.
Kenapa warnanya sedikit berbeda dari alat lain?: Setiap alat pengambil warna mengelompokkan piksel yang mirip dengan cara berbeda, dan swatch adalah rata-rata kelompok itu, bukan satu piksel. Penentuan titik awal di alat ini deterministik, jadi gambar yang sama selalu memberi hasil yang sama di sini. Gunakan pipet jika Anda butuh nilai piksel yang tepat.
Bisakah palet diekspor ke Tailwind CSS?: Bisa. Pilih konfigurasi Tailwind v3 untuk objek colors yang ditempel ke tailwind.config.js, atau Tailwind v4 @theme untuk konfigurasi CSS-first, lalu salin atau unduh kodenya.
Apakah bisa untuk PNG transparan dan logo?: Bisa. Piksel yang sebagian besar transparan dilewati, jadi palet mencerminkan gambar yang terlihat, bukan latar kosongnya.
Apakah gambar saya diunggah?: Tidak. Gambar didekode dan dianalisis di browser Anda dan tidak pernah meninggalkan perangkat Anda.

Alat terkait

Lihat semua alat

Konversi WarnaKonversi warna antara HEX, RGB, HSL, HSV, CMYK, dan OKLCH.Cek Kontras Warna WCAGPeriksa warna teks dan latar terhadap WCAG AA dan AAA.Konverter GambarKonversi ulang, ubah ukuran, dan vektorkan gambar dengan perbandingan sebelum/sesudah secara langsung.Favicon GeneratorSemua ukuran favicon, berkas .ico multi-ukuran sungguhan, dan web manifest dari satu gambar.Konverter DataPindahkan teks terstruktur antara JSON, YAML, TOML, CSV, dan Markdown.Kompres & ArsipPerkecil berkas apa pun dengan gzip atau Brotli, atau bundel folder menjadi ZIP.