استخراج پالت رنگ از تصویر رایگان

مثال عملی

زیر ناحیه رها کردن «نمونه را امتحان کنید» را بزنید. تگ فایل sample-image.png را نشان می‌دهد و نوار لغزنده «تعداد رنگ‌ها (6)» را می‌خواند. نمونه یک گرادیان فیروزه‌ای، آبی آسمانی و بنفش است با ردیفی از دایره‌های پاستلی و کلمه LibraTool، پس بیشتر نمونه‌ها آبی هستند. در اجرای آزمایشی ما فهرست با #189AE3 با 38.5%، #0D9CB6 با 28.7% و #4C69EB با 26.1% شروع شد، و بعد سه رنگ کوچک با 3.1%، 2.2% و 1.4%. نمونه اول rgb(24, 154, 227) · hsl(202, 81%, 49%) · 38.5% را می‌خواند و خط کنتراست آن 6.8:1 برای متن مشکی و 3.1:1 برای سفید می‌دهد. نوار لغزنده را روی 2 بکشید و #238DD7 با 92.9% و #ADC0CA با 7.1% می‌گیرید. دوباره در 6، زیر «صدور به‌صورت» CSS را انتخاب کنید و «کپی کد» را بزنید تا بلوک :root با --color-1: #189ae3 شروع شود. «دانلود نوار PNG» فایل sample-image_palette.png را ذخیره می‌کند. کدهای هگز شما ممکن است چند پله فرق کنند، چون مرورگرها متن نمونه را کمی متفاوت می‌کشند.

کدام تنظیمات را استفاده کنید و محدودیت‌ها

• تصویر را از هر راهی که سریع‌تر است اضافه کنید. فایلی را روی ناحیه رها کنید، «مرور فایل‌ها» را بزنید، یا اسکرین‌شات را با Ctrl+V بچسبانید. در صفحه‌های لمسی راهنمای رها کردن و چسباندن پنهان است و «مرور فایل‌ها» راه ورود است. JPEG، PNG، WebP و GIF را می‌پذیرد، و عکس HEIC آیفون ابتدا تبدیل می‌شود، با پیام «در حال تبدیل عکس آیفون شما…». «یا آدرس URL فایل را وارد کنید» تصویر را از یک نشانی می‌گیرد، که فقط وقتی کار می‌کند که آن سایت اجازه دهد. چسباندن دوباره هنگامی که تصویری باز است آن را جایگزین می‌کند. «نمونه را امتحان کنید» یک تصویر آزمایشی 1200 × 800 بارگذاری می‌کند.
• «تعداد رنگ‌ها» را با نوار لغزنده تنظیم کنید. نوار لغزنده از 2 تا 16 می‌رود و از 6 شروع می‌شود، و برچسبش تعداد را نشان می‌دهد، مثل «تعداد رنگ‌ها (6)». تعداد کم پالت کلی می‌دهد و تعداد بیشتر رنگ‌های فرعی کوچک را هم می‌گیرد. ممکن است نمونه‌های کمتری از آنچه نوار می‌گوید ببینید، چون رنگ‌هایی که به یک هگز گرد می‌شوند ادغام می‌شوند و گروه‌های خالی حذف می‌شوند. همان تصویر و همان تعداد همیشه همان پالت را می‌دهد، چون جست‌وجو از یک دانه ثابت شروع می‌شود. هر نمونه سهمش از تصویر را نشان می‌دهد، مثل 38.5%، و بزرگ‌ترین سهم اول می‌آید.
• به یاد داشته باشید که نمونه‌ها میانگین‌اند. تصویر حداکثر تا 200 px در بلندترین ضلع کوچک می‌شود، پیکسل‌هایی که بیشتر شفافند (آلفای زیر 128) نادیده گرفته می‌شوند و بقیه تا 20 دور بر اساس فاصله در RGB گروه‌بندی می‌شوند. هر نمونه میانگین یک گروه است. یعنی ممکن است دقیقاً در هیچ جای تصویر شما وجود نداشته باشد، و یک رنگ فرعی باریک ممکن است در گروه همسایه حل شود. وقتی رنگ دقیق می‌خواهید، به‌جای تکیه بر نمونه، روی تصویر کلیک کنید.
• برای برداشتن پیکسل دقیق روی تصویر کلیک کنید. زیر تصویر نوشته «روی تصویر کلیک کنید تا رنگ پیکسل را نمونه‌برداری کنید». هر کلیک یک پیکسل را از تصویر اندازه کامل می‌خواند، نه از نسخه کوچک‌شده، حتی وقتی پیش‌نمایش از اصل کوچک‌تر است یا حاشیه خالی دارد. انتخاب‌ها به‌صورت تگ با کد هگز ظاهر می‌شوند. روی تگ کلیک کنید تا کپی شود، یا × را بزنید تا حذف شود. رنگی که قبلاً برداشته‌اید دوباره اضافه نمی‌شود، فقط 12 مورد آخر نگه داشته می‌شود و کلیک روی حاشیه کاری نمی‌کند. انتخاب‌ها جدا از نمونه‌ها هستند و جزو خروجی‌ها نیستند.
• از خط کنتراست برای انتخاب رنگ متن استفاده کنید. زیر هر نمونه، خط کنتراست نسبت را برای متن مشکی و متن سفید روی آن رنگ، با یک رقم اعشار، می‌دهد. نسبت‌ها از فرمول روشنایی نسبی WCAG استفاده می‌کنند. «مولد پالت رنگ» سایت 4.5:1 را AA درجه‌بندی می‌کند، پس آن را حداقل برای متن اصلی بدانید. در نمونه، #4C69EB با مشکی 4.5:1 و با سفید 4.6:1 می‌گیرد، پس هیچ‌کدام راحت نیست، در حالی که #DAEFFB با مشکی 17.7:1 می‌گیرد.
• خروجی‌ای را انتخاب کنید که با کد شما جور است. زیر «صدور به‌صورت» CSS، Tailwind، SCSS یا JSON را انتخاب کنید، کادر پیش‌نمایش را بررسی کنید، سپس «کپی کد» را بزنید. CSS متغیرهای :root با نام --color-1 به بعد می‌دهد، SCSS $color-1 به بعد و Tailwind palette-1 به بعد، همه با هگز حروف کوچک. JSON هر رنگ را با هگز حروف بزرگ، اعداد rgb و سهم با یک رقم اعشار می‌دهد. «کپی کل پالت» کدهای هگز را با ویرگول کپی می‌کند. «دانلود نوار PNG» تصویری 1000 × 200 ذخیره می‌کند که هر رنگ به اندازه سهمش پهنا دارد، با نامی مثل photo_palette.png.

