طیف کامل تینت‌ها و سایه‌ها را از یک رنگ تولید کنید — گام روشن‌کردن/تاریک‌کردن و تعداد سایه را انتخاب کنید، سپس هر مقدار را فوری کپی کنید.

رنگ پایه
گام
%
هر سایه چقدر روشن‌تر/تاریک‌تر می‌شود (۱–۲۵٪).
تعداد سایه
چند تینت و سایه در هر طرف رنگ پایه تولید شود.
گرادیان
سایه‌های تولیدشده

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


درباره مولد سایه‌های رنگ

تولیدکننده سایه‌های رنگی یک رنگ را به یک محدوده کامل از تینت‌ها و سایه‌ها گسترش می‌دهد. یک رنگ پایه به آن بدهید و این ابزار در یک طرف تینت‌های به‌تدریج روشن‌تر و در طرف دیگر سایه‌های به‌تدریج تیره‌تر تولید می‌کند؛ همان شیب کلاسیک به سبک ۵۰ تا ۹۰۰ که در سیستم‌های طراحی مدرن استفاده می‌شود.

دو کنترل خروجی را شکل می‌دهند: درصد گام تعیین می‌کند هر سایه چقدر روشن‌تر یا تیره‌تر شود (۱ تا ۲۵ درصد در هر گام)، و تعداد مشخص می‌کند چند تینت و سایه در هر طرف رنگ پایه ظاهر شود، تا سقف ده تا. یک نوار گرادیان کل شیب را در یک نگاه پیش‌نمایش می‌کند.

تولید به‌محض تایپ شما بلافاصله در مرورگرتان انجام می‌شود؛ چیزی به سرور فرستاده نمی‌شود. هر مقدار جداگانه، فهرست کامل، یا کل شیب را به‌صورت متغیرهای CSS کپی کنید، آماده برای قرار گرفتن در یک فایل توکن طراحی یا یک مقیاس رنگی به سبک Tailwind.

نحوه استفاده از مولد سایه‌های رنگ

  1. یک رنگ پایه با انتخاب‌گر بردارید یا یک مقدار تایپ کنید؛ برای الهام روی «رنگ تصادفی» کلیک کنید.
  2. درصد گام را برای کنترل شدت روشن‌شدن یا تیره‌شدن هر سایه تنظیم کنید.
  3. تعداد سایه‌ها را انتخاب کنید تا مشخص شود چند تینت و سایه در هر طرف ظاهر شود.
  4. روی یک نمونه رنگ کلیک کنید تا کپی شود، یا از «کپی همه» و «کپی متغیرهای CSS» برای کل شیب استفاده کنید.

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

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

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

تعداد را روی ۴ یا ۵ در هر طرف تنظیم کنید تا مجموعاً نُه تا یازده نمونه رنگ، با رنگ پایه در وسط، به دست آورید. گامی حدود ۸ تا ۱۰ درصد معمولاً فاصله‌گذاری مشابه مقیاس‌های ۵۰ تا ۹۰۰ در فریم‌ورک‌های محبوب می‌دهد.

گام‌های کوچک (۳ تا ۶ درصد) تفاوت‌های ظریف هاور و حاشیه ایجاد می‌کنند؛ گام‌های متوسط (۸ تا ۱۲ درصد) برای شیب‌های کامل سیستم طراحی مناسب‌اند؛ گام‌های بزرگ (۱۵ تا ۲۵ درصد) مجموعه‌های پرکنتراست و پوستری می‌سازند. پیش‌نمایش گرادیان را نگاه کنید؛ یک شیب خوب باید یکنواخت تیره شود بدون نواربندی.

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

اشتراک‌گذاری

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

این ابزار رایگان را به وب‌سایت خود اضافه کنید — کد زیر را کپی و جای‌گذاری کنید.