از هر تصویری پالت رنگ بگیرید، همراه با بررسی کنتراست

رنگ‌ها چطور انتخاب می‌شوند

این ابزار یک نسخه کوچک از تصویر شما می‌سازد که بلندترین ضلعش حداکثر ۱۶۰ پیکسل است، و هر پیکسل غیرشفاف را می‌شمارد. سپس پیکسل‌های مشابه را با خوشه‌بندی k-means گروه‌بندی می‌کند و رنگ میانگین هر گروه را گزارش می‌دهد، از بزرگ‌ترین گروه شروع می‌شود. درصدی که روی هر نمونه رنگ نوشته شده نشان می‌دهد آن گروه چه بخشی از تصویر را پوشانده است.

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

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

خواندن ماتریس کنتراست

هر رنگ با هر رنگ دیگر، به‌علاوه سفید و سیاه خالص، جفت می‌شود و هر خانه نسبت کنتراست متنی به رنگ ردیف روی پس‌زمینه‌ای به رنگ ستون را نشان می‌دهد. این نسبت از تعریف WCAG پیروی می‌کند: (L1 + 0.05) / (L2 + 0.05)، که در آن L1 و L2 روشنایی نسبی رنگ روشن‌تر و تیره‌تر هستند. از ۱:۱ (یک رنگ دو بار) تا ۲۱:۱ (سیاه روی سفید) متغیر است.

برچسب‌ها همان آستانه‌هایی هستند که WCAG تعیین می‌کند:

• AA: دست‌کم 4.5:1 برای متن عادی و 3:1 برای متن بزرگ (معیار موفقیت 1.4.3).
• AAA: دست‌کم 7:1 برای متن عادی و 4.5:1 برای متن بزرگ (معیار موفقیت 1.4.6).
• متن بزرگ یعنی دست‌کم ۱۸ پوینت، یا ۱۴ پوینت پررنگ (تعریف WCAG از مقیاس بزرگ).

خانه‌ای که با AA large مشخص شده برای یک تیتر بزرگ مناسب است و برای یک زیرنویس بیش از حد کم‌رنگ. توضیح W3C درباره 1.4.3 هم می‌گوید که نسبت نباید گرد شود، پس 4.499:1 به 4.5:1 نمی‌رسد. این ابزار عدد دقیق را می‌سنجد و آن را با دو رقم اعشار و بدون گرد کردن به بالا نشان می‌دهد.

یک مثال حل‌شده

فرض کنید عکس به شما یک سرمه‌ای #1a3c6e و یک کرم #fdf6e3 می‌دهد. روشنایی نسبی سرمه‌ای حدود 0.046 و کرم حدود 0.923 درمی‌آید. نسبت برابر است با (0.923 + 0.05) / (0.046 + 0.05)، که با این اعداد گردشده حدود 10.1:1 و با اعداد دقیق 10.16:1 می‌شود. این برای همه متن‌ها AAA را پاس می‌کند، پس متن سرمه‌ای روی کارت پایانی کرم در هر اندازه‌ای امن است. یک نارنجی متوسط مثل #e07a2e را روی همان کرم بگذارید و نسبت به 2.78:1 می‌افتد که حتی برای متن بزرگ هم رد می‌شود. نارنجی را برای دکمه‌ای با متن سیاه روی آن نگه دارید (6.99:1، که AA است اما کمی به AAA نمی‌رسد)، یا برای شکلی بدون کلمه.

استفاده از خروجی

خروجی CSS یک بلوک :root از ویژگی‌های سفارشی است، --color-1 برای رنگی که بیشترین بخش تصویر را پوشانده و همین‌طور به ترتیب پایین‌تر. خروجی JSON برای هر رنگ کد هگز، RGB، HSL و سهمش از تصویر را دارد که به‌راحتی در یک فایل توکن طراحی چسبانده می‌شود یا به یک اسکریپت داده می‌شود. وقتی فهمیدید کدام رنگ پس‌زمینه، کدام متن و کدام تأکیدی است، متغیرها را تغییر نام دهید.

این ابزار چه کارهایی را انجام نمی‌دهد

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

اگر ترجیح می‌دهید این کار را دستی انجام ندهید

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

ابزارهای رایگان: راهنمای اندازه‌های شبکه‌های اجتماعی · سازنده گرید Instagram · سازنده Open Graph

پرسش‌های متداول

چطور از یک عکس پالت رنگ بگیرم؟

عکس را در ابزار رها کنید و انتخاب کنید چند رنگ می‌خواهید، از ۵ تا ۸. پیکسل‌های مشابه را گروه‌بندی می‌کند و رنگ میانگین هر گروه را به صورت HEX، RGB و HSL، از بزرگ‌ترین به کوچک‌تر، همراه با یک دکمهٔ کپی روی هرکدام نشان می‌دهد.

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

سطح AA از WCAG 2.2 دست‌کم ۴.۵:۱ برای متن معمولی و ۳:۱ برای متن بزرگ را می‌خواهد. سطح AAA ۷:۱ و ۴.۵:۱ را می‌خواهد. متن بزرگ دست‌کم ۱۸ پوینت یا ۱۴ پوینت پررنگ است.

آیا ۴.۴۹:۱ به اندازهٔ کافی نزدیک است که AA را بگذراند؟

خیر. W3C می‌گوید نسبت محاسبه‌شده هنگام مقایسه با یک آستانه نباید گرد شود، پس ۴.۴۹۹:۱ شرط ۴.۵:۱ را برآورده نمی‌کند. این ابزار عدد دقیق را ارزیابی می‌کند.

چرا هر بار همان پالت را می‌گیرم؟

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

آیا تصویر من آپلود می‌شود؟

خیر. تصویر با فایل‌خوان خود مرورگر شما خوانده و در یک canvas روی دستگاه شما شمارش می‌شود. چیزی به جایی فرستاده یا ذخیره نمی‌شود.