Dapatkan palet warna dari gambar apa pun, dengan pemeriksa kontras

Cara warna dipilih

Alat ini membuat salinan kecil dari gambar Anda, maksimal 160 piksel pada sisi terpanjangnya, lalu menghitung setiap piksel yang tidak transparan. Selanjutnya piksel yang serupa dikelompokkan dengan k-means clustering dan melaporkan warna rata-rata setiap kelompok, dengan kelompok terbesar lebih dulu. Persentase pada tiap swatch menunjukkan seberapa besar bagian gambar yang dicakup kelompok tersebut.

Titik awalnya tetap, bukan acak: dimulai dari warna yang paling umum, lalu terus menambahkan warna yang paling jauh dari warna-warna yang sudah ada. Jadi gambar yang sama selalu menghasilkan palet yang sama, dan aksen cerah kecil, seperti logo merah pada kotak putih, mendapat swatch sendiri alih-alih dirata-ratakan ke latar belakang.

Mintalah 5 hingga 8 warna. Foto produk dengan latar polos biasanya cukup 5 atau 6. Foto gaya hidup yang ramai lebih baik dibaca dengan 8 warna. Jika gambar memiliki lebih sedikit warna berbeda daripada yang Anda minta, alat ini akan memberi tahu dan menampilkan warna yang ditemukannya.

Membaca matriks kontras

Setiap warna dipasangkan dengan setiap warna lain, ditambah putih dan hitam polos, dan tiap sel menunjukkan rasio kontras untuk teks dengan warna baris di atas latar belakang dengan warna kolom. Rasio ini mengikuti definisi WCAG: (L1 + 0.05) / (L2 + 0.05), di mana L1 dan L2 adalah luminansi relatif dari warna yang lebih terang dan yang lebih gelap. Rasionya berkisar dari 1:1 (warna yang sama dua kali) hingga 21:1 (hitam di atas putih).

Labelnya adalah ambang batas yang ditetapkan WCAG:

• AA: minimal 4.5:1 untuk teks normal dan 3:1 untuk teks besar (Kriteria Keberhasilan 1.4.3).
• AAA: minimal 7:1 untuk teks normal dan 4.5:1 untuk teks besar (Kriteria Keberhasilan 1.4.6).
• Teks besar berarti minimal 18 poin, atau 14 poin tebal (definisi skala besar menurut WCAG).

Sel yang ditandai AA large cocok untuk judul besar tetapi terlalu samar untuk keterangan. Penjelasan W3C tentang 1.4.3 juga menyatakan bahwa rasio tidak boleh dibulatkan, jadi 4.499:1 tidak memenuhi 4.5:1. Alat ini menilai angka yang tepat dan menampilkannya hingga dua desimal, tanpa pernah membulatkan ke atas.

Contoh perhitungan

Misalnya foto memberi Anda warna navy #1a3c6e dan krem #fdf6e3. Luminansi relatif navy sekitar 0.046 dan krem sekitar 0.923. Rasionya adalah (0.923 + 0.05) / (0.046 + 0.05), yaitu sekitar 10.1:1 dengan angka yang dibulatkan tersebut dan 10.16:1 dengan angka yang tepat. Itu lulus AAA untuk semua teks, jadi teks navy pada end card krem aman di ukuran berapa pun. Taruh jingga sedang seperti #e07a2e pada krem yang sama dan rasionya turun ke 2.78:1, yang gagal bahkan untuk teks besar. Simpan jingga itu untuk tombol dengan teks hitam di atasnya (6.99:1, yang lulus AA tetapi sedikit kurang untuk AAA), atau untuk bentuk tanpa kata-kata.

Menggunakan hasil ekspor

Ekspor CSS berupa blok :root dari custom property, --color-1 untuk warna yang mencakup paling banyak bagian gambar dan seterusnya ke bawah. JSON berisi hex, RGB, HSL tiap warna serta porsinya dalam gambar, yang mudah ditempel ke file design token atau diberikan ke sebuah skrip. Ganti nama variabel setelah Anda tahu warna mana yang menjadi latar belakang, mana yang teks dan mana yang aksen.

Apa yang tidak dilakukan alat ini

Alat ini tidak tahu warna mana yang merupakan merek Anda. Foto produk Anda di atas meja kayu akan menyertakan mejanya. Pangkas ke produk atau kemasan terlebih dahulu jika Anda hanya menginginkan warnanya. Alat ini juga tidak bisa memberi tahu warna cetak yang tepat: angkanya adalah piksel dalam file, setelah kamera dan penyuntingan apa pun, jadi periksa terhadap panduan merek Anda sebelum mempublikasikannya. Dan alat ini hanya menilai kontras teks. WCAG memiliki aturan terpisah untuk ikon dan bagian antarmuka, yang tidak dinilai oleh matriks ini.

Jika Anda lebih suka tidak melakukan ini secara manual

Hermoso adalah pemasaran dengan autopilot: ia meneliti iklan yang sudah berhasil di pasar Anda, membuat iklan gambar dan video yang sesuai merek, menjadwalkan postingan dan menjalankan kampanye berbayar di akun iklan Anda sendiri. Saat Anda menambahkan merek dari situs web Anda, ia mempelajari produk, logo dan palet Anda, dan Anda dapat mengatur warna caption dan end card dengan kode hex. Ini bekerja di aplikasi web, atau di dalam Claude, ChatGPT dan Cursor melalui server MCP-nya.

Alat gratis: Panduan ukuran media sosial · Pembuat Grid Instagram · Pembuat Open Graph

Pertanyaan yang sering diajukan

Bagaimana cara mendapatkan palet warna dari foto?

Jatuhkan foto ke dalam alat dan pilih berapa banyak warna yang Anda inginkan, dari 5 hingga 8. Alat ini mengelompokkan piksel yang mirip dan menampilkan warna rata-rata setiap kelompok sebagai HEX, RGB dan HSL, dari yang terbesar lebih dulu, dengan tombol salin pada masing-masing.

Rasio kontras apa yang saya butuhkan untuk teks?

WCAG 2.2 tingkat AA meminta minimal 4.5:1 untuk teks normal dan 3:1 untuk teks besar. Tingkat AAA meminta 7:1 dan 4.5:1. Teks besar adalah minimal 18 poin, atau 14 poin tebal.

Apakah 4.49:1 cukup dekat untuk lolos AA?

Tidak. W3C menyatakan rasio yang dihitung tidak boleh dibulatkan saat dibandingkan dengan ambang batas, jadi 4.499:1 tidak memenuhi 4.5:1. Alat ini menilai angka yang tepat.

Mengapa saya selalu mendapatkan palet yang sama?

Pengelompokan dimulai dari titik tetap, yaitu warna yang paling umum, lalu menambahkan warna yang paling jauh dari yang sudah dipilih. Tidak ada awal acak, jadi satu gambar selalu memberi satu jawaban.

Apakah gambar saya diunggah?

Tidak. Gambar dibaca dengan pembaca file milik browser Anda sendiri dan dihitung dalam sebuah canvas di perangkat Anda. Tidak ada yang dikirim ke mana pun atau disimpan.