آیا برای یک طرح اولیه، نمودار یا بوم خالی به یک رنگ نیاز دارید و ترجیح می‌دهید آن را از روی عادت انتخاب نکنید؟ این تولیدکنندهٔ رایگان رنگ تصادفی، رنگها را از کل بازهٔ 24 بیتی‌ای که صفحهنمایش میتواند نشان دهد بیرون می‌کشد و هر یک را در یک نمونهٔ رنگ کنار کد آن قرار میدهد. در کادر «تعداد» انتخاب کنید چند رنگ میخواهید — هر عددی از 1 تا 50 — قالبهای مورد نیاز را علامت بزنید و دکمهٔ «تولید» را فشار دهید. صفحه با یک رنگ در قالب HEX باز میشود، پس اولین نتیجه تنها یک کلیک فاصله دارد. چک‌باکس «کد HEX» از همان ابتدا علامت خورده است، کنار آن چک‌باکس‌های «کد RGB» و «کد HSL» قرار دارند، و هر ترکیبی از این سه میتواند همزمان فعال باشد. دکمهٔ چرخ‌دنده کنار دکمهٔ «تولید»، بخش «گزینه‌های پیشرفته» را باز میکند، جایی که میتوانید رنگها را به یک نوع یا بازه محدود کنید، تکرارها را حذف کنید و شیوهٔ نوشتن HEX را تغییر دهید.
هر رنگ در مرورگر شما از طریق Web Crypto API (به‌طور دقیق‌تر crypto.getRandomValues) ساخته میشود، که بهجای یک تابع شبه‌تصادفی مانند Math.random()، بایت‌های تصادفی قوی از نظر رمزنگاری را از منبع تصادفی خود سیستم شما فراهم میکند. یک رنگ روی صفحهنمایش از سه کانال تشکیل شده است — قرمز، سبز و آبی — که هر کدام عددی صحیح بین 0 تا 255 هستند، و یک بایت تصادفی میتواند دقیقاً 256 مقدار بگیرد. یعنی هر کانال صرفاً یک بایت است، بدون هیچ واسطه‌ای: هیچ باقیمانده‌ای گرفته نمیشود و هیچ مرحلهٔ تبدیلی هیچ سایهای را ترجیح نمی‌دهد. همین باعث میشود همهٔ 16,777,216 رنگی که صفحه میتواند تولید کند، هر بار که دکمهٔ «تولید» را فشار می‌دهید، کاملاً هماحتمال باشند. یک بازهٔ باریکتر در بخش «گزینه‌های پیشرفته» این تضمین را در محدودهٔ همان بازه حفظ میکند: رنگها همچنان از کل فضا کشیده میشوند و آنهایی که بیرون از بازه بیفتند کنار گذاشته میشوند، پس هر رنگی که بازه اجازه میدهد شانس یکسانی دارد. هیچ چیز به سروری فرستاده نمیشود، هیچ چیز ثبت نمیشود، و پس از بارگذاری صفحه، حتی بدون اتصال اینترنت هم به کار خود ادامه میدهد.
سه قالب، یک رنگ را به سه شکل توصیف میکنند. قالب «کد HEX» همان شکل شش‌رقمی‌ای است که در CSS و بیشتر ابزارهای طراحی استفاده میشود، مانند #0778ff؛ با حروف کوچک و با یک # در ابتدا نوشته میشود، و گزینه‌های «حروف بزرگ» و «بدون #» در بخش «گزینه‌های پیشرفته» این را برای ابزارهایی که نوشتار دیگری انتظار دارند تغییر می‌دهند. قالب «کد RGB» هر سه کانال را جداگانه می‌نویسد، مانند rgb(7, 120, 255)، که برای کدی مناسب است که با هر کانال جداگانه کار میکند. قالب «کد HSL» رنگ را از طریق «رنگمایه»، «اشباع» و «روشنی» توصیف میکند، مانند hsl(213, 100%, 51%) — سادهترین شکل برای تنظیم دستی بعدی. هر سه قالب مستقیماً در یک شیت استایل جای می‌گیرند. اما اینها به یک اندازه دقیق نیستند. HEX و RGB دقیق‌اند؛ HSL گرد شده است. صفحه رنگمایه، اشباع و روشنی را بهصورت عدد صحیح می‌نویسد، و برای حدود 89% رنگها این مقدار گرد شده دقیقاً به همان رنگ اصلی تبدیل نمیشود: #646503 بهصورت hsl(61, 94%, 20%) نمایش داده میشود، که به #616303 تبدیل میشود. تفاوت در یک کانال هیچ‌وقت از 5 پله بیشتر نمیشود و معمولاً 1 یا 2 است — روی صفحهنمایش نامرئی، اما واقعی، اگر مقدار HSL را ذخیره کنید و انتظار برگشتن HEX اصلی را داشته باشید. پس مقدار را در HEX یا RGB ذخیره کنید.
یک رنگ به شکل یک تکه واحد در وسط نتیجه نمایش داده میشود؛ چند رنگ به شکل فهرستی شماره‌گذاری‌شده نمایش داده میشوند، یک رنگ در هر ردیف، با قالبهای انتخاب‌شده کنار هم و یک نشان کنتراست کوچک در انتها. فهرستی با بیش از سه رنگ درون کادر خود اسکرول میشود، و فلش گوشهٔ آن، آن را تا ارتفاع کامل باز میکند؛ صفحه به یاد دارد آن را در چه حالتی رها کرده‌اید. روی هر کدی کلیک کنید تا فقط همان کد کپی شود. دکمهٔ کپی در انتهای هر ردیف، همهٔ کدهای آن رنگ را در یک خط، جدا شده با فاصله، کپی میکند. روی خودِ نمونه کلیک کنید تا انتخابگر رنگ مرورگر شما باز شود: رنگ دیگری در آنجا انتخاب کنید و همهٔ کدهای آن ردیف، در هر قالب فعال، همراه با نشان آن، دوباره نوشته میشوند تا با آن مطابقت داشته باشند. دکمهٔ «کپی همه» کل دسته را، یک رنگ در هر خط، کپی میکند، و دکمهٔ «ذخیره در فایل» همان متن را در یک فایل .txt ساده می‌نویسد؛ هر دو از رنگی که در انتخابگر تغییر داده‌اید پیروی میکنند. بخش «تاریخچه» آخرین 10 دستهٔ شما را در همین مرورگر، دقیقاً همانطور که تولید شده‌اند، نگه میدارد، و دکمهٔ «پاک کردن» نتیجه را خالی میکند. تنظیمات شما، از جمله تنظیمات بخش «گزینه‌های پیشرفته»، برای بازدید بعدی به یاد سپرده میشوند.
رنگهای هماحتمال، بهصورت یکنواخت پخش‌شده به نظر نمی‌رسند، و دانستن اینکه چه انتظاری باید داشت، شما را از فشار دادن دکمهٔ «تولید» به دلیل نادرست نجات میدهد. با اندازه‌گیری در کل بازه، حدود 35% رنگها روشن و اشباع‌اند، با اشباع HSL دستکم 70% و روشنی بین 35% و 65%. رنگهای نزدیک به خاکستری، با اشباع کمتر از 20%، تنها حدود 4% هستند، و رنگهای خیلی تیره (روشنی کمتر از 20%) و خیلی روشن (بیش از 80%) هر کدام حدود 3% هستند. به همین دلیل یک دستهٔ ده‌تایی از «همه رنگها» معمولاً چند رنگ قوی دارد و به‌ندرت یک رنگ پاستلی یا خاکستری تیره. وقتی به نوع خاصی نیاز دارید، آن را در «نوع رنگ» انتخاب کنید: «زنده» دقیقاً همان گروه اشباع را نگه میدارد، و «پاستلی»، «تیره»، «کدر» و «طیف خاکستری» همین کار را برای گروه خودشان انجام می‌دهند. گزینهٔ «دلخواه» به شما امکان میدهد بازه‌های خودتان را برای «رنگمایه»، «اشباع» و «روشنی» تنظیم کنید، و یک بازهٔ رنگمایه میتواند از 0 عبور کند، پس بازهٔ 330 تا 30 رنگهای قرمز میدهد. بازه در برابر کد HSLای که صفحه نشان میدهد بررسی میشود، پس هیچ کدی بیرون از آن نمی‌افتد، و اگر رنگ کافی برای مقدار «تعداد» نداشته باشد، صفحه از شما می‌خواهد بهجای تکرار رنگها، بازه را گسترده‌تر کنید. تکرار در غیر این صورت ممکن است، اما نادر است: «بدون تکرار» را علامت بزنید تا آن را حذف کنید، و بدون آن، احتمال یکسان بودن دو رنگ از 50 رنگ در کل بازه حدود 1 در 13,700 است.
یک رنگ تصادفی اغلب به‌عنوان پس‌زمینه خواسته میشود، که یک پرسش را مطرح میکند که نمونه با چشم نمیتواند به آن پاسخ دهد: آیا متن روی آن خوانا خواهد بود؟ راهنمای دسترس‌پذیری وب، WCAG، برای متن معمولی نسبت کنتراست دستکم 4.5:1 می‌خواهد. با اندازه‌گیری در همهٔ رنگ‌هایی که این صفحه میتواند تولید کند، متن سیاه در حدود 65% آنها به این نسبت می‌رسد، و متن سفید در حدود 36%، و هیچ رنگی نیست که هر دو در آن شکست بخورند: بهترین این دو همیشه دستکم به 4.58:1 می‌رسد. پس روی هر پسزمینهٔ تصادفی، متن سیاه یا سفید خوانا خواهد بود، و صفحه به شما نشان میدهد کدامیک. کنار هر رنگ یک نشان کوچک نمایش داده میشود که با بهترین این دو Aa می‌نویسد، و بعد از آن نسبت کنتراست میآید. این نسبت رو به پایین گرد میشود، پس هیچ‌وقت رنگی را بیش از واقعیت نشان نمی‌دهد، و وقتی رنگ را در انتخابگر تغییر می‌دهید بهروز میشود. نشان فقط متن سیاه و سفید را مقایسه میکند؛ برای رنگ برند یا هر رنگ متن دیگری، آن جفت را با ابزار بررسی کنتراست بررسی کنید.
تصادفی بودن همان هماهنگ بودن نیست. هر رنگ در یک دسته به‌تنهایی، بدون آگاهی از بقیه، کشیده میشود، پس تولیدکننده هرگز به معنایی که یک طراح در نظر دارد یک پالت نمی‌سازد — نه جفت‌های مکمل، نه ردیف‌های مشابه، نه روشنی مشترک. یک بازهٔ باریکتر شخصیت یک دسته را تغییر میدهد، نه این قاعده را: رنگهای پاستلی یا یک ردیف از آبی‌ها باز هم یکی‌یکی می‌رسند، بدون اینکه چیزی آنها را به هم پیوند دهد. نکته همین است: یک رنگ به شما میدهد که خودتان انتخابش نمی‌کردید، و همین است که عادت یا بن‌بست خلاقانه را می‌شکند. برای تبدیل یک یافتهٔ تصادفی به چیزی قابل‌استفاده، رنگی را که دوست دارید نگه دارید و بقیه را از آن به دست بیاورید، بهجای اینکه دکمهٔ «تولید» را فشار دهید تا یک مجموعهٔ کامل به‌طور تصادفی هم‌خوان شود. رنگ‌مایه‌اش را نگه دارید و روشنی را کم‌کم برای گونه‌های روشن‌تر و تیره‌تر تغییر دهید، یا رنگمایه را 180 درجه بچرخانید تا رنگ متضاد آن را به دست آورید. قالب «کد HSL» این حرکت‌ها را بهجای حدس زدن به حساب تبدیل میکند.
چرا این تولیدکنندهٔ رنگ تصادفی را انتخاب کنیم؟
- هر رنگ در مرورگر شما با Web Crypto API ساخته میشود، هیچ چیز آپلود نمیشود
- همهٔ 16,777,216 رنگ کاملاً هماحتمالاند، یک بایت تصادفی برای هر کانال
- کدهای HEX، RGB و HSL برای یک رنگ، در هر ترکیبی
- تا 50 رنگ همزمان، هر کدام در یک نمونهٔ رنگ با نشان کنتراست متن
- زنده، پاستلی، تیره، کدر و طیف خاکستری، یا بازهٔ دلخواه خودتان از رنگمایه، اشباع و روشنی
- بدون تکرار در صورت نیاز، و HEX با حروف بزرگ یا بدون #
- روی یک کد کلیک کنید تا کپی شود، یا هر رنگی را در انتخابگر رنگ مرورگرتان تغییر دهید
- کپی همه، ذخیره در فایل، و تاریخچهٔ آخرین 10 دستهٔ شما که در مرورگرتان نگه داشته میشود
- رایگان و بی‌محدودیت: بدون ثبت‌نام، بدون سهمیه، هیچ چیز روی سرورهای ما ذخیره نمیشود
رنگهای تصادفی در هر جایی که رنگی پیش از تصمیم‌گیری کسی لازم باشد، به کار می‌آیند. طراحان از آنها برای شکستن بن‌بست خلاقانه و پیدا کردن نقطهٔ شروعی استفاده میکنند که پالت معمول‌شان هرگز به آن نمی‌رسید. توسعه‌دهندگان با آنها طرح‌های اولیه، جای‌نگه‌دارها و آواتارها را پر میکنند، به هر سری در یک نمودار رنگ خودش را می‌دهند تا زمانی که موضوع واقعی هنوز مشخص نشده، و می‌آزمایند که یک رابط چگونه با پس‌زمینه‌هایی که برایشان طراحی نشده کنار میآید — یک دستهٔ 50 رنگی از «همه رنگها» تقریباً همیشه دستکم یک رنگ خیلی تیره یا خیلی روشن دارد، و «تیره» یا «پاستلی» آزمایش را به یکی از دو سر می‌برد. هنرمندان هنر مولد و توسعه‌دهندگان نمونهٔ اولیهٔ بازی، مقادیر را مستقیم وارد کد میکنند، جایی که شکل RGB با بیشتر کتابخانه‌های گرافیکی سازگار است. معلم‌ها سه قالب را کنار هم می‌گذارند تا نشان دهند یک رنگ میتواند بهصورت کد، بهصورت سه کانال، یا بهصورت جایگاهی روی چرخ رنگ نوشته شود، و چرا نسخهٔ HSL گرد شده است. و هر کسی که یک فهرست را برچسب می‌زند، نشانه‌گذاری میکند یا بر اساس رنگ کدگذاری میکند، رنگهای متمایزی به دست می‌آورد بدون اینکه نگران این باشد کدام را انتخاب کند.
دانستن چند محدودیت صادقانه ارزشش را دارد. این یک تولیدکننده است، نه یک ابزار پالت: هماهنگی‌های رنگی نمی‌سازد و یک رنگ را ثابت نگه نمی‌دارد در حالی که بقیه تغییر میکنند، و یک بازهٔ باریکتر رنگ‌هایی از یک نوع میدهد، نه رنگ‌هایی که برای هماهنگی با هم انتخاب شده‌اند. نشان کنتراست فقط متن سیاه و سفید را مقایسه میکند. صفحه با رنگهای sRGBای که صفحهنمایش نشان میدهد کار میکند — HEX، RGB و HSL — بدون شفافیت و بدون CMYK، Pantone، OKLCH یا رنگهای نامدار CSS؛ برای چاپ، رنگ را در مرحلهٔ آمادهسازی چاپ تطبیق دهید، بهجای اینکه به کد روی صفحهنمایش اعتماد کنید. همان کد ممکن است روی صفحه‌نمایش‌های مختلف کمی متفاوت به نظر برسد، چون صفحه‌نمایش‌ها یکسان کالیبره نشده‌اند. مقادیر HSL، همانطور که پیش‌تر گفته شد، گرد شده‌اند، و مگر اینکه «بدون تکرار» علامت خورده باشد، یک دسته از نظر تکرار بررسی نمیشود. چیزی که صفحه واقعاً تضمین میکند باریکتر و دقیق‌تر است: هر یک از 16,777,216 رنگ آن، یا هر رنگ درون بازه‌ای که تعیین کرده‌اید، در هر فشار، شانس یکسانی دارد، که از منبع رمزنگاری مرورگر شما کشیده شده و هرگز به هیچ‌جا فرستاده نمیشود.