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

مثال عملی

صفحه را باز کنید و کادر «رنگ پایه» از قبل #14b8a6 را دارد، با «پالت برند» انتخاب‌شده. هفت نمونه زیر «پالت برند · 7 رنگ» ظاهر می‌شود: #14B8A6 (پایه)، #EE66BA (تأکیدی)، #E5FAF8 (رنگ روشن)، #14524A (سایه تیره) و سه رنگ خنثی با همان فام، #F3F6F6، #63837F و #1A2322. کارت پایه «روی سفید 2.5» را با «رد» و «روی سیاه 8.4» را با «AAA» می‌خواند. «مکمل» را بزنید و نوار به دو رنگ، #14B8A6 و #EF7381، می‌رسد. زیر «قالب کپی» RGB را انتخاب کنید، سپس «کپی همه» را بزنید. یک پیام کوتاه می‌گوید «2 رنگ کپی شد» و کلیپ‌بورد rgb(20, 184, 166), rgb(239, 115, 129) را دارد. در «بررسی متن و پس‌زمینه» رنگ متن با #000000 روی پس‌زمینه #14B8A6 شروع می‌شود و 8.44:1، «متن معمولی AAA»، «متن درشت AAA» را می‌خواند.

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

• رنگ را به هر شکلی که دارید تایپ کنید. کادر «رنگ پایه» کد هگز را با یا بدون #، در 3 یا 6 رقم، نام CSS مثل teal یا tomato، مقدار rgb() یا hsl() (هر آلفا نادیده گرفته می‌شود) یا اعداد ساده مثل 20 184 166 می‌پذیرد. فاصله‌ها در نام‌ها نادیده گرفته می‌شوند، پس «rebecca purple» کار می‌کند. هگز کامل 6 رقمی هنگام تایپ اعمال می‌شود. هر چیز دیگر وقتی Enter را بزنید یا کادر را ترک کنید اعمال می‌شود. هگز 8 رقمی و oklch() خوانده نمی‌شوند. نقطه‌های گرد یکی از هشت رنگ شروع را تنظیم می‌کنند و مربع انتخابگر رنگ سیستم شما را باز می‌کند.
• نوع پالت را برای کار خود انتخاب کنید. «پالت برند» 7 رنگ با نقش می‌دهد: پایه، تأکیدی، رنگ روشن، سایه تیره و سه خنثی. «مکمل» 2 می‌دهد، «مشابه» 4، «سه‌تایی» 3، «مکمل تقسیم‌شده» 3، «چهارتایی» 4، «تک‌رنگ» 5 و «سایه‌ها» 7. تک‌رنگ رنگ شما را نگه می‌دارد و روشنایی را پله‌پله تغییر می‌دهد. سایه‌ها یک نردبان ثابت از 10 تا 90 درصد روشنایی با فام و اشباع شماست و رنگ دقیق شما را شامل نمی‌شود. انواعی که فام را می‌چرخانند (مکمل، مشابه، سه‌تایی، مکمل تقسیم‌شده، چهارتایی) به روشنایی ادراکی مشابهی در محدوده میانی هدف می‌گیرند.
• آنچه را دوست دارید قفل کنید، سپس دوباره بُر بزنید. روی یک نمونه «قفل کردن این رنگ» را بزنید، سپس «بُر زدن» را بزنید یا پایه جدیدی انتخاب کنید. نمونه‌های قفل‌شده رنگشان را نگه می‌دارند و بقیه عوض می‌شوند. «بُر زدن» پایه تصادفی با اشباع HSL از 50 تا 84 و روشنایی 40 تا 57 انتخاب می‌کند، پس روی رنگ‌های میانی می‌نشیند. قفل‌ها جایگاه نمونه را دنبال می‌کنند، نه رنگ را: نمونه 1 را قفل کنید، پایه را عوض کنید و نمونه 1 رنگ قدیمی را نگه می‌دارد. «ویرایش این رنگ» انتخابگر رنگی برای یک نمونه باز می‌کند و «(ویرایش‌شده)» را به سرتیتر اضافه می‌کند. نمونه ویرایش‌شده‌ای که قفل نکرده باشید دفعه بعد که پالت دوباره ساخته شود جایگزین می‌شود.
• پیش از ارائه، کنتراست را بررسی کنید. هر کارت نسبت‌های «روی سفید» و «روی سیاه» را با یک نشان می‌دهد: «AAA» از 7:1، «AA» از 4.5:1، «AA بزرگ» از 3:1، در غیر این صورت «رد». نسبت‌ها از فرمول روشنایی نسبی WCAG استفاده می‌کنند. در «بررسی متن و پس‌زمینه» رنگ متن و پس‌زمینه را از پالت به‌علاوه سفید و سیاه انتخاب می‌کنید. خط «متن معمولی» AAA را در 7 و AA را در 4.5 درجه‌بندی می‌کند. خط «متن درشت» AAA را در 4.5 و AA را در 3 درجه‌بندی می‌کند. جفت‌های دقیقی را که قصد استفاده دارید آزمایش کنید، چون پالت فقط به این دلیل که هر رنگش خوانا است خوانا نیست.
• قالب کپی را انتخاب کنید، سپس خروجی را. «قالب کپی» تعیین می‌کند کلیک روی نمونه، تگ سایه یا رنگ روشن‌تر، و «کپی همه» چه چیزی کپی کنند: hex، rgb، hsl یا oklch. برای پایه این #14B8A6، rgb(20, 184, 166)، hsl(173, 80%, 40%) و oklch(70.4% 0.123 182.5) است. زیر «صادرات:» دکمه‌ها palette.css، palette.scss، tailwind-colors.js، tailwind-scales.js («Tailwind 50-950»)، palette.json، palette.png، palette.svg، palette.gpl، palette.ase و palette.aco را ذخیره می‌کنند. فایل‌های متنی مقادیر هگز را دارند و JSON رشته‌های rgb، hsl و oklch را هم اضافه می‌کند. PNG برای هر نمونه 200 px پهنا دارد، SVG 160 px. «برچسب هگز روی PNG/SVG» به‌طور پیش‌فرض تیک خورده است.
• پیوند را به اشتراک بگذارید، یا از یک پیش‌تنظیم شروع کنید. «اشتراک‌گذاری نتیجه» پیوندی می‌سازد که رنگ پایه، نوع، ویرایش‌ها و قفل‌ها را بعد از # در نشانی نگه می‌دارد؛ در دستگاه لمسی که پشتیبانی کند، برگه اشتراک‌گذاری را باز می‌کند. پالت اشتراکی می‌تواند 1 تا 12 رنگ داشته باشد. زیر «اینها را امتحان کنید»، «پاستلی»، «خاکی»، «نئونی» و «مناسب برند (AA)» هرکدام 5 رنگ را به‌صورت پالت «سفارشی» بارگذاری می‌کنند، و تغییر پایه پس از آن به «پالت برند» برمی‌گردد. «انتخاب از صفحه» فقط در مرورگرهایی ظاهر می‌شود که ویژگی EyeDropper را دارند، عمدتاً مرورگرهای مبتنی بر Chromium.

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

