Utiliome

مولد پالت Material

پالت رنگ Material Design را آنلاین و رایگان بسازید. مولد خصوصی و آنی داخل مرورگر با صفر بارگذاری روی سرور و بدون ثبت‌نام.

نقش‌های رنگ Material Design 3 (LIGHT حالت)

برای کپی HEX روی هر رنگ کلیک کنید
Primary

High-emphasis fill for primary components

#564389RGB(86, 67, 137)
On Primary

Text & icons on Primary background

#FFFFFFRGB(255, 255, 255)
Primary Container

Standout container background

#E1DDEERGB(225, 221, 238)
On Primary Container

Text on Primary Container

#151122RGB(21, 17, 34)
Secondary

Less prominent accent components

#605A72RGB(96, 90, 114)
On Secondary

Text & icons on Secondary

#FFFFFFRGB(255, 255, 255)
Secondary Container

Container fill for secondary elements

#E4E2E9RGB(228, 226, 233)
On Secondary Container

Text on Secondary Container

#18161DRGB(24, 22, 29)
Tertiary

Contrasting accent element

#7E4E71RGB(126, 78, 113)
On Tertiary

Text & icons on Tertiary

#FFFFFFRGB(255, 255, 255)
Tertiary Container

Container fill for tertiary elements

#ECDFE8RGB(236, 223, 232)
On Tertiary Container

Text on Tertiary Container

#20131CRGB(32, 19, 28)
Error

Errors and destructive states

#BD0F0FRGB(189, 15, 15)
On Error

Text & icons on Error

#FFFFFFRGB(255, 255, 255)
Error Container

Background for error messages

#FBD0D0RGB(251, 208, 208)
On Error Container

Text on Error Container

#2F0404RGB(47, 4, 4)
Surface

Base surface color for cards & modals

#FCFCFDRGB(252, 252, 253)
On Surface

Primary body text on surface

#19181BRGB(25, 24, 27)
Surface Variant

Secondary surface background

#E4E3E8RGB(228, 227, 232)
On Surface Variant

Secondary body text & icons

#494653RGB(73, 70, 83)
Outline

Borders and dividers

#7A758ARGB(122, 117, 138)
ابزارهایی که شاید لازم داشته باشید

ابزارهای مرتبط

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

پالت رنگ و گرادیان زیبا بسازید، تنظیم کنید و برای پروژه رابط کاربری خروجی بگیرید.

سازنده گرادیان CSS

گرادیان زیبای CSS را دیداری بسازید و کد را فوری کپی کنید.

سازنده Glassmorphism

افکت شیشه مات برای رابط بسازید. محو، شفافیت و حاشیه را تنظیم کنید و CSS بگیرید.

بررسی‌گر رنگ دسترس‌پذیر

انطباق کنتراست WCAG 2.1 را بررسی کنید، کوررنگی را شبیه‌سازی کنید و جفت رنگ دسترس‌پذیر پیدا کنید.

استخراج پالت رنگ

پالت هماهنگ ۵ تا ۱۲ رنگ را از هر تصویر استخراج کنید. با قطره‌چکان پیکسل را بردارید و HEX، RGB، HSL، CSS، Tailwind یا PNG خروجی بگیرید.

استخراج‌گر رنگ غالب

رنگ غالب و درصد پوشش پیکسل را با خوشه‌بندی محلی K-Means پیدا کنید. پوسته، کنتراست WCAG و HEX/RGB را ببینید.

سازنده فاویکون

بسته کامل فاویکون سایت را از PNG، SVG، JPG یا WebP بسازید؛ شامل favicon.ico چنداندازه، آیکون Apple و PWA و برچسب HTML.

سازنده ICO

PNG، SVG، JPG یا WebP را آنلاین به فایل .ICO ویندوز چندوضوح تبدیل کنید. لایه‌های ۱۶ تا ۲۵۶ پیکسل RGBA را در یک فایل بگذارید.

۱۰۰٪ خصوصی • بدون آپلود فایل به سرور

چرا از مولد پالت Material رایگان Utiliome استفاده کنید؟

از پایه برای حریم خصوصی سخت‌گیرانه، اجرای فوری و بدون اصطکاک ساخته شده. بدون اشتراک، دیوار پرداخت یا ثبت‌نام.

تولید رنگ کاملاً رایگان و نامحدود

پالت نامحدود رنگ Material Design، پالت تونال، تنوع سایه hex و طرح رنگ دسترس‌پذیر UI بسازید بدون دیوار پرداخت پنهان، سهمیه روزانه یا لایه اشتراک حق بیمه.

صفر بارگذاری روی سرور و صددرصد خصوصی

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