مشکلات رایج و راه حل آن‌ها

پیام «نمی‌توان تصویر را بارگذاری کرد. فایل ممکن است خراب یا به فرمت پشتیبانی‌نشده باشد.» را می‌بینید.

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

پیام «report.pdf یک فایل PDF است که این ابزار نمی‌تواند باز کند.» را می‌بینید (با نام و نوع فایل خودتان).

ناحیه رها کردن بایت‌های اول فایل را می‌خواند، پس تغییر نام PDF به .jpg کمکی نمی‌کند. این ابزار JPEG، PNG، WebP، GIF و عکس‌های HEIC آیفون را باز می‌کند. فایل‌های AVIF، BMP، TIFF و SVG رد می‌شوند. فایل نامشخص «نوع فایل پشتیبانی نمی‌شود» و نام خود را می‌گیرد. تصویر را اول به JPEG یا PNG تبدیل کنید. ممکن است پیوندی به ابزاری که فایل را باز می‌کند بعد از پیام بیاید. فایل 0 بایتی، که اغلب جانگهدار OneDrive یا iCloud است، پیام مخصوص خودش را می‌گیرد که می‌خواهد اول آن را دانلود کنید.

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

این پیام بعد از «یا آدرس URL فایل را وارد کنید» و «دریافت» ظاهر می‌شود. مرورگر شما تصویر را از سایت دیگر می‌خواهد و بیشتر سایت‌ها به وب‌سایت دیگری اجازه دانلود فایل‌هایشان را نمی‌دهند. تصویر را روی دستگاه ذخیره کنید و به‌جای آن روی ناحیه رها کنید. پیام دیگری، «The link returned an error (HTTP 404)» با شماره وضعیت خودتان، یعنی خود نشانی شکست خورده است، پس آن را بررسی کنید یا فایل را ذخیره کنید و اینجا رها کنید.

نوار لغزنده «تعداد رنگ‌ها (12)» را می‌گوید اما نمونه‌های کمتری ظاهر می‌شود.

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

پیام «نمی‌توان در کلیپ‌بورد کپی کرد.» را می‌بینید.

مرورگر کپی را رد کرد، که می‌تواند وقتی رخ دهد که صفحه امن نیست، در یک قاب نمایش داده می‌شود، یا مرورگر دسترسی به کلیپ‌بورد را مسدود کرده است. پیام تا وقتی نوار لغزنده را حرکت دهید یا تصویر دیگری بارگذاری کنید می‌ماند. یک بار روی صفحه کلیک کنید و دوباره امتحان کنید. اگر باز هم شکست خورد، متن را در کادر پیش‌نمایش زیر «صدور به‌صورت» انتخاب کنید و دستی کپی کنید، یا از «دانلود نوار PNG» برای ذخیره پالت به‌صورت تصویر استفاده کنید.

مقایسه آن

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