پیام «این رنگ شناخته نشد. #14b8a6، teal یا rgb(20, 184, 166) را امتحان کنید.» را می‌بینید.

متن را نمی‌شد به‌عنوان رنگ خواند و کادر به پایه فعلی برمی‌گردد. علت‌های معمول هگز 4 یا 8 رقمی مثل #14b8a680، مقدار oklch()، نام رنگی که نام CSS نیست و اعداد خارج از محدوده مثل rgb(300, 0, 0) یا hsl(10, 120%, 50%) هستند. آن را دوباره به‌صورت هگز 3 یا 6 رقمی، نام CSS، یا rgb() یا hsl() با مقادیر درون محدوده تایپ کنید، سپس Enter را بزنید.

رنگ پایه جدیدی انتخاب کردید، اما یک نمونه رنگ قدیمی را نگه داشت.

آن نمونه قفل است. دکمه قفل روی کارت فیروزه‌ای می‌شود و راهنمای آن «باز کردن قفل این رنگ» را می‌خواند. نمونه‌های قفل‌شده هر بار که پالت دوباره ساخته شود، از جمله بعد از پایه جدید، نوع جدید یا «بُر زدن»، حفظ می‌شوند. دوباره قفل را بزنید تا آزاد شود. قفل‌ها به جایگاه نمونه وصل‌اند، پس قفل روی نمونه 1 بعد از تغییر از «پالت برند» به «سه‌تایی» هم می‌ماند.

یک پیام کوتاه می‌گوید «کپی نشد».

هر دو مسیر کلیپ‌بورد شکست خوردند: API کلیپ‌بورد مرورگر، سپس یک کادر متن پنهان با دستور کپی. API کلیپ‌بورد در صفحه‌های ناامن و بعضی قاب‌های ایزوله وجود ندارد، و مرورگر هم می‌تواند وقتی صفحه فوکوس ندارد آن را رد کند. یک بار روی صفحه کلیک کنید و دوباره امتحان کنید، یا صفحه را در یک تب عادی مرورگر باز کنید. اگر کپی مسدود ماند، از دکمه‌های خروجی CSS، JSON یا Tailwind برای ذخیره فایل استفاده کنید.

دکمه «انتخاب از صفحه» نیست.

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

PNG یا SVG ذخیره‌شده کد هگزی روی نمونه‌ها ندارد.

کادر «برچسب هگز روی PNG/SVG» بدون تیک است. وقتی صفحه باز می‌شود تیک خورده است، پس کسی برش داشته. با تیک، هر نمونه کد هگز خود را با حروف بزرگ دارد، با جوهر تیره یا روشنی که برای کنتراست انتخاب شده. کادر فقط روی فایل‌های PNG و SVG اثر دارد. خروجی‌های دیگر خود مقادیر رنگ را دارند و برچسب ندارند. کادر را تیک بزنید، سپس دوباره PNG یا SVG را بزنید.

مقایسه آن

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