خروجی آنی پالت داخل مرورگر

نمونه رنگ دسترس‌پذیر Material Design را فوری بدون تأخیر شبکه بسازید. توکن رنگ را مستقیم به ویژگی سفارشی CSS، پیکربندی Tailwind CSS، JSON یا XML اندروید بدون ثبت‌نام خروجی دهید.

Utiliome در برابر جایگزین‌های ابری سنتی

موتور محلی WebAssembly ما را با ابزارهای ابری قدیمی مقایسه کنید.

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

چگونه مولد پالت Material را در ۳ گام آسان استفاده کنید

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

1

رنگ بذر اصلی را انتخاب یا وارد کنید

رنگ را با انتخابگر تعاملی رنگ انتخاب کنید یا کد دقیق رنگ برند اصلی HEX، RGB یا HSL را در فیلد ورودی مولد پالت Material بچسبانید.

2

پالت تونال و نمونه را فوری بسازید

ببینید ابزار فوری پالت کامل تونال Material Design 2 و Material 3 (M3) را حساب می‌کند و سایه تأکید اصلی، ثانویه، سوم، خنثی و سطح می‌سازد.

3

کد رنگ را کپی یا توکن طراحی را خروجی دهید

کد hex تکی، نسبت کنتراست WCAG و نمونه رنگ را با یک کلیک کپی کنید، یا کل پالت را به‌صورت متغیر CSS، SCSS، پیکربندی Tailwind یا توکن طراحی JSON خروجی دهید.

درک تولید پالت Material Design: ساخت سامانه رنگ منسجم برای اپ وب و موبایل

پاسخ کوتاه: تولید پالت Material Design فرایند مهندسی خودکار ساخت سامانه رنگ هماهنگ و دسترس‌پذیر است—شامل نمونه اصلی، ثانویه، تأکید، سطح و تونال—که ریاضی از رنگ بذر بر اساس رهنمود سامانه Material Design گوگل مشتق می‌شود.

رنگ بی‌چون‌وچرا یکی از حیاتی‌ترین عنصر طراحی در مهندسی مدرن اپ وب، توسعه بومی اپ موبایل و پلتفرم نرم‌افزار دیجیتال سازمانی است. هویت دیداری فوری برند را می‌گذارد، سلسله‌مراتب شهودی رابط کاربر را منتقل می‌کند، توجه کاربر را به عنصر کلیدی فراخوان به اقدام هدایت می‌کند و ادراک روان‌شناختی را در تجربه دیجیتال کاربر عمیق شکل می‌دهد. اما ساخت سامانه جامع، کاملاً دسترس‌پذیر و ریاضی متعادل رنگ از صفر چالش شدید مهندسی طراحی برای توسعه‌دهنده فرانت‌اند، طراح UX/UI و تیم مهندسی محصول دیجیتال می‌سازد. انتخاب یک کد hex رنگ برند اصلی ساده است، اما تولید سایه هماهنگ تأکید ثانویه، سطح پس‌زمینه ظریف، نمونه حالت تعاملی (هاور، فوکوس، فشرده، فعال، غیرفعال)، تون پس‌زمینه ظرف و جفت متن خوانا با کنتراست بالا نیازمند پایبندی سخت و پرزحمت به علم رنگ، مدل روشنایی ادراکی و استاندارد طراحی دیداری است.

سامانه Material Design گوگل طراحی مدرن UI دیجیتال را با گذاشتن چارچوب دیداری استاندارد و نظام‌مند برای مدیریت مقیاس‌پذیر رنگ اساساً متحول کرد. در Material Design—شامل هم Material Design 2 قدیمی (MD2) و هم مشخصات مدرن Material You / Material 3 (M3)—رنگ به پالت تونال نظام‌مند و ریاضی ساخت‌یافته است. به‌جای اتکا به انتخاب ذهنی یا دلبخواه رنگ، رنگ بذر بنیادی به طیف غنی و کامل نقش کارکردی رنگ در مقادیر متمایز روشنایی تبدیل می‌شود (از تون ۰ سیاه مطلق تا تون ۱۰۰ سفید خالص به‌صورت نظام‌مند). این پالت تونال ستون فقرات ساختاری تم پویا UI را می‌سازد و کنتراست دیداری یکدست، سطح ظرف دسترس‌پذیر، حالت بازخورد تعاملی روشن و تولید بی‌نقص تم حالت تاریک / روشن را در پلتفرم وب و موبایل تضمین می‌کند.

