تصميم موقع بسيطة باستخدام HTML + CSS + Java script

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

تنزيل الالوان للتصميم

2. ربما تعمل على عدد من الأقسام والمكونات على موقع الويب الخاص بك. إن وجود منتقي ألوان لكل قسم في شكل مدخلات منسدلة يقلل من متاعب التحول من الألوان ذهابًا وإيابًا أثناء التحرير البسيط. لكل قسم يقوم منتقي الألوان بتخزين اللون الذي يمكن أن يكون مفيدًا.يوجد نوعان مختلفان من منتقي الألوان في هذا المثال. يتكون أحدهما من عينات الألوان الرئيسية في كتلة من المكونات بينما تحتاج إلى التمرير الآخر للحصول على اللون الذي تريد

تنزيل الالوان للتصميم

2. تبحث عن اختيار بسيط وانتقل إلى منتقي الألوان المتفاعل بدلاً من الاضطرار إلى تحديد اللون ثم قم بالتطبيق ، فهذه الأداة الأصلية قد تكون مفيدة. إذا لم تكن متأكدًا من اللون الدقيق ، فيمكنك دائمًا التمرير عبر محيط خيارات الألوان. بدلاً من ذلك ، إذا كنت خبيرًا في الألوان وتعرف بالضبط ما تريده ، فلديك خيار إدخال RGB والقيم الأخرى فقط. ويتضمن المثال الموضح هنا تطبيق برنامج Photosho الشهير لنشر ألوان الخلفية المخصصة في مواقع التواصل الاجتماعي. مع وجود أكثر من 13 منتقيًا مختلفًا ، هناك فرصة كبيرة للحصول على النتيجة التي تبحث عنها أو يمكنك أيضًا إنشاء واحدة باستخدام مكونات الكتلة

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

تنزيل الالوان للتصميم

4. منتقي الألوان للرد الفعل منتقي الألوان المتفاعل هذا هو أداة خفيفة الوزن يتم عرضها بتنسيق RGB أو HSL. إلى جانب تحديد قيمة هذه التنسيقات يدويًا ، توفر الأداة شريط تمرير سهلًا لتحديد قيمة العتامة. بالإضافة إلى ذلك ، يمكنك أيضًا استخدام الإدخال اليدوي أو النقر فوق خيار الزيادة والإنقاص لمستوى الشفافية تعد معلومات ترميز ألوان html في أداة المنتقي مفيدة للسيناريوهات المستقبلية حيث تكون الرمز الدقيق الذي يجب معالجته

تنزيل الالوان للتصميم

5.  GradientLab هو منتقي التدرج المصنوع باستخدام React. الهدف هو مساعدة المصممين على إنشاء موقع ويب أحلامهم من خلال السماح لهم باختيار ألوان متدرجة ممتعة بسرعة وبشكل حدسي.المسودة الحالية لمنتقي الألوان المتفاعلة لا تدعم ضبط الموقع داخل التدرج اللوني. ومع ذلك ، هناك خيار في منتقي الألوان لتحديد وظيفة جافا سكريبت التي تقيم وتعرض على واجهة المستخدم

تنزيل الالوان للتصميم

6. منتقي ألوان ReactJS ستحتاج إلى فهم الألوان جيدًا لاستخدام منتقي الألوان المتفاعل هذا نظرًا لعدم وجود نطاق من الخيارات للاختيار بشكل افتراضي. يتطلب انزلاق وتعديل قيمة rgb جنبًا إلى جنب مع مستوى الشفافية للحصول على النتيجة.التصميم بسيط للغاية ويمكن وضعه على الشريط الجانبي للتطبيق كطريقة اختيار سهلة. ومع ذلك ، نظرًا لميزته التي ناقشناها للتو ، فإنها تتطلب بعض الممارسة للوصول إلى اللون المناسب في وقت قصير تنزيل الالوان للتصميم

7. React Color تخطيط منتقي الألوان هذا مشابه لتطبيق طلاء النوافذ. يجب أن يكون من بين أول منتقي الألوان الأصلي المتفاعل الذي صادفته. التصميم بسيط كما هو الحال مع إطار التحديد المستطيل. يتم توزيع الألوان الأساسية عبر صفين بينما يمكن إجراء تحديدات RGB النسبية من الطبقة العليا. يمكنك اختيار إخفاء منتقي الألوان أيضًا. يتيح ذلك الاستخدام الفعال للمساحة في أداة التصميم.

تنزيل الالوان للتصميم

8. رد فعل منتقي الألوان بالطبع المصممون هم المسؤولون عن موقع الويب الخاص بهم. لذا ألن يكون تضمين بعض وحدات التحكم مثل مكونات واجهة المستخدم إضافة رائعة؟ ستحصل على DJ مثل الشعور بالتحكم في النظام الموسيقي بأكمله للنادي باستخدام منتقي ألوان جافا سكريبت هذا. يتيح لك شريط التمرير الدائري الاختيار من بين اللون الأساسي باستخدام منزلقين عموديين لضبط مستويات التباين واللون. بالإضافة إلى ذلك ، يمكن رؤية كود اللون html مع معاينة اللون النهائية في منتقي الألوان css تنزيل الالوان للتصميم

9. مغير اللون ReactJS ربما لم تعتقد منصات وسائل التواصل الاجتماعي مثل Facebook و Twitter أن قاعدة مستخدميها ستكون من المصممين أو الفنانين. ومع ذلك ، فإن تصميمها جميل على الرغم من حقيقة أن غالبية التخطيط يعتمد على محتويات محددة للمستخدم. هذا ممكن بسبب الخيار البسيط لاختيار التخطيط والألوان من منتقي الألوان الذي لا يتطلب أي معرفة مسبقة بالتصميم. ومع ذلك ، هناك شرط واحد يجب أن يكون لدى المستخدم القدرة على اتخاذ قرار بشأنه. لا يوجد شريط تمرير ، ولا التنقل عبر أنواع ألوان متعددة ولا إدخال قيمة rgb. ما عليك سوى النقر فوق الزر للون و بسيطة وفعالة إلى حد ما لتقديم أي محتويات تنزيل الالوان للتصميم

