یک پالت رنگ برند از عکس‌های محصول خودتان بسازید

بسیاری از برندهای کوچک یک فایل لوگو دارند اما فهرست رنگ ندارند. رنگ‌ها در خود محصول زندگی می‌کنند: بطری، برچسب، جعبه، پارچه. وقتی زمان ساختن یک تبلیغ، تصویر بندانگشتی یا استایل کپشن می‌رسد، کسی از روی یک عکس به کد هگز نگاه می‌کند و امیدوار است درست باشد.

می‌توانید در حدود ده دقیقه بهتر عمل کنید. رنگ‌ها را از عکس‌های واقعی محصول بیرون بکشید، به هر کدام نقش بدهید، و ببینید کدام جفت‌ها به‌عنوان متن خوانا هستند. استخراج‌کننده رایگان پالت رنگ ما هم بیرون کشیدن و هم بررسی را در مرورگر شما انجام می‌دهد، بدون آپلود چیزی.

چرا از محصول شروع کنیم، نه از تخته الهام

مردم محصول شما را از روی ظاهرش در قفسه یا در دستشان می‌شناسند. تبلیغی که رنگ‌هایش با بسته‌بندی تطابق دارد، در نگاه اول حس یک برند واحد را می‌دهد، و تبلیغی که از آن فاصله بگیرد حس تقلبی بودن می‌دهد. پالتی که از خود محصول گرفته شده، درباره آنچه واقعاً می‌فروشید صادق‌تر است، که یک تخته الهام به ندرت این‌طور است.

برای خدمات هم کار می‌کند. اگر محصول فیزیکی ندارید، از بهترین اسکرین‌شات‌ها، ویترین مغازه یا عکس‌های تیم‌تان استفاده کنید، هر چیزی که مردم از قبل با شما مرتبط می‌دانند.

مرحله 1: عکس‌ها را انتخاب و برش بزنید

دو یا سه عکس تمیز انتخاب کنید: محصول روی زمینه ساده، بسته‌بندی رو به دوربین، و یک عکس سبک زندگی که دوست دارید. بعد سخت برش بزنید. استخراج‌کننده هر پیکسلی را که به آن بدهید حساب می‌کند، پس بطری روی میز چوبی، میز را به‌عنوان یکی از رنگ‌های برند برمی‌گرداند. روی محصول و برچسب برش بزنید تا پالت، خود محصول باشد.

اگر می‌توانید در نور روز یا حتی نور ملایم عکس بگیرید. یک لامپ گرم، بسته‌بندی سفید را کرم‌رنگ می‌کند و هر رنگی که بیرون بکشید آن رنگ‌مایه را خواهد داشت.

مرحله 2: پنج تا هشت رنگ استخراج کنید

هر عکس را در استخراج‌کننده بیندازید و برای یک عکس محصول تمیز 5 یا 6 رنگ، یا برای یک عکس شلوغ 8 رنگ بخواهید. پیکسل‌های مشابه را گروه می‌کند و میانگین هر گروه را، از بزرگ به کوچک، همراه با سهم هر رنگ از تصویر فهرست می‌کند. نقطه شروع ثابت است، پس همان عکس همیشه همان پالت را می‌دهد، و یک لکه روشن کوچک، مثل کلاه قرمز روی بطری سفید، نمونه رنگ خودش را می‌گیرد و در میانگین گم نمی‌شود.

همه عکس‌هایتان را اجرا کنید و دنبال رنگ‌هایی بگردید که تکرار می‌شوند. آن‌ها برند هستند. رنگی که فقط در یک عکس دیده می‌شود معمولاً پس‌زمینه یا نور است.

مرحله 3: به هر رنگ نقشی بدهید

پالت وقتی مفید است که هر رنگ نقشی داشته باشد. بیشتر برندها به چهار نقش نیاز دارند:

• پس‌زمینه: رنگی که بیشتر یک چیدمان روی آن قرار می‌گیرد. اغلب رنگ پایه بسته‌بندی، یا یک خنثای روشن.
• متن: رنگ تیره‌ای که روی پس‌زمینه خوانا باشد. مشکی نزدیک کار می‌کند. یک رنگ عمیق برند بهتر است، اگر از بررسی کنتراست رد شود.
• تأکید: رنگ پررنگ، برای یک دکمه، یک برچسب قیمت یا یک کلمه‌ی هایلایت‌شده.
• پشتیبان: یک یا دو خنثی برای جعبه‌ها، جداکننده‌ها و متن ثانویه.