مولد پالت Material در Utiliome این فرایند پیچیده مهندسی طراحی را کاملاً داخل مرورگر خودکار می‌کند. با دادن یک کد رنگ بذر (در قالب HEX، RGB یا HSL)، موتور قدرتمند سمت کاربر جابه‌جایی دقیق فضای رنگ HSL، رابطه کروما و منحنی درخشندگی لازم برای ساخت پالت کامل Material Design را ریاضی حساب می‌کند. فوری رنگ برند اصلی، تون مکمل ثانویه، نمونه تأکید سوم، سطح پس‌زمینه خنثی، نشانگر خطا و جفت متناظر متن روی‌رنگ با کنتراست بالا می‌سازد. این رویکرد نظام‌مند تضمین می‌کند هر عنصر واحد UI در اپ وب یا چیدمان موبایل هماهنگی دیداری بی‌نقص، بیان یکدست برند و انطباق سخت با مشخصات مدرن طراحی را نگه دارد.

چرا پردازش صددرصد خصوصی داخل مرورگر برای سامانه طراحی اختصاصی و برندسازی سازمانی ضروری است

پاسخ کوتاه: مولد پالت Material در Utiliome صددرصد سمت کاربر در جعبه شنی محلی مرورگر با الگوریتم مدرن JavaScript اجرا می‌شود تا رنگ برند منتشرنشده، توکن طراحی، پروژه مشتری و سامانه طراحی اختصاصی هرگز به سرور دوردست بیرونی بارگذاری نشود.

در توسعه معاصر محصول دیجیتال، برندسازی شرکتی و مهندسی فرانت‌اند سازمانی، دارایی طراحی و هویت دیداری مالکیت فکری اصلی شرکتی است. وقتی آژانس دیجیتال، تیم برندسازی شرکتی یا توسعه‌دهنده مستقل نرم‌افزار محصول نرم‌افزار تازه طراحی می‌کند، پلتفرم وب سازمانی را بازطراحی می‌کند یا سامانه طراحی مشتری می‌سازد، انتخاب رنگ و توکن طراحی اغلب تا راه‌اندازی رسمی محصول تحت توافق‌نامه سخت عدم افشا (NDA) محافظت می‌شود. استفاده از ابزار سنتی رنگ آنلاین یا مولد قدیمی ابزار وب اغلب نیازمند بارگذاری ورودی طراحی، فهرست hex یا پیکربندی برند به سرور بک‌اند دوردست شخص ثالث است و دارایی برندسازی منتشرنشده را در برابر آسیب‌پذیری امنیت، ردیابی لاگ سرور، نشت ناخواسته داده و برداشت داده شخص ثالث افشا می‌کند.

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

Utiliome این چالش امنیت، انطباق و گردش کار را با پذیرش معماری سخت صفر بارگذاری روی سرور و وب صددرصد خصوصی سمت کاربر برطرف می‌کند. مولد پالت Material همه تبدیل فضای رنگ، ریاضی رنگ HSL، محاسبه کنتراست WCAG و خروجی توکن طراحی را محلی داخل جعبه شنی ایزوله موتور JavaScript مرورگر اجرا می‌کند. صفر بایت داده رنگ، فراداده پروژه یا ورودی کاربر هرگز رایانه محلی را ترک نمی‌کند. هیچ درخواست شبکه HTTP آغاز نمی‌شود، هیچ کوکی ردیابی انتخاب طراحی را ذخیره نمی‌کند و هیچ پایگاه دوردست نمونه رنگ تولیدشده را ثبت نمی‌کند.

این معماری اجرای سمت کاربر حریم خصوصی بی‌رقیب، امنیت ضدگلوله و اجرای محلی برق‌آسا می‌دهد. تبدیل رنگ آنی در لحظه همزمان با تنظیم لغزنده رنگ یا ورود کد hex رخ می‌دهد و رفت‌وبرگشت شبکه را کاملاً حذف می‌کند. چه تم رنگ برای داشبورد مالی سازمانی، اپ خصوصی سلامت یا بازطراحی حساس شرکتی تحت چارچوب سخت انطباق مقرراتی (مثل GDPR، SOC 2، HIPAA یا ISO 27001) بسازید، Utiliome اطمینان کامل می‌دهد که توکن طراحی همیشه صددرصد خصوصی، امن و تحت کنترل مطلق شما بماند.

Material Design 2 در برابر Material 3 (M3): تسلط بر نقش رنگ، پالت تونال و طرح نظام‌مند رنگ

پاسخ کوتاه: Material 3 الگوریتم رنگ پویا و نقش کلیدی رنگ را در ۱۳ مقدار تونال (۰ تا ۱۰۰) معرفی می‌کند، در حالی که Material 2 به مقیاس سایه عددی ثابت (۵۰ تا ۹۰۰) متکی بود. Utiliome از تولید کامل توکن رنگ برای هر دو استاندارد صنعت پشتیبانی می‌کند.

