Dapatkan palet warna daripada mana-mana imej, dengan penyemak kontras

Cara warna dipilih

Alat ini melukis salinan kecil imej anda, paling banyak 160 piksel pada sisi terpanjangnya, dan mengira setiap piksel yang tidak lutsinar. Ia kemudian mengumpulkan piksel yang serupa dengan pengelompokan k-means dan melaporkan warna purata setiap kumpulan, kumpulan terbesar dahulu. Peratusan pada setiap kotak warna ialah berapa banyak imej yang diliputi oleh kumpulan tersebut.

Titik permulaan ditetapkan dan bukannya rawak: ia bermula dengan warna yang paling kerap, kemudian terus menambah warna yang paling jauh daripada warna yang telah dimilikinya. Jadi imej yang sama memberikan palet yang sama setiap kali, dan aksen cerah yang kecil, seperti logo merah pada kotak putih, mendapat kotak warnanya sendiri dan bukannya dipuratakan ke dalam latar belakang.

Minta 5 hingga 8 warna. Tangkapan produk pada latar belakang polos biasanya memerlukan 5 atau 6 warna. Foto gaya hidup yang sibuk kelihatan lebih baik pada 8 warna. Jika imej mempunyai lebih sedikit warna berbeza daripada yang anda minta, alat ini memberitahu anda dan menunjukkan warna yang ditemuinya.

Membaca matriks kontras

Setiap warna dipasangkan dengan setiap warna lain, serta putih dan hitam polos, dan setiap sel menunjukkan nisbah kontras untuk teks dalam warna baris pada latar belakang dalam warna lajur. Nisbah ini mengikut takrif WCAG: (L1 + 0.05) / (L2 + 0.05), di mana L1 dan L2 ialah luminans relatif warna yang lebih cerah dan lebih gelap. Ia bermula dari 1:1 (warna yang sama dua kali) hingga 21:1 (hitam pada putih).

Label ialah ambang yang ditetapkan oleh WCAG:

• AA: sekurang-kurangnya 4.5:1 untuk teks biasa dan 3:1 untuk teks besar (Kriteria Kejayaan 1.4.3).
• AAA: sekurang-kurangnya 7:1 untuk teks biasa dan 4.5:1 untuk teks besar (Kriteria Kejayaan 1.4.6).
• Teks besar bermaksud sekurang-kurangnya 18 poin, atau 14 poin tebal (takrif skala besar WCAG).

Sel yang ditanda AA besar sesuai untuk tajuk besar tetapi terlalu samar untuk kapsyen. Penjelasan W3C tentang 1.4.3 juga menyatakan nisbah tidak boleh dibundarkan, jadi 4.499:1 tidak memenuhi 4.5:1. Alat ini menilai nombor tepat dan menunjukkannya dipotong kepada dua tempat perpuluhan, tidak pernah dibundarkan ke atas.

Contoh pengiraan

Katakan foto memberi anda warna biru laut #1a3c6e dan warna krim #fdf6e3. Luminans relatif biru laut terhitung lebih kurang 0.046 dan krim lebih kurang 0.923. Nisbahnya ialah (0.923 + 0.05) / (0.046 + 0.05), iaitu lebih kurang 10.1:1 dengan angka yang dibundarkan itu dan 10.16:1 dengan angka yang tepat. Itu lulus AAA untuk semua teks, jadi teks biru laut pada kad penutup krim selamat pada sebarang saiz. Letakkan oren sederhana seperti #e07a2e pada krim yang sama dan nisbahnya jatuh ke 2.78:1, yang gagal walaupun untuk teks besar. Simpan oren itu untuk butang dengan teks hitam di atasnya (6.99:1, iaitu AA tetapi tidak cukup untuk AAA), atau untuk bentuk tanpa perkataan.

Menggunakan eksport

Eksport CSS ialah blok :root bagi sifat tersuai, --color-1 untuk warna yang meliputi imej paling banyak dan seterusnya ke bawah. JSON mengandungi hex, RGB, HSL setiap warna dan bahagiannya dalam imej, yang mudah ditampal ke dalam fail token reka bentuk atau diserahkan kepada skrip. Namakan semula pemboleh ubah itu setelah anda tahu warna mana latar belakang, mana teks dan mana aksen.

Apa yang alat ini tidak lakukan

Ia tidak tahu warna mana yang menjadi jenama anda. Foto produk anda di atas meja kayu akan memasukkan meja itu. Pangkas kepada produk atau pembungkusan dahulu jika anda mahukan warnanya sahaja. Ia juga tidak dapat memberitahu anda warna cetakan yang tepat: nombor itu ialah piksel dalam fail, selepas kamera anda dan sebarang penyuntingan, jadi semak terhadap panduan jenama anda sebelum anda menerbitkannya. Dan ia menilai kontras teks sahaja. WCAG mempunyai peraturan berasingan untuk ikon dan bahagian antara muka, yang tidak dinilai oleh matriks ini.

Jika anda lebih suka tidak melakukan ini secara manual

Hermoso ialah pemasaran autopilot: ia menyelidik iklan yang sudah berjaya dalam pasaran anda, membuat iklan imej dan video yang selaras dengan jenama, menjadualkan siaran dan menjalankan kempen berbayar pada akaun iklan anda sendiri. Apabila anda menambah jenama anda daripada laman web anda, ia mempelajari produk, logo dan palet anda, dan anda boleh menetapkan warna kapsyen dan kad penutup dengan kod hex. Ia berfungsi dalam apl web, atau di dalam Claude, ChatGPT dan Cursor melalui pelayan MCPnya.

Alat percuma: Panduan saiz media sosial · Pembuat Grid Instagram · Penjana Open Graph

Soalan lazim

Bagaimana saya mendapatkan palet warna daripada foto?

Letakkan foto ke dalam alat dan pilih berapa banyak warna yang anda mahu, daripada 5 hingga 8. Ia mengumpulkan piksel yang serupa dan menunjukkan warna purata setiap kumpulan sebagai HEX, RGB dan HSL, yang terbesar dahulu, dengan butang salin pada setiap satu.

Nisbah kontras apa yang saya perlukan untuk teks?

WCAG 2.2 tahap AA meminta sekurang-kurangnya 4.5:1 untuk teks biasa dan 3:1 untuk teks besar. Tahap AAA meminta 7:1 dan 4.5:1. Teks besar ialah sekurang-kurangnya 18 poin, atau 14 poin tebal.

Adakah 4.49:1 cukup hampir untuk lulus AA?

Tidak. W3C menyatakan bahawa nisbah yang dikira tidak harus dibundarkan apabila dibandingkan dengan ambang, jadi 4.499:1 tidak memenuhi 4.5:1. Alat ini menilai nombor yang tepat.

Kenapa saya mendapat palet yang sama setiap kali?

Pengelompokan bermula dari titik tetap, warna yang paling biasa, dan kemudian menambah warna yang paling jauh daripada yang telah dipilih. Tiada permulaan rawak, jadi satu imej sentiasa memberikan satu jawapan.

Adakah imej saya dimuat naik?

Tidak. Ia dibaca dengan pembaca fail pelayar anda sendiri dan dikira dalam kanvas pada peranti anda. Tiada apa-apa dihantar ke mana-mana atau disimpan.