تولیدکننده پالت رنگ

سازنده پالت رنگ

سازنده پالت رنگ از یک رنگ پایه شروع می کند و ترکیب های هماهنگ برای طراحی رابط کاربری، برندینگ، ارائه، نمودار یا نمونه اولیه می سازد. رنگ پایه را با color picker یا مقدار HEX وارد می کنید و سپس نوع هارمونی را انتخاب می کنید. ابزار پیش نمایش رنگ پایه، مقدار HEX، RGB و HSL را نمایش می دهد و swatch های پالت را می سازد. با کلیک روی هر swatch، کد HEX آن کپی می شود.

هارمونی های رنگی پشتیبانی شده

حالت complementary رنگ مقابل در چرخه رنگ را در نظر می گیرد و برای تضاد قوی مناسب است. analogous رنگ های نزدیک به رنگ پایه را می سازد و نتیجه آرام تر و یکپارچه تر است. triadic سه رنگ با فاصله ۱۲۰ درجه ایجاد می کند. split از دو رنگ نزدیک به مکمل استفاده می کند و تعادل بیشتری نسبت به مکمل مستقیم دارد. tetradic چهار رنگ با فاصله های ۹۰ درجه می دهد و mono چند روشنایی از همان hue را تولید می کند.

خروجی را چگونه استفاده کنیم؟

دکمه copy all فهرست رنگ ها را با کاما کپی می کند و دکمه copy CSS متغیرهای ساده --color-1 تا --color-n می سازد. می توانید رنگ اول را برای برند یا پس زمینه، رنگ دوم را برای دکمه، رنگ های بعدی را برای نمودار، badge یا وضعیت ها استفاده کنید. در طراحی واقعی بهتر است نقش هر رنگ را نام گذاری کنید؛ مثلا primary، accent، success یا surface، نه فقط شماره رنگ.

نکات دسترس پذیری و برند

پالت زیبا همیشه خوانا نیست. پیش از استفاده، کنتراست متن و پس زمینه را بررسی کنید و رنگ های هشدار، موفقیت و خطا را فقط با رنگ منتقل نکنید؛ آیکن یا متن کمکی هم لازم است. اگر برند شما رنگ اصلی ثابت دارد، از حالت های analogous یا mono برای ساخت سطوح نرم تر استفاده کنید و از complementary برای تاکید محدود کمک بگیرید. این ابزار پیشنهاد اولیه می دهد، اما انتخاب نهایی باید با زمینه محصول، مخاطب و خوانایی سنجیده شود.

از پالت تا رابط کاربری

یک پالت خوب فقط مجموعه ای از رنگ های زیبا نیست؛ هر رنگ باید وظیفه داشته باشد. یکی را برای اقدام اصلی، یکی را برای پس زمینه، یکی را برای مرز یا سطح دوم و چند رنگ را برای نمودار یا وضعیت انتخاب کنید. پس از کپی پالت، نقش ها را در پروژه نام گذاری کنید تا استفاده تیمی قابل پیش بینی بماند.