برای بهره‌برداری مؤثر از سامانه رنگ Material Design در اپ مدرن وب و موبایل، درک تکامل معماری میان Material Design 2 (MD2) و آخرین مشخصات Material 3 گوگل (M3 / Material You) ضروری است. درک این تفاوت بنیادی ساختاری به توسعه‌دهنده فرانت‌اند، مهندس سامانه طراحی و طراح UI قدرت می‌دهد پایگاه کد و توکن طراحی CSS را کارا در چارچوب محبوب مثل React، Vue، Angular، Svelte، Flutter و پلتفرم بومی اپ اندروید ساختاربندی کند.

در Material Design 2 سنتی، پالت رنگ حول افزایش عددی ثابت سایه ساخت‌یافته بود: ۵۰، ۱۰۰، ۲۰۰، ۳۰۰، ۴۰۰، ۵۰۰ (نماینده سایه پایه اصلی)، ۶۰۰، ۷۰۰، ۸۰۰ و ۹۰۰، کنار مقیاس سایه تأکید (A100، A200، A400، A700). هرچند MD2 مقیاس سایه سرراست و آشنا می‌داد، توسعه‌دهنده اغلب هنگام جفت کردن عنصر متن و آیکون روی ظرف پس‌زمینه تون میانی با ناسازگاری کنتراست روبه‌رو می‌شد و تنظیم دستی رنگ برای برآوردن رهنمود پایه دسترس‌پذیری وب لازم بود.

Material 3 (M3) این پارادایم را با معرفی پالت تونال الگوریتمی و نقش معنایی رنگ مدرن کرد. به‌جای مقیاس ایستا سایه، M3 از رنگ بذر ۵ پالت کلیدی تونال می‌سازد: اصلی، ثانویه، سوم، خنثی و گونه خنثی. هر پالت تونال شامل ۱۳ گام دقیق تونال است (۰، ۱۰، ۲۰، ۳۰، ۴۰، ۵۰، ۶۰، ۷۰، ۸۰، ۹۰، ۹۵، ۹۸، ۱۰۰) که عدد تون نماینده روشنایی ادراکی دقیق در فضای رنگ HCT (فام، کروما، تون) است. تم کنتراست بالا، حالت تاریک و حالت روشن خودکار مشتق می‌شود: مثلاً ظرف اصلی حالت روشن از تون ۹۰ جفت با متن تون ۱۰ («روی ظرف اصلی») استفاده می‌کند، در حالی که ظرف اصلی حالت تاریک خودکار به تون ۳۰ جفت با متن تون ۹۰ برمی‌گردد.

مولد پالت Material در Utiliome فاصله میان گردش کار قدیمی MD2 و مدرن M3 را با ارائه تولید آنی و یکپارچه رنگ برای هر دو پارادایم همزمان پر می‌کند. ابزار خودکار سری کامل سایه MD2 (۵۰-۹۰۰) و پالت تونال M3 (۰-۱۰۰) را حساب می‌کند و توکن رنگ کاملاً برچسب‌خورده و آماده استفاده خروجی می‌دهد. توسعه‌دهنده می‌تواند بی‌نقص ویژگی سفارشی CSS (--md-sys-color-primary)، نقشه SCSS، گسترش تم Tailwind CSS یا فایل توکن JSON را مستقیم در پروژه کپی کند و زمان کدنویسی دستی رنگ را از ساعت به ثانیه برساند.

بهینه‌سازی دسترس‌پذیری رنگ وب: برآوردن استاندارد WCAG با نمونه Material Design و نسبت کنتراست

پاسخ کوتاه: دسترس‌پذیری در Material Design با انتخاب جفت رنگ متن و سطح که حداقل نسبت کنتراست WCAG 2.1 AA (۴٫۵:۱) و AAA (۷:۱) را در هر دو تم روشن و تاریک برآورده یا فراتر رود تضمین می‌شود.

ساخت طرح رنگ دیداری چشمگیر فقط نیمی از نبرد در طراحی مدرن محصول دیجیتال است؛ تضمین دسترس‌پذیری فراگیر برای کاربر با آسیب بینایی، کمبود دید رنگ یا شرایط متغیر نمایش دستگاه به همان اندازه حیاتی است. رهنمود دسترس‌پذیری محتوای وب (WCAG 2.1 و WCAG 2.2) نسبت حداقل سخت کنتراست میان متن/آیکون پیش‌زمینه و ظرف پس‌زمینه را الزام می‌کند. شکست در انطباق با استاندارد دسترس‌پذیری WCAG نه فقط میلیون‌ها کاربر کم‌بینا یا آسیب‌دیده بینایی را بیگانه می‌کند بلکه سازمان کسب‌وکار را در برابر ریسک حقوقی انطباق دسترس‌پذیری تحت ADA (قانون آمریکاییان دارای معلولیت) و مقررات قانون دسترس‌پذیری اروپا افشا می‌کند.

