كيف أقوم باختيار تدرجات الألوان المناسبة

يوجد العديد من الأدوات التي تساعدك في الحصول على ألوان متناسقة لإستعمالها في أي نوع من التصاميم، هنا بعض هذه الأدوات:

• color mind
• mycolor space
• colorhunt
• coolors

كما دوجد بعض الأدوات التي تسمح لك برفع صورة وإستخراج نمط الألوان منها مثل أداة image-picker من coolors، وتوجد أداوت تساعدك في مقارنة الأوان وحساب نسبة التباين بين الأوان مثل أداة contrast-checker التي تعرض لك رقم ما بين 1 و 21، تستخدم هذه الأداة لكي تعرف الأوان الصحيحة التي يجب إستخدامها في النصوص والخلفيات.

كما توجد أدوات تسمح لك بإضافة لون معين وتعرض عليك بعد ذلك مجموعة من الألوان المتناسقة مع اللون الذي أدخلته، بالإضافة إلى مجموعة واسعة من تدرجات هذا اللون، بعض الأمثلة:

•  colorhexa
• paletton

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

يوجد أربعة أنواع رئيسية للتدريج في CSS:

التدريج الخطي Linear Gradients - التدريج الدائري Radial Gradients - التدريج المخروطي Conic Gradients - التدريج المتكرر Repeating Gradients

أكثر الأنواع استخداماً هي التدريج الخطي linear-gradient:

background: linear-gradient(<direction>?, <color-stop-1>, <color-stop-2>, ...);

  direction: جهة التدريج
  color-stop-1: لون بداية التدريج
  color-stop-2: لون نهاية التدريج
  مع إضافة أي ألوان لمراحل تدريج ضمنية

مثال:

background-color: linear-gradient(to left, #fd4370, blue);

أو التدريج الدائري radial-gradient:

background: radial-gradient(circle farthest-corner at top left, red, blue);

يمكنك الاطلاع على مزيد من التفاصيل حول خصائص التدريج وكيفية التحكّم بالمتغيرات من خلال المقالة التالية:

بتاريخ الآن قال Sam Ahw:

يوجد أربعة أنواع رئيسية للتدريج في CSS:

التدريج الخطي Linear Gradients - التدريج الدائري Radial Gradients - التدريج المخروطي Conic Gradients - التدريج المتكرر Repeating Gradients

أكثر الأنواع استخداماً هي التدريج الخطي linear-gradient:

background: linear-gradient(<direction>?, <color-stop-1>, <color-stop-2>, ...);

  direction: جهة التدريج
  color-stop-1: لون بداية التدريج
  color-stop-2: لون نهاية التدريج
  مع إضافة أي ألوان لمراحل تدريج ضمنية

مثال:

background-color: linear-gradient(to left, red, blue);

أو التدريج الدائري radial-gradient:

background: radial-gradient(circle farthest-corner at top left, red, blue);

يمكنك الاطلاع على مزيد من التفاصيل حول خصائص التدريج وكيفية التحكّم بالمتغيرات من خلال المقالة التالية:

 

هذا ليس قصدي انا اقصد كيف اجعل الالوان متناسقه , هناك مواقع في الالوان متناسقه انا لا اقصد ال linear-gradiuent

بتاريخ 3 دقائق مضت قال Mohamed Montaser3:

هذا ليس قصدي انا اقصد كيف اجعل الالوان متناسقه , هناك مواقع في الالوان متناسقه انا لا اقصد ال linear-gradiuent

في حال لم يكن لديك خبرة في اختيار الألوان المتناسقة يمكنك البحث على الانترنت عن تدرجات اللون الذي ترغب به عن طريق كتابة رمز اللون متبوعاً بـ shares أو gradient

أو من خلال موقع أدوبي adobe colors

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

بتاريخ 1 دقيقة مضت قال Sam Ahw:

في حال لم يكن لديك خبرة في اختيار الألوان المتناسقة يمكنك البحث على الانترنت عن تدرجات اللون الذي ترغب به عن طريق كتابة رمز اللون متبوعاً بـ shares أو gradient

أو من خلال موقع أدوبي adobe colors

يعني مثلا مثل موقع اكاديمية حسوب الوان الموقع متناسقه و في المشاريع اللي في التطبيق العملي يختار المدرب الوان متناسقه كيف يمكنني اختيار مثلهم هكذا

يمكنك تصفح المواقع الموجودة على الانترنت وملاحظة الألوان التي يتم استخدامها معاً، كما يوجد العديد من المواقع التي تقدّم تركيبات من الألوان جاهزة للاستخدام مثل: colorhunt و coolors و adobe colors وغيرها ستجد الكثير في حال قمت بالبحث عن كلمة color palette في أي محرك بحث.

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