Bina palet warna jenama daripada foto produk anda sendiri
Ambil warna sebenar daripada foto produk dan pembungkusan anda, beri setiap satu peranan, dan semak setiap gabungan teks dengan kontras WCAG sebelum ia digunakan pada iklan, kapsyen atau kad penutup.
Banyak jenama kecil ada fail logo tetapi tiada senarai warna. Warna itu hidup dalam produk itu sendiri: botol, label, kotak, fabrik. Apabila tiba masanya untuk membuat iklan, thumbnail atau gaya kapsyen, seseorang akan meneka kod hex daripada foto dan berharap.
Anda boleh melakukannya dengan lebih baik dalam kira-kira sepuluh minit. Ambil warna daripada foto produk sebenar, beri setiap satu peranan, dan semak pasangan mana yang boleh dibaca sebagai teks. Pengekstrak palet warna percuma kami melakukan pengambilan dan semakan dalam pelayar anda, tanpa sebarang muat naik.
Mengapa mula daripada produk, bukan papan mood
Orang mengenali produk anda melalui rupanya di rak kedai atau dalam tangan mereka. Iklan yang warnanya sepadan dengan pembungkusan terasa seperti jenama yang sama pada pandangan pertama, dan yang tersasar terasa seperti tiruan. Palet yang diambil daripada produk juga jujur tentang apa yang sebenarnya anda jual, sesuatu yang jarang dilakukan oleh papan mood.
Ia juga berfungsi untuk perkhidmatan. Jika anda tiada produk fizikal, gunakan tangkapan skrin terbaik anda, kedai anda atau foto pasukan anda, apa sahaja yang sudah dikaitkan orang dengan anda.
Langkah 1: pilih dan pangkas foto
Pilih dua atau tiga foto yang bersih: produk pada latar belakang polos, muka pembungkusan menghadap ke depan, dan satu foto gaya hidup yang anda suka. Kemudian pangkas dengan ketat. Pengekstrak mengira setiap piksel yang anda berikan, jadi botol di atas meja kayu akan memulangkan meja itu sebagai salah satu warna jenama anda. Pangkas kepada produk dan label, dan palet itu ialah produknya.
Ambil gambar dalam cahaya siang atau cahaya yang rata jika boleh. Lampu kuning hangat menjadikan pembungkusan putih berwarna krim dan setiap warna yang anda ambil akan membawa tona itu.
Langkah 2: ekstrak lima hingga lapan warna
Masukkan setiap foto ke dalam pengekstrak dan minta 5 atau 6 warna untuk gambar produk yang bersih, atau 8 untuk yang sibuk. Ia mengumpulkan piksel yang serupa dan menyenaraikan purata setiap kumpulan, yang terbesar dahulu, dengan peratusan imej yang diliputi setiap satu. Titik permulaannya tetap, jadi foto yang sama sentiasa memberikan palet yang sama, dan aksen terang kecil, seperti penutup merah pada botol putih, mendapat swatch sendiri dan tidak dihilangkan dengan purata.
Jalankan semua foto anda dan cari warna yang berulang. Itulah jenama anda. Warna yang muncul hanya dalam satu gambar biasanya ialah latar belakang atau cahaya.
Langkah 3: beri setiap warna satu peranan
Palet hanya berguna apabila setiap warna mempunyai peranan. Kebanyakan jenama memerlukan empat:
- Latar belakang: warna yang menjadi asas kebanyakan reka letak. Selalunya warna asas pembungkusan, atau neutral cerah.
- Teks: warna gelap yang boleh dibaca pada latar belakang. Hampir hitam sesuai. Warna jenama yang dalam lebih baik, jika ia lulus semakan kontras.
- Aksen: yang paling terang, untuk butang, pelekat harga atau satu perkataan yang diserlahkan.
- Sokongan: satu atau dua neutral untuk kotak, pembahagi dan teks sekunder.
Elakkan menggunakan semua yang diberikan oleh foto. Lima warna bernama dengan peranan yang jelas akan mengekalkan seratus iklan secara konsisten. Dua belas tidak akan.
Langkah 4: semak kontras sebelum digunakan pada apa-apa
Gabungan warna yang kelihatan baik pada monitor besar boleh sukar dibaca pada telefon di bawah matahari, dan jauh lebih sukar bagi orang yang mempunyai penglihatan rendah. Garis Panduan Kebolehcapaian Kandungan Web W3C memberikan nombor untuk ini, nisbah kontras, yang berjulat dari 1:1 (warna yang sama dua kali) hingga 21:1 (hitam atas putih). Ambangnya ialah:
| Teks biasa | Teks besar | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
Teks besar bermaksud sekurang-kurangnya 18 pt, atau 14 pt tebal, mengikut takrifan WCAG. Dan nombor itu ialah had tegas: panduan W3C mengenai 1.4.3 menyatakan nisbah yang dikira tidak boleh dibundarkan, jadi 4.499:1 tidak memenuhi 4.5:1.
WCAG ditulis untuk kandungan web, bukan untuk iklan, tetapi logiknya terpakai untuk sebarang teks pada skrin, termasuk kapsyen yang dibakar ke dalam video dan perkataan pada kad penutup.
Contoh kerja
Katakan pembungkusan anda memberikan biru laut #1a3c6e, krim #fdf6e3 dan oren #e07a2e.
Formulanya ialah (L1 + 0.05) / (L2 + 0.05), dengan L1 ialah kecerahan relatif warna yang lebih cerah dan L2 bagi yang lebih gelap. Kecerahan relatif berjulat dari 0 untuk hitam hingga 1 untuk putih. Biru laut dikira kira-kira 0.046, krim kira-kira 0.923 dan oren kira-kira 0.300.
- Teks biru laut atas krim: (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096, kira-kira 10.1 dengan nombor bulat ini, dan tepat 10.16:1. Itu lulus AAA pada sebarang saiz. Ini gabungan utama anda.
- Teks oren atas krim: (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350, kira-kira 2.78:1. Itu gagal walaupun untuk teks besar. Oren tidak boleh membawa perkataan di atas krim.
- Teks hitam atas oren: (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05, iaitu 7.0 dengan nombor bulat ini tetapi 6.99:1 tepat. Itu lulus AA untuk semua teks tetapi kurang sedikit daripada AAA. Sesuai untuk label butang.
- Teks krim atas biru laut: pasangan yang sama dengan yang pertama, jadi 10.16:1 yang sama. Menukar susunan pasangan tidak pernah mengubah nisbah.
Jadi peranan hampir memilih sendiri: latar belakang krim, teks biru laut, oren sebagai bentuk aksen dengan perkataan hitam di atasnya (biru laut atas oren hanya 3.65:1, yang lulus AA untuk teks besar sahaja). Pengekstrak menunjukkan keseluruhan grid ini sekaligus, setiap warna berbanding setiap warna lain serta putih dan hitam, dengan setiap sel digred AAA, AA, AA besar atau Gagal.
Langkah 5: tulis sekali
Eksport palet sebagai pembolehubah CSS tersuai atau JSON dan simpan bersebelah fail logo anda. Namakan semula pembolehubah mengikut peranan selepas anda memutuskan: --brand-bg, --brand-text, --brand-accent lebih mudah dibaca berbanding --color-3 sebulan kemudian. Tambah satu baris di bawah setiap satu yang menyatakan gabungan mana yang lulus, supaya tiada siapa perlu menyemak semula.
Kemudian semak nombor dengan apa-apa rujukan rasmi yang sudah anda ada. Foto memberikan warna yang dilihat oleh kamera anda, yang hampir dengan pembungkusan bercetak, tetapi tidak sama dengan spesifikasi dakwat. Jika pencetak atau pereka anda ada nilai tepat, nilai itu didahulukan.
Menggunakan palet dalam iklan dan siaran
- Kapsyen dan sari kata: warna teks anda pada kotak dalam warna latar belakang anda, atau sebaliknya. Semak gabungan itu dahulu.
- Kad penutup: warna latar belakang dengan logo dan satu baris dalam warna teks anda. Aksen boleh mengisi bentuk butang di belakang ajakan bertindak yang pendek.
- Thumbnail dan kulit: satu aksen, satu perkataan besar yang mudah dibaca, dan banyak latar belakang.
- Kod QR pada pembungkusan: warna jenama berfungsi jika ia jelas lebih gelap daripada pembungkusan. Penjana kod QR kami memberi amaran apabila kontras rendah.
Di mana Hermoso sesuai
Hermoso ialah ejen pemasaran AI. Ia menyelidik iklan yang sudah berjaya di pasaran anda, menghasilkan iklan imej dan video yang sesuai dengan jenama, menyiarkan dan menjadualkan ke akaun media sosial anda sendiri, dan menjalankan kempen berbayar pada akaun iklan anda sendiri. Apabila anda menambah jenama anda dari laman web anda, ia mempelajari produk, logo dan palet anda. Kapsyen dan kad penutup kekal tidak aktif melainkan anda memintanya, dan apabila anda memintanya, anda boleh menetapkan warna teks, kotak dan kad penutup dengan kod hex, supaya pasangan yang anda semak di sini ialah yang akan dikeluarkan. Ia berfungsi dalam aplikasi web, atau di dalam Claude, ChatGPT dan Cursor melalui pelayan MCPnya.
Soalan lazim
Bagaimana saya mencari kod hex warna produk saya?
Pangkas foto yang bersih kepada produk atau pembungkusan dan masukkan ke dalam pengekstrak palet warna. Ia menyenaraikan warna utama sebagai HEX, RGB dan HSL. Jalankan dua atau tiga foto dan simpan warna yang berulang.
Apakah nisbah kontras yang diperlukan oleh teks?
Di bawah WCAG 2.2, tahap AA memerlukan 4.5:1 untuk teks biasa dan 3:1 untuk teks besar, dan AAA memerlukan 7:1 dan 4.5:1. Teks besar ialah sekurang-kurangnya 18 pt, atau 14 pt tebal.
Adakah 4.49:1 cukup untuk AA?
Tidak. W3C menyatakan nisbah tidak boleh dibundarkan apabila dibandingkan dengan ambang, jadi 4.499:1 tidak memenuhi 4.5:1.
Berapa banyak warna yang perlu ada dalam palet jenama?
Cukup untuk memberi setiap satu peranan: biasanya latar belakang, warna teks, satu aksen dan satu atau dua neutral. Lima warna bernama dengan peranan yang jelas mengekalkan iklan lebih konsisten berbanding senarai yang panjang.
Adakah warna daripada foto tepat?
Tidak. Ia ialah apa yang direkodkan kamera di bawah cahaya itu, yang hampir dengan produk tetapi tidak sama dengan spesifikasi cetakan atau dakwat. Jika anda ada nilai rasmi, gunakan nilai itu.