زیر رهنمود WCAG، متن معمولی بدنه و آیکون کارکردی UI باید حداقل نسبت کنتراست ۴٫۵:۱ برای گذراندن انطباق سطح AA به‌دست آورد، در حالی که متن درشت پررنگ نسبت ۳:۱ می‌خواهد. برای انطباق سطح بالاتر WCAG سطح AAA، متن بدنه باید نسبت سخت ۷:۱ به‌دست آورد. طراحی دستی پالت رنگ اغلب به شکست ظریف و پنهان کنتراست می‌انجامد؛ مثل گذاشتن متن خاکستری میانی روی سطح ظرف پاستلی یا استفاده از دکمه تأکید کم‌کنتراست در حالت تاریک.

مولد پالت Material در Utiliome بررسی بلادرنگ کنتراست WCAG را مستقیم در موتور دیداری‌سازی پالت ادغام می‌کند. همزمان با محاسبه نمونه و مقیاس تونال، ابزار نسبت کنتراست را در همه جفت کلیدی رنگ پس‌زمینه و پیش‌زمینه ارزیابی می‌کند. امتیاز عددی دقیق کنتراست و نشانگر گذر/شکست برای انطباق WCAG AA و AAA برای متن بدنه و مؤلفه بزرگ UI را روشن نمایش می‌دهد.

افزون بر این، با پایبندی به قرارداد نام‌گذاری «روی‌رنگ» Material Design (مثلاً primary جفت با on-primary، surface-variant جفت با on-surface-variant)، مولد پیش‌فرض دسترس‌پذیر کنتراست را از جعبه تضمین می‌کند. متن تون ۱۰ یا تون ۲۰ خودکار برای ظرف سطح تون ۹۰ توصیه می‌شود تا خوانایی صددرصد دسترس‌پذیر متن در مانیتور دسکتاپ و نمایش موبایل زیر نور شدید خورشید تضمین شود. با ادغام Utiliome در گردش کار طراحی و توسعه، تضمین می‌کنید طرح رنگ صددرصد منطبق، فراگیر، دسترس‌پذیر و زیبا برای همه کاربر باشد.

پرسش‌های رایج

پرسش‌های رایج و راهنمای فنی مولد پالت Material

هرچه برای استفاده از مولد پالت Material رایگان و آنلاین Utiliome لازم است.

آیا این مولد پالت Material کاملاً رایگان است؟

بله، مولد پالت Material در Utiliome برای همیشه کاملاً رایگان است بدون دیوار پرداخت پنهان، سقف تولید روزانه، محدودیت قابلیت یا اشتراک پولی.

آیا رنگ سفارشی برند یا ورودی طراحی به سرور دوردست بارگذاری می‌شود؟

خیر. همه ریاضی رنگ، محاسبه پالت و تبدیل خروجی صددرصد سمت کاربر داخل مرورگر انجام می‌شود. صفر بارگذاری روی سرور رخ می‌دهد و داده طراحی هرگز دستگاه را ترک نمی‌کند.

برای خروجی نمونه رنگ باید ثبت‌نام کنم یا حساب بسازم؟

ثبت‌نام یا عضویت لازم نیست. می‌توانید فوری رنگ بذر را انتخاب کنید، پالت کامل Material بسازید و کد CSS/JSON را بدون ساخت حساب کپی یا دانلود کنید.

آیا این ابزار هم نمونه رنگ Material Design 2 و هم Material 3 (M3) می‌سازد؟

بله! مولد هم مقیاس کلاسیک سایه Material Design 2 (۵۰-۹۰۰) و هم پالت تونال مدرن Material 3 (M3) (اصلی، ثانویه، سوم، خنثی) را در ۱۳ گام روشنایی حساب می‌کند.

می‌توانم پالت تولیدشده Material را مستقیم به CSS یا Tailwind CSS خروجی دهم؟

بله، می‌توانید کل سامانه رنگ را قالب‌شده به‌صورت ویژگی سفارشی CSS (متغیر :root)، متغیر SCSS، شیء پیکربندی رنگ Tailwind CSS یا توکن استاندارد طراحی JSON کپی یا دانلود کنید.