هل تحتاج إلى لون لتصميم أولي أو مخطط بياني أو لوحة فارغة، وتفضّل ألا تختار لونًا بدافع العادة؟ يسحب هذا المولد المجاني للألوان العشوائية ألوانًا من نطاق الألوان الكامل المكوّن من 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، أو كل لون داخل النطاق الذي حددته، له نفس الاحتمال في كل ضغطة، مسحوب من المصدر التشفيري لمتصفحك، ولا يُرسَل أبدًا إلى أي مكان.