پالت رنگ هر عنصر روی یک صفحه وب را اسکن میکند و مجموعه کامل رنگهای استفادهشده را استخراج میکند — از متن و پسزمینهها تا حاشیهها، سایهها و تأکیدها. رنگها به صورت نمونههای بصری مرتبشده بر اساس فرکانس (پرکاربردترین اول) نمایش داده میشوند، هر کدام مقدار HEX و تعداد استفاده را نشان میدهد. برای کپی روی هر نمونه کلیک کنید، یا کل پالت را به عنوان یک فهرست کدهای رنگی صادر کنید.
هر وبسایت با طراحی خوب یک پالت رنگ ثابت دارد — معمولاً ۳-۸ رنگ اصلی به علاوه چند خنثی. پالت رنگ این پالت را به صورت خودکار با اسکن ویژگیهای محاسبهشده color، background-color، border-color و box-shadow هر عنصر استخراج میکند. نتیجه یک مجموعه مرتبشده بر اساس فرکانس از هر رنگ روی صفحه است که تصویر کامل سیستم رنگی سایت را به شما میدهد. رنگهای غالب (رنگ اصلی برند، رنگ پسزمینه، رنگ متن) با شمارش استفاده بالا اول ظاهر میشوند. رنگهای تأکیدی و مقادیر یکباره پایینتر ظاهر میشوند. این برای تحقیق طراحی بسیار ارزشمند است — از هر وبسایتی بازدید کنید و پالت رنگ دقیق آن را در چند ثانیه استخراج کنید. همچنین برای ممیزی سایت خودتان مفید است: آیا رنگهای سرگردانی هستند که به سیستم طراحی شما تعلق ندارند؟ آیا از ۵ سایه کمی متفاوت خاکستری استفاده میکنید در حالی که مشخصات طراحی فقط ۳ تعریف میکند؟ پالت رنگ کل استفاده رنگ را قابل مشاهده و قابل شمارش میکند.
هر عنصر قابل مشاهده روی صفحه را اسکن میکند و رنگها را از ویژگیهای محاسبهشده استخراج میکند: color، background-color، border-color، رنگ box-shadow، outline-color و text-decoration-color. هر رنگ استفادهشده روی صفحه ضبط میشود.
رنگها بر اساس تعداد استفاده مرتب میشوند — پرکاربردترین رنگ اول ظاهر میشود. رنگهای اصلی برند و پسزمینهها به بالا میآیند، در حالی که رنگهای تأکیدی یکباره در پایین ظاهر میشوند. فوراً رنگهای اصلی، ثانوی و تأکیدی صفحه را ببینید.
هر رنگ به صورت یک نمونه بزرگ بصری با کد HEX و تعداد استفاده نمایش دادهشده زیر آن رندر میشود. نمونهها به اندازه کافی بزرگ هستند تا تفاوتهای سایه ظریف را متمایز کنند (مانند #333 در مقابل #2a2a2a).
روی هر نمونه رنگ کلیک کنید تا مقدار HEX آن فوراً در clipboard کپی شود. نیازی به باز کردن یک پنل رنگ یا گفتگوی ثانوی نیست — یک کلیک، کپی شد، تمام.
برای کپی کل پالت به عنوان یک فهرست قالببندیشده از کدهای HEX روی «صادر کردن همه» کلیک کنید. در یک ابزار طراحی، فایل متغیرهای CSS یا مستندات رنگ paste کنید. فهرست ترتیب مرتبسازی فرکانس را حفظ میکند.
رنگها نرمالسازی میشوند (نمایشهای rgb و hex از همان رنگ ادغام میشوند) و حذف تکراری میشوند. پالت فقط رنگهای منحصربهفرد را نشان میدهد با تعداد استفاده ترکیبشده برای نمایشهای تکراری.
از وبسایتهایی با طرحهای رنگی زیبا بازدید کنید و پالت دقیق آنها را استخراج کنید. از رنگها به عنوان نقطه شروع برای طراحی خودتان استفاده کنید — یا صرفاً مستند کنید کدام ترکیبهای رنگی خوب با هم کار میکنند.
پالت رنگ را روی سایت خودتان اجرا کنید تا ثبات رنگ برند را تأیید کنید. آیا ۴ آبی کمی متفاوت وجود دارد در حالی که باید ۱ باشد؟ آیا رنگهای خارج از برند نفوذ میکنند؟ مرتبسازی فرکانس ناسازگاریها را آشکار میکند.
پالت را صادر کنید و آن را به ویژگیهای سفارشی CSS تبدیل کنید (--color-primary، --color-secondary و غیره). خروجی مرتبشده بر اساس فرکانس به شما میگوید کدام رنگها نقش اصلی، ثانوی و تأکیدی را لایق هستند.
پالتهای رنگی را از وبسایتهای رقیب استخراج کنید تا موضعگیری برند آنها را درک کنید. رنگهای گرم در مقابل سرد، کنتراست بالا در مقابل محجوب — پالت انتخابهای طراحی عمدی را آشکار میکند.
همه رنگهای متن را در کنار رنگهای پسزمینه ببینید. آیا ترکیبات متن-پسزمینهای با کنتراست بسیار پایین وجود دارد؟ پالت مجموعه کامل رنگها را برای بررسی در برابر الزامات کنتراست WCAG به شما میدهد.
داک شناور DevSuite Pro را باز کرده و روی آیکون پالت رنگ کلیک کنید. ابزار هر عنصر روی صفحه را اسکن میکند و همه مقادیر رنگ را استخراج میکند.
یک شبکه از نمونههای رنگی مرتبشده بر اساس فرکانس استفاده ظاهر میشود. پرکاربردترین رنگها در بالا هستند. هر نمونه کد HEX و تعداد عناصر استفادهکننده از آن رنگ را نشان میدهد.
روی هر نمونه کلیک کنید تا مقدار HEX آن در clipboard کپی شود. یک تأییدیه کوتاه ظاهر میشود.
برای کپی هر رنگ به عنوان یک فهرست قالببندیشده «صادر کردن همه» را کلیک کنید. در فایل متغیرهای CSS، ابزار طراحی یا مستنداتتان paste کنید.
به صفحات مختلف روی همان سایت بروید و پالتها را استخراج کنید تا ثبات رنگ در سراسر سایت را تأیید کنید.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.