10. منتقي الألوان من تصميم سهيل عبود يزيل منتقي الألوان هذا المتاعب الكاملة لاختيار كل رمز لون في css لتصميم موقع الويب الخاص بك. بالإضافة إلى ذلك ، تعد أداة منتقي ألوان التفاعل هذه مفيدة حقًا للمتعلمين الذين يحاولون تعلم تصميم مواقع الويب الأصلية باستخدام html و css و javascript. بدلاً من تذكر سلسلة من الألوان السداسية المعقدة ، يمكنك ببساطة تحديد عدد من نطاقات الألوان للتنفيذ السريع. من أجل البساطة وكونها أداة تركز على المتعلم ، لا يوجد خيار اختيار يدوي لـ rgb. إذا كنت تبحث عن حل بسيط لاختيار الألوان ، فيمكنك البدء بهذا ثم الانتقال إلى أداة أكثر قابلية للتخصيص لاختبار إبداعك

تنزيل الالوان للتصميمهذه فكرة ممتعة وجميلة لمشاركة ألوانك مع شبكة. قدم المطور 5 ألوان فريدة داخل تنسيق مربع. تعد لوحات الألوان الواردة

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

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

أيضًا مراقبة التباين بين اللون وإخفاء لونه بشكل فعال. أسفل لوحة الألوان مباشرةً ، لديك أيضًا قدرًا كبيرًا من المساحة لإظهار القيمة السداسية. يمكنك إما استخدام مثال لوحة ألوان JS الأساسي بهذه السعة أو يمكنك إضافة وظائف إضافية لجعلها أكثر سهولة في الفهم

تنزيل الالوان للتصميم هذا هو تصميم لوحة الألوان خبير المظهر. في العرض التوضيحي ، قام المطور بفرز أسرة ألوان مختلفة لأجهزة iOS و Windows. يتم عرض رموز الألوان بشكل شرعي بهدف أن يتمكن العميل من تكرار الرموز دون

الكثير من الامتداد. في الجزء العلوي من لوحة الألوان ، يتم إعطاء علامات تبويب للسماح للعميل بالتبديل بفعالية بين لوحة الألوان التي يريدها. لجعل مثال لوحة الألوان المتوافقة مع المصمم هذااستخدم المطور بنية CSS3 و HTML5 و JavaScript / JS

تنزيل الالوان للتصميميعد JavaScript Random Color Palette Generator لوحة ألوان أخرى عملية بشكل مناسب لإنشاء تصميم الألوان الخاص بك. كما يستدل من الاسم ، فهو منشئ لوحة الألوان. عند الوصول إلى المساحة ، تحصل على ألوان لوحة عشوائية تم إنشاؤها من أجلك. لقد أعطاك المطور بذكاء البديل لتغيير لون الأساس لرؤية ألوان اللوحة لا مشكلة على الإطلاق

تحت كل لون ، يظهر الرمز السداسي الخاص به للوصول بسهولة إلى الألوان الموجودة في أداة التصميم الخاصة بك. نظرًا لأنه مثال قوي لمولد لوحة الألوان ، فقد استخدم المطور أحدث CSS3 و Javascript / JS لإنشاء هذه الأداة

تنزيل الالوان للتصميم

في هذا النموذج ، يتم تجميع الألوان وتشكيلها بشكل صحيح للوصول الأقل صعوبة. هنا ، أعطى المصمم لونين مختلفين من نفس اللون - فاتح ، وداكن. يتم استخدام تأثير التمرير المباشر للإشارة إلى اللون الذي يختاره العميل

أي عندما تحوم فوق مربع اللون المحدد ، فإنه يتوسع قليلاً. لا تنسى أن تقدير اللون السداسي اللون يظهر أيضًا عند النقر فوقه

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

إلى جانب التمرير ، يمكنك رؤية ثلاثة خيارات - نسخ ومعلومات وحفظ. سيتم تخزين لوحة الألوان التي قمت بحفظها. عند النقر فوق رمز قائمة الهامبرغر في الجزء العلوي الأيمن ، يمكنك رؤية لوحة الألوان المحددة التي قمت بحفظها. هذا مثال على لوحة ألوان وظيفية أو مخطط باستخدام HTML و CSS و JS

تنزيل الالوان للتصميم إذا كنت تبحث عن اختيار مفتاح وانتقل إلى منتقي التظليل بدلاً من اختيار التظليل بحلول ذلك الوقت ، فحينئذٍ لا يمكن أن يمتنع هذا عن كونه هذا الغريب المحلي قد يكون مهمًا. إذا لم تكن متأكدًا من التظليل المحدد ، يمكنك عمومًا النظر في مساحة خيارات التظليل. سيساعدك هذا المثال لمولد لوحة ألوان JavaScript في إنشاء اللون الذي تختاره

يتوفر أيضًا رمز سداسي عشري قريب من لوحة الألوان في الصورة نفسها. بالطبع ، إذا كنت خبيرًا في التظليل وتعرف بالتأكيد ما تحتاجه ، عندئذٍ يكون لديك خيار إدخال RGB والسمات المختلفة

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

توجد حركة تموج. بفضل خاصية Keyframes في كود CSS. تستخدم العناصر الزائفة قبل وبعد في التصميم لغرض التصميم

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

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

تنزيل الالوان للتصميم