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

ما الذي تقدمه الأداة

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

مثال عملي

لنفترض أنك تعمل على تصميم واجهة وتريد درجة حمراء ثابتة لضبط هوية بصرية، مع ترك بقية القنوات عشوائية. اختر وضع RGB المقيد، أدخل القيمة 200 لقناة الأحمر (R)، واترك الأخضر (G) والأزرق (B) بدون تحديد. اضغط زر التوليد، فستحصل على لون مثل RGB(200, 45, 120)، وسيظهر اللون نفسه بصيغتي HEX وHSL المكافئتين. هذه الطريقة مفيدة عندما تحتاج إلى الالتزام بقيمة محورية دون تكرار تام للألوان.

نطاقات القيم والقاعدة الحسابية

تعتمد الأداة على توليد عشوائي آمن داخل المتصفح (crypto.getRandomValues) مع رفض العينات غير المتوافقة لضمان توزيع موحد للقيم. نطاقات القيم هي: قنوات RGB من 0 إلى 255، ودرجة اللون في HSL من 0 إلى 360 شاملة، بينما التشبع والإضاءة من 0 إلى 100. عند تثبيت قناة، تُضبط القيمة المدخلة إلى أقرب قيمة ضمن النطاق المسموح، بينما تُولَّد القنوات الحرة عشوائيًا بشكل مستقل. النتيجة لون رقمي بصيغة sRGB، وتُحسب بقية الصيغ (HEX وHSL) من القيم نفسها.

حدود الأداة

• اللون الناتج رقمي بصيغة sRGB وليس لونًا مسماًّى أو مطابقًا لـ Pantone أو قيمة طباعة CMYK.
• قد تتشابه الألوان أو تتكرر خاصةً عند تثبيت عدة قنوات.
• لا تضمن الأداة تباينًا مقروءًا للنصوص أو وضوحًا لعمى الألوان؛ يجب فحص تباين WCAG بين كل زوج من الألوان الأمامية والخلفية.
• تتم عملية التوليد محليًا في المتصفح ولا ترسل بياناتك إلى أي خادم.

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

هل يمكنني تثبيت أكثر من قناة واحدة في نفس الوقت؟

نعم، يمكنك تحديد أي مجموعة من القنوات في وضع RGB أو وضع HSL، وسيتم توليد القنوات المتبقية تلقائيًا.

هل الألوان المولّدة مضمون أنها غير مكررة؟

لا، الألوان قد تتشابه أو تتكرر، خاصة عند تثبيت قنوات معينة يقل معها عدد الاحتمالات الممكنة.

هل يمكن استخدام الألوان مباشرةً في نص أو عناصر تحكم؟

يجب أولًا فحص تباين اللون مع الخلفية الفعلية وفق معايير WCAG؛ الأداة لا تجري هذا الفحص.

قائمة التحقق

• حدد وضع التوليد المناسب: عشوائي كامل أو RGB مقيد أو HSL مقيد.
• أدخل القيم الثابتة ضمن نطاقها الصحيح وتحقق من ظهورها في الواجهة.
• اضغط زر التوليد وتأكد من ظهور القيم الثلاث: HEX وRGB وHSL.
• راجع اللون الناتج على خلفية مشابهة لبيئة الاستخدام الفعلية.
• تحقق من تباين النص والعناصر عند الحاجة قبل اعتماد اللون.