Bangun palet warna merek dari foto produk Anda sendiri
Ambil warna asli dari foto produk dan kemasan Anda, beri setiap warna peran, dan periksa setiap pasangan teks dengan kontras WCAG sebelum dipakai di iklan, keterangan, atau kartu akhir.
Banyak brand kecil punya file logo tetapi tidak punya daftar warna. Warnanya ada di produk itu sendiri: botol, label, kotak, kain. Saat tiba waktunya membuat iklan, thumbnail, atau gaya keterangan, seseorang menebak-nebak kode hex dari foto dan berharap cocok.
Anda bisa melakukannya lebih baik dalam sekitar sepuluh menit. Ambil warna dari foto produk asli, beri setiap warna peran, dan periksa pasangan mana yang bisa dibaca sebagai teks. Ekstraktor palet warna gratis kami melakukan pengambilan dan pemeriksaan di browser Anda, tanpa mengunggah apa pun.
Mengapa mulai dari produk, bukan papan inspirasi
Orang mengenali produk Anda dari tampilannya di rak atau di tangan mereka. Iklan yang warnanya cocok dengan kemasan terasa seperti merek yang sama sekilas pandang, dan yang warnanya melenceng terasa seperti tiruan. Palet yang diambil dari produk juga jujur tentang apa yang benar-benar Anda jual, yang jarang dilakukan papan inspirasi.
Ini juga berlaku untuk layanan. Jika Anda tidak punya produk fisik, gunakan tangkapan layar terbaik, etalase toko, atau foto tim Anda, apa pun yang sudah dikaitkan orang dengan Anda.
Langkah 1: pilih dan potong foto
Pilih dua atau tiga foto bersih: produk di latar polos, sisi kemasan menghadap depan, dan satu foto gaya hidup yang Anda suka. Lalu potong dengan rapi. Ekstraktor menghitung setiap piksel yang Anda berikan, jadi botol di atas meja kayu akan menghasilkan meja itu sebagai salah satu warna merek Anda. Potong hanya ke produk dan labelnya, dan palet itulah produknya.
Ambil foto di cahaya siang atau cahaya yang merata jika memungkinkan. Lampu hangat membuat kemasan putih berubah krem, dan setiap warna yang Anda ambil akan membawa rona itu.
Langkah 2: ekstrak lima sampai delapan warna
Masukkan setiap foto ke ekstraktor dan minta 5 atau 6 warna untuk foto produk yang bersih, atau 8 untuk foto yang ramai. Ia mengelompokkan piksel yang mirip dan mendaftarkan rata-rata setiap kelompok, dari yang terbesar, beserta porsi gambar yang ditutupi masing-masing. Titik awalnya tetap, jadi foto yang sama selalu menghasilkan palet yang sama, dan aksen kecil yang cerah, seperti tutup merah pada botol putih, mendapatkan swatch sendiri alih-alih tertimpa rata-rata.
Jalankan semua foto Anda dan cari warna yang berulang. Itulah merek Anda. Warna yang hanya muncul di satu foto biasanya adalah latar belakang atau cahaya.
Langkah 3: beri setiap warna sebuah peran
Palet hanya berguna jika setiap warna punya peran. Kebanyakan brand membutuhkan empat:
- Latar belakang: warna tempat sebagian besar tata letak berada. Seringkali warna dasar kemasan, atau netral terang.
- Teks: warna gelap yang terbaca di atas latar belakang. Hampir hitam sudah cukup. Warna merek yang dalam lebih baik, asalkan lolos pemeriksaan kontras.
- Aksen: warna yang mencolok, untuk tombol, stiker harga, atau satu kata yang disorot.
- Pendukung: satu atau dua netral untuk kotak, pemisah, dan teks sekunder.
Tahan diri untuk tidak memakai semua yang diberikan foto. Lima warna bernama dengan peran yang jelas akan menjaga seratus iklan tetap konsisten. Dua belas tidak akan.
Langkah 4: periksa kontras sebelum dipakai di mana pun
Pasangan warna yang terlihat bagus di monitor besar bisa sulit dibaca di ponsel yang terkena matahari, dan jauh lebih sulit bagi orang dengan gangguan penglihatan. Pedoman Aksesibilitas Konten Web dari W3C memberikan angka untuk ini, rasio kontras, yang berkisar dari 1:1 (warna yang sama dua kali) hingga 21:1 (hitam di atas putih). Ambangnya adalah:
| Teks normal | Teks besar | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
Teks besar berarti minimal 18 poin, atau 14 poin tebal, menurut definisi WCAG. Dan angkanya adalah batas tegas: panduan W3C tentang 1.4.3 menyatakan bahwa rasio yang dihitung tidak boleh dibulatkan, jadi 4,499:1 tidak memenuhi 4,5:1.
WCAG ditulis untuk konten web, bukan untuk iklan, tetapi alasannya berlaku untuk teks apa pun di layar, termasuk keterangan yang dibakar ke dalam video dan kata-kata di kartu akhir.
Contoh lengkap
Misalkan kemasan Anda memberi biru navy #1a3c6e, krem #fdf6e3, dan oranye #e07a2e.
Rumusnya adalah (L1 + 0,05) / (L2 + 0,05), di mana L1 adalah luminansi relatif dari warna yang lebih terang dan L2 dari yang lebih gelap. Luminansi relatif berkisar dari 0 untuk hitam hingga 1 untuk putih. Navy menghasilkan sekitar 0,046, krem sekitar 0,923, dan oranye sekitar 0,300.
- Teks navy di atas krem: (0,923 + 0,05) / (0,046 + 0,05) = 0,973 / 0,096, sekitar 10,1 dengan angka pembulatan ini, dan tepatnya 10,16:1. Ini lolos AAA untuk ukuran apa pun. Ini pasangan utama Anda.
- Teks oranye di atas krem: (0,923 + 0,05) / (0,300 + 0,05) = 0,973 / 0,350, sekitar 2,78:1. Ini gagal bahkan untuk teks besar. Oranye sebaiknya tidak membawa kata-kata di atas krem.
- Teks hitam di atas oranye: (0,300 + 0,05) / (0 + 0,05) = 0,350 / 0,05, yaitu 7,0 dengan angka pembulatan ini, tetapi tepatnya 6,99:1. Ini lolos AA untuk semua teks tetapi sedikit kurang dari AAA. Cukup untuk label tombol.
- Teks krem di atas navy: pasangan yang sama dengan yang pertama, jadi 10,16:1 yang sama. Membalik pasangan tidak pernah mengubah rasio.
Jadi peran hampir memilih dirinya sendiri: latar krem, teks navy, oranye sebagai bentuk aksen dengan kata hitam di atasnya (navy di atas oranye hanya 3,65:1, yang lolos AA untuk teks besar saja). Ekstraktor menampilkan seluruh kisi ini sekaligus, setiap warna terhadap setiap warna lain ditambah putih dan hitam, dengan setiap sel dinilai AAA, AA, AA besar atau Gagal.
Langkah 5: tuliskan sekali
Ekspor palet sebagai custom property CSS atau JSON dan simpan di samping file logo Anda. Ganti nama variabel sesuai peran setelah Anda memutuskan: --brand-bg, --brand-text, --brand-accent lebih mudah dibaca daripada --color-3 sebulan kemudian. Tambahkan satu baris di bawah masing-masing yang menyebutkan pasangan mana yang lolos, supaya tidak ada yang harus mengulang pemeriksaan.
Lalu periksa angkanya terhadap sumber resmi yang sudah Anda punya. Foto memberi warna yang ditangkap kamera Anda, yang mendekati kemasan cetak, tetapi tidak identik dengan spesifikasi tinta. Jika pencetak atau desainer Anda punya nilai pasti, nilai itulah yang berlaku.
Menggunakan palet di iklan dan postingan
- Keterangan dan subtitle: warna teks Anda pada kotak dengan warna latar belakang Anda, atau sebaliknya. Periksa pasangannya dulu.
- Kartu akhir: warna latar dengan logo dan satu baris dalam warna teks Anda. Aksen bisa mengisi bentuk tombol di belakang ajakan bertindak yang singkat.
- Thumbnail dan sampul: satu aksen, satu kata besar yang mudah dibaca, dan banyak latar belakang.
- Kode QR pada kemasan: warna merek berfungsi jika jelas lebih gelap dari kemasan. Generator kode QR kami memberi peringatan saat kontras rendah.
Di mana Hermoso cocok
Hermoso adalah agen pemasaran AI. Ia meneliti iklan yang sudah berhasil di pasar Anda, membuat iklan gambar dan video yang sesuai merek, memposting dan menjadwalkan ke akun media sosial Anda sendiri, serta menjalankan kampanye berbayar di akun iklan Anda sendiri. Saat Anda menambahkan brand dari situs web Anda, ia mempelajari produk, logo, dan palet Anda. Keterangan dan kartu akhir tetap mati kecuali Anda memintanya, dan jika Anda memintanya, Anda bisa mengatur warna teks, kotak, dan kartu akhir dengan kode hex, sehingga pasangan yang Anda periksa di sini adalah yang benar-benar tampil. Ia bekerja di aplikasi web, atau di dalam Claude, ChatGPT dan Cursor melalui server MCP-nya.
Pertanyaan yang sering diajukan
Bagaimana cara menemukan kode hex warna produk saya?
Potong foto bersih hanya ke produk atau kemasan, lalu masukkan ke ekstraktor palet warna. Ia mendaftarkan warna utama sebagai HEX, RGB, dan HSL. Jalankan dua atau tiga foto dan simpan warna yang berulang.
Rasio kontras berapa yang dibutuhkan teks?
Berdasarkan WCAG 2.2, level AA membutuhkan 4,5:1 untuk teks normal dan 3:1 untuk teks besar, dan AAA membutuhkan 7:1 dan 4,5:1. Teks besar adalah minimal 18 poin, atau 14 poin tebal.
Apakah 4,49:1 cukup untuk AA?
Tidak. W3C menyatakan bahwa rasio tidak boleh dibulatkan saat dibandingkan dengan ambang, jadi 4,499:1 tidak memenuhi 4,5:1.
Berapa banyak warna yang sebaiknya ada dalam palet merek?
Cukup untuk memberi setiap warna sebuah peran: biasanya latar belakang, warna teks, satu aksen, dan satu atau dua netral. Lima warna bernama dengan peran yang jelas menjaga iklan tetap konsisten dibanding daftar panjang.
Apakah warna dari foto itu akurat?
Tidak. Itu adalah yang direkam kamera di bawah cahaya tersebut, yang mendekati produk tetapi tidak sama dengan spesifikasi cetak atau tinta. Jika Anda punya nilai resmi, gunakan itu.