مقاومت کنید در برابر استفاده از همه چیزهایی که عکس به شما داده است. پنج رنگ نام‌گذاری‌شده با نقش‌های روشن، صد تبلیغ را یکدست نگه می‌دارد. دوازده رنگ این کار را نمی‌کند.

مرحله 4: قبل از گذاشتن روی هر چیز، کنتراست را بررسی کنید

جفت‌رنگ‌هایی که روی مانیتور بزرگ خوب به نظر می‌رسند، روی گوشی زیر آفتاب سخت خوانده می‌شوند، و برای افراد کم‌بینا خیلی سخت‌تر. دستورالعمل‌های دسترسی‌پذیری محتوای وب W3C یک عدد برای این دارد، نسبت کنتراست، که از 1:1 (همان رنگ دو بار) تا 21:1 (سیاه روی سفید) است. آستانه‌ها این‌ها هستند:

	متن معمولی	متن بزرگ
AA (SC 1.4.3)	4.5:1	3:1
AAA (SC 1.4.6)	7:1	4.5:1

متن بزرگ یعنی حداقل 18 نقطه، یا 14 نقطه ضخیم، طبق تعریف WCAG. و عددها سخت‌گیرانه‌اند: راهنمای W3C درباره 1.4.3 می‌گوید نسبت محاسبه‌شده نباید گرد شود، پس 4.499:1 به 4.5:1 نمی‌رسد.

WCAG برای محتوای وب نوشته شده بود، نه برای تبلیغات، اما منطق آن به هر متنی روی صفحه نمایش منتقل می‌شود، از جمله زیرنویس‌هایی که روی ویدیو نشانده شده‌اند و کلماتی که روی end card می‌آیند.

یک نمونه کامل

فرض کنید بسته‌بندی شما یک سرمه‌ای #1a3c6e، یک کرم #fdf6e3 و یک نارنجی #e07a2e به شما می‌دهد.

فرمول (L1 + 0.05) / (L2 + 0.05) است، که در آن L1 لومینانس نسبی رنگ روشن‌تر و L2 لومینانس رنگ تیره‌تر است. لومینانس نسبی از 0 برای مشکی تا 1 برای سفید است. سرمه‌ای حدود 0.046، کرم حدود 0.923 و نارنجی حدود 0.300 به دست می‌آید.

• متن سرمه‌ای روی کرم: (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096، حدود 10.1 با این اعداد گرد شده، و دقیقاً 10.16:1. این در هر اندازه‌ای AAA را رد می‌کند. این جفت اصلی شماست.
• متن نارنجی روی کرم: (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350، حدود 2.78:1. این حتی برای متن بزرگ رد می‌شود. نارنجی نباید کلمات را روی کرم حمل کند.
• متن مشکی روی نارنجی: (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05، که با این اعداد گرد شده 7.0 است، اما دقیقاً 6.99:1. این برای همه متن‌ها AA را رد می‌کند، ولی کمی به AAA نمی‌رسد. برای برچسب یک دکمه خوب است.
• متن کرم روی سرمه‌ای: همان جفت اول است، پس همان 10.16:1. معکوس کردن یک جفت هرگز نسبت را تغییر نمی‌دهد.

پس نقش‌ها تقریباً خودشان انتخاب می‌شوند: پس‌زمینه کرم، متن سرمه‌ای، و نارنجی به‌عنوان شکل تاکیدی با کلمات مشکی روی آن (سرمه‌ای روی نارنجی فقط 3.65:1 است، که تنها برای متن بزرگ AA است). استخراج‌کننده این کل جدول را یک‌جا نشان می‌دهد، هر رنگ در مقابل هر رنگ دیگر به‌علاوه سفید و مشکی، و هر خانه با یکی از درجه‌های AAA، AA، AA برای متن بزرگ یا Fail نمره می‌گیرد.

مرحله 5: یک بار آن را یادداشت کنید

پالت را به‌صورت متغیرهای CSS یا JSON خروجی بگیرید و کنار فایل‌های لوگوی‌تان نگه دارید. وقتی تصمیم گرفتید، متغیرها را بر اساس نقششان تغییر نام دهید: --brand-bg، --brand-text، --brand-accent بعد از یک ماه خواناتر از --color-3 هستند. زیر هر کدام یک خط بنویسید که کدام جفت‌ها قبول شده‌اند، تا کسی مجبور نشود بررسی را دوباره انجام دهد.

بعد، اعداد را با هر چیز رسمی که از قبل دارید مقایسه کنید. عکس، رنگی را به شما می‌دهد که دوربین دیده است، که به بسته‌بندی چاپ‌شده نزدیک است اما عیناً همان مشخصات جوهر نیست. اگر چاپخانه یا طراح شما مقادیر دقیق دارد، آن‌ها برتری دارند.

استفاده از پالت در تبلیغات و پست‌ها

• کپشن و زیرنویس: رنگ متن شما روی یک جعبه با رنگ پس‌زمینه، یا برعکس. اول جفت را بررسی کنید.
• End card ها: رنگ پس‌زمینه با لوگو و یک خط با رنگ متن شما. رنگ تاکیدی می‌تواند شکل یک دکمه پشت یک فراخوان کوتاه را پر کند.
• تصاویر بندانگشتی و کاور ها: یک رنگ تاکیدی، یک کلمه بزرگ و خوانا، و پس‌زمینه‌ی زیاد.
• QR کدها روی بسته‌بندی: یک رنگ برند وقتی کار می‌کند که واضحاً از بسته‌بندی تیره‌تر باشد. مولد QR کد ما وقتی کنتراست کم است هشدار می‌دهد.

جایگاه Hermoso در این میان

Hermoso یک ایجنت بازاریابی هوش مصنوعی است. تبلیغاتی که از قبل در بازار شما کار می‌کنند را بررسی می‌کند، تبلیغات تصویری و ویدیویی هم‌راستا با برند می‌سازد، برای حساب‌های اجتماعی خودتان پست و زمان‌بندی می‌کند، و کمپین‌های پولی را روی حساب‌های تبلیغاتی خودتان اجرا می‌کند. وقتی برند خود را از وب‌سایتتان اضافه می‌کنید، محصولات، لوگو و پالت شما را یاد می‌گیرد. کپشن‌ها و end card ها خاموش می‌مانند مگر اینکه درخواست کنید، و وقتی درخواست کنید می‌توانید رنگ متن، جعبه و end card را با کدهای هگز تنظیم کنید، تا جفت‌هایی که اینجا بررسی کردید همان‌هایی باشند که منتشر می‌شوند. کار در اپ وب انجام می‌شود، یا داخل Claude، ChatGPT و Cursor از طریق سرور MCP آن.

سؤالات متداول

کدهای هگز رنگ محصولاتم را از کجا پیدا کنم؟

یک عکس تمیز را روی محصول یا بسته‌بندی برش بزنید و آن را در یک استخراج‌کننده پالت رنگ بیندازید. رنگ‌های اصلی را به‌صورت HEX، RGB و HSL فهرست می‌کند. دو یا سه عکس را اجرا کنید و رنگ‌هایی را نگه دارید که تکرار می‌شوند.

متن به چه نسبت کنتراستی نیاز دارد؟

طبق WCAG 2.2، سطح AA برای متن معمولی 4.5:1 و برای متن بزرگ 3:1 نیاز دارد، و AAA برای متن معمولی 7:1 و برای متن بزرگ 4.5:1. متن بزرگ حداقل 18 نقطه، یا 14 نقطه ضخیم است.

آیا 4.49:1 برای AA کافی است؟

خیر. W3C می‌گوید وقتی نسبت با آستانه مقایسه می‌شود نباید گرد شود، پس 4.499:1 به 4.5:1 نمی‌رسد.

یک پالت برند چند رنگ باید داشته باشد؟

به اندازه‌ای که به هر کدام نقشی بدهید: معمولاً یک پس‌زمینه، یک رنگ متن، یک رنگ تاکیدی و یک یا دو خنثی. پنج رنگ نام‌گذاری‌شده با نقش‌های روشن، تبلیغات را بهتر از یک فهرست بلند یکدست نگه می‌دارد.

آیا رنگ‌های یک عکس دقیق هستند؟

خیر. آن‌ها همان چیزی هستند که دوربین زیر آن نور ثبت کرده، که به محصول نزدیک است اما با مشخصات چاپ یا جوهر یکی نیست. اگر مقادیر رسمی دارید، از همان‌ها استفاده کنید.