تدرج عشوائي

هندسة اللونين

يُعرَّف التدرج الخطي في CSS بثلاثة عناصر: زاوية الاتجاه، ولون البداية، ولون النهاية. يحسب المتصفح كل درجة لونية وسيطة على طول محور الزاوية باستخدام الاستكمال الخطي في فضاء ألوان sRGB. الدرجة صفر تشير إلى الأعلى، و90 درجة تشير إلى اليمين، و180 درجة تشير إلى الأسفل. كل زاوية بين 0 و359 صالحة. تختار هذه الأداة القيم الثلاث بشكل مستقل من Web Cryptography API، لتنتج 16.7 مليون × 16.7 مليون × 360 ≈ 100 كوادريليون تدرج مختلف.

لماذا تفاجئنا التدرجات العشوائية

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

التوليفات المتماثلة، حيث يتشارك اللونان منطقة درجة لونية متقاربة، تنتج تدرجات أنعم وأكثر عمقًا في الأجواء. تظهر هذه تقريبًا في 25% من حالات التوليد العشوائي البحت.

طيف التناغم

تصنّف لوحة الإحصائيات كل تدرج حسب علاقته اللونية. الأزواج أحادية اللون تختلف بأقل من 15 درجة على عجلة الألوان، مما ينتج تحولات لونية دقيقة. الأزواج المتماثلة (بفارق 15 إلى 45 درجة) تتشارك حيًا لونيًا واحدًا. التدرجات المتباينة تمتد من 90 إلى 150 درجة. الأزواج المكمّلة تقع على جانبين متقابلين من العجلة (بفارق 150 إلى 180 درجة)، مما يخلق أقوى توتر بصري. يتحدث التصنيف مع كل توليد، محوّلًا كل نقرة إلى درس مصغر في نظرية الألوان.

CSS عملي

يُنسخ التدرج المولَّد مباشرة كقيمة linear-gradient() في CSS. استخدمه كخاصية background على أي عنصر. ضعه خلف النص مع background-clip: text للحصول على طباعة بتدرج لوني. قم بتراكبه على الصور بنسخة شبه شفافة. طبّقه على الأزرار، والبطاقات، وأقسام الواجهة الرئيسية، أو شاشات التحميل. الزاوية والألوان هي المواصفات الكاملة: الصق، واضبط الشفافية إذا لزم الأمر، وانشر.

خصوصية بالتصميم

كلا اللونين والزاوية ينشآن من Web Cryptography API في متصفحك. يقدم الخادم هذه الصفحة وينتهي دوره. تبقى تدرجاتك المولَّدة وسجلّك وعدد مرات التوليد في متصفحك. لا يخزن الخادم شيئًا. مشاركة الرابط تشارك الأداة فقط، وليس أي مخرجات مولَّدة. ينتج متصفح كل زائر نتائج مستقلة تمامًا.

إلهام التدرجات من العالم الحقيقي

يكشف التوليد العشوائي عن توليفات غير متوقعة، لكن المشاريع الواقعية توضح كيف تعمل علاقات الألوان فعليًا في التطبيق العملي. بينما تولّد هذه الأداة تدرجات CSS جديدة من لونين مستقلين وزاوية عشوائية، يستكشف Color Discovery لوحات ألوان مستمدة من أعمال إبداعية مكتملة عبر العمارة، وتصميم المنتجات، والتغليف، والتصميم الداخلي. توضح هذه اللوحات كيف تتفاعل الألوان في المواد الحقيقية، وظروف الإضاءة، والسياقات البصرية. إذا أثار تدرج مولَّد عشوائيًا فكرة ما، فإن تصفح لوحات الألوان الواقعية يمكن أن يساعد في تنقيحها إلى توليفة مثبتة في التصميم الاحترافي. سواء كنت تبني خلفية واجهة مستخدم، أو تختار تشطيبات المواد، أو تبحث عن الجو اللوني المناسب، اكتشف المزيد في Color Discovery.