Utilia

مولّد الألوان العشوائية

ولّد ألوانًا عشوائية أو لوحات ألوان متناسقة، واقفل ما يعجبك، وانسخ أكواد HEX أو RGB أو HSL وصدّرها بصيغة CSS أو SCSS أو JSON أو Tailwind.

درجة اللون (°)
التشبّع (%)
الإضاءة (%)

اقفل الألوان التي تعجبك، ثم ولّد مجددًا ليتغيّر الباقي فقط.

الألوان

    كيفية استخدام مولّد الألوان العشوائية

    1. حدّد عدد الألوان (من 1 إلى 20).
    2. اختر الوضع: - عشوائي ضمن نطاق يسحب كل لون بشكل مستقل. ضيّق نطاقات درجة اللون (°) والتشبّع (%) والإضاءة (%) بحقلَي «من» و«إلى» لتبقى ضمن عائلة ألوان واحدة، مثل الألوان الباستيلية فقط أو درجات الأزرق فقط. - لوحة متناسقة (OKLCH) يسحب لونًا أساسيًا عشوائيًا ويبني الألوان الأخرى منه وفق قاعدة تناسق. اختر التناسق (متكامل، متجاور، ثلاثي، متكامل منقسم، رباعي، مربع، أحادي اللون) أو اترك فاجئني لتحصل على تناسق مختلف في كل مرة.
    3. انقر توليد الألوان. تعرض كل بطاقة اللون مع أكواده HEX وRGB وHSL، وتنسخ الأزرار الصغيرة HEX وRGB وHSL الكود المقابل.
    4. انقر قفل على الألوان التي تريد الاحتفاظ بها، ثم توليد الألوان مرة أخرى: لا يتغيّر إلا الألوان غير المقفلة. وانقر الزر مجددًا لفتح قفل اللون.
    5. اختر صيغة في التصدير بصيغة (قائمة HEX، متغيرات CSS، متغيرات SCSS، مصفوفة JSON، ألوان Tailwind) واستخدم نسخ أو تنزيل لأخذ المجموعة كاملة.

    كيف تُختار الألوان

    في وضع عشوائي ضمن نطاق تُسحب درجة اللون والتشبّع والإضاءة كلٌّ منها بتوزيع منتظم داخل النطاقات التي حددتها، ثم تُحوَّل من HSL إلى RGB بالمعادلة نفسها التي تستخدمها المتصفحات لـ hsl(). ويمكن لنطاق درجة اللون أن يلتف حول الأحمر: من 330 إلى 30 يعطي ألوانًا وردية وحمراء وبرتقالية مرورًا بـ 0°. بعض الإعدادات المفيدة:

    • ألوان باستيلية: تشبّع 40–80 %، وإضاءة 75–90 %.
    • درجات داكنة وهادئة: تشبّع 10–40 %، وإضاءة 15–35 %.
    • درجات الأزرق فقط: درجة لون 190–250.
    • ألوان دافئة: درجة لون من 330 إلى 60.

    في وضع لوحة متناسقة (OKLCH) تعمل الأداة في فضاء OKLCH، وهو نموذج ألوان إدراكي تبدو فيه الخطوات المتساوية في الإضاءة متساوية للعين. يُستخدم أول لون مقفل أساسًا للوحة، وإن لم يكن هناك لون مقفل يُسحب لون أساسي عشوائي متوسط الإضاءة ومشبّع نسبيًا. وتأخذ الألوان الأخرى زوايا درجة اللون الخاصة بالتناسق (مثل +120° و+240° للتناسق الثلاثي)، مع تفاوت عشوائي صغير في درجة اللون والإضاءة والصفاء (chroma)، فتعطي كل نقرة نتيجة جديدة. وعندما تطلب ألوانًا أكثر من درجات التناسق، تعيد الألوان الإضافية استخدام الزوايا نفسها بتنويعات أفتح وأغمق. أما التناسق الأحادي فيحافظ على درجة لون واحدة ويوزّع الإضاءة من الداكن إلى الفاتح.

    والألوان التي تقع خارج ما تستطيع شاشة sRGB عرضه تُعاد إلى النطاق بخفض صفائها، فكل كود HEX تنسخه لون حقيقي قابل للعرض.

    متى تفيد الألوان العشوائية

    الألوان العشوائية مفيدة للصور الرمزية والمخططات المؤقتة، وبيانات الاختبار، والفن التوليدي، واستكشاف التصاميم عندما تعلق أمام صفحة بيضاء، أو لاختيار لون لمشروع أو لفريق في لعبة أو لتصنيف. وميزة القفل تتيح استخدام الأداة كآلة حظ: احتفظ بما ينجح، وأعد سحب الباقي. والعشوائية مصدرها المولّد التشفيري في متصفحك، ولا يُرسل أي شيء إلى أي مكان.

    الأسئلة الشائعة

    كيف أحصل على كود لون HEX عشوائي؟

    اضبط عدد الألوان على 1 وانقر توليد الألوان، ثم انقر زر HEX لنسخ الكود، مثل #3A7BD5.

    هل يمكنني الاحتفاظ ببعض الألوان وتوليد الباقي من جديد؟

    نعم. انقر قفل على كل لون تريد الاحتفاظ به، ثم انقر توليد الألوان. تبقى الألوان المقفلة في مكانها، وفي وضع التناسق يصبح أول لون مقفل أيضًا أساس اللوحة الجديدة.

    لماذا أستخدم وضع التناسق OKLCH بدلًا من ألوان عشوائية بحتة؟

    الألوان العشوائية البحتة كثيرًا ما تتنافر أو يختلف ثقلها البصري كثيرًا. أما بناء اللوحة من تناسق في فضاء OKLCH فيعطي ألوانًا تنسجم معًا وسطوعها متوازن، فيسهل استخدامها في التصميم.

    ماذا تحتوي صيغ التصدير؟

    قائمة HEX تعطي كودًا في كل سطر، ومتغيرات CSS وSCSS تعطي تعريفات --color-1 أو $color-1، ومصفوفة JSON تعطي قائمة بالأكواد، وألوان Tailwind تعطي كائن colors بمفاتيح 100 و200… لملف الإعدادات.

    هل الألوان عشوائية حقًا؟

    نعم، فمصدرها crypto.getRandomValues، وهو مولّد المتصفح الآمن تشفيريًا، فلا يتكرر أي نمط بين النقرات.