Tada File

Pembuat Palet Warna dari Gambar

Ambil warna-warna utama dari gambar sebagai palet, lalu salin sebagai kode HEX, variabel CSS, atau JSON.

Pembuat Palet Warna dari Gambar menemukan warna dominan dalam foto atau desain dan menampilkannya sebagai contoh warna. Anda bisa memilih 3, 4, 5, 6, atau 8 warna; urutannya dimulai dari warna yang menutupi area terluas, dan nuansa yang sangat mirip digabung agar setiap contoh warna berbeda. Salin palet sebagai variabel CSS atau array JSON, atau unduh sebagai lembar warna PNG.

Cara memakai Pembuat Palet Warna dari Gambar

  1. 1

    Buka gambar

    Letakkan, pilih, atau tempel foto, ilustrasi, logo, atau screenshot.

  2. 2

    Pilih jumlah warna

    Klik 3, 4, 5, 6, atau 8. Contoh warna langsung diperbarui.

  3. 3

    Salin warna satu per satu

    Klik ikon salin pada contoh warna untuk menyalin kode HEX-nya.

  4. 4

    Ekspor palet

    Gunakan Salin variabel CSS atau Salin JSON, atau unduh palet sebagai lembar warna PNG.

Fungsinya

Diurutkan berdasarkan cakupan
Contoh warna pertama adalah warna yang menutupi bagian terbesar dari gambar.
Nuansa yang berbeda
Warna yang hampir sama digabung, jadi palet tidak mengulang nada yang sama.
Siap untuk developer
Ekspor sebagai CSS custom properties (--color-1, --color-2, dan seterusnya) atau sebagai array JSON berisi kode HEX.
Lembar warna PNG
Unduh gambar palet dengan kode HEX tertulis di bawah setiap contoh warna.

Pertanyaan

Bagaimana warna palet dipilih?

Gambar diambil sampelnya dalam ukuran kecil, warna yang mirip dikelompokkan, dan kelompok yang menutupi area terluas ditampilkan lebih dulu. Piksel transparan diabaikan.

Kenapa saya mendapat lebih sedikit warna dari yang saya pilih?

Nuansa yang sangat mirip digabung agar setiap contoh warna jelas berbeda. Gambar yang hanya punya sedikit warna berbeda bisa menghasilkan lebih sedikit contoh warna.

Bagaimana cara memakai palet di CSS?

Klik Salin variabel CSS untuk mendapatkan blok :root dengan variabel bernama --color-1, --color-2, dan seterusnya, lalu tempelkan ke stylesheet Anda.

Kenapa warna aksen kecil tidak muncul?

Palet mengutamakan warna yang menutupi area lebih luas, jadi detail kecil seperti logo kecil mungkin tidak muncul. Gunakan Pengambil Warna Gambar untuk mendapatkan nilai persis dari titik tertentu.