إنشاء تجربة مستخدم متماسكة باستخدام ألوان HSL في CSS

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

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

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

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

تحويل الخاصيات العديدة في CSS، بما في ذلك background-color، color، linear-gradient، وما إلى ذلك، يسمح للمستخدمين بإضافة أو ملئ الألوان المرغوب فيه للعناصر. كل هذه الخاصيات تساعد المستخدمين أيضًا على تلوين الخط أو حتى إضافة أنماط لونات جميلة للنصوص والعناصر.

كل خاصيات الألوان في CSS تتطلب طريقة لتعريف اللون ومن ثم ملئ هذا اللون في العنصر المحدد. توفر CSS بعدة طرق لون بنية، مثل HSL، RGB، HSLA، Hexadecimal، وما إلى ذلك. ومع ذلك، تتمتع هذه الطرق بأعداد 整数 في وحدات مختلفة للحصول على اللون.

على الرغم من وجود العديد من المدونات والمقالات التعليمية التي تركز على RGB و Hexadecimal الطرق، يوجد حاجة لتغطية الجوانب الرئيسية لطريقة HSL. في هذا المدونة، سنغوص في دور الألوان التي تتمتع بها HSL في CSS، من خلال غيرها من التفاصيل المتعلقة بطريقة HSL وكيف تختلف عن الطرق الأخرى.

قبل أن نقف مباشرة في طريقة HSL، دعونا نتحدث عن الطريقتين الأخرين للألوان في CSS – RGB و Hexadecimal، ولماذا نحتاج إلى الألوان الHSL في CSS.

الفرق بين RGB و Hex

تعمل طريقة RGB بما في ذلك عمل خلال أن كل لون هو مزيج من اللونات Red، Green، و Blue. تتطلب هذه الطريقة ثلاث قيم عشوائية تمثل في وظيفة rgb() تتمتع ب

هذه بعض أمثلة التركيبات اللونية RGB بمعدلات مختلفة:

دعونا نأخذ مثالًا لفهم كيفية عملية مethod RGB.

.container {

  background-color: rgb(0, 200, 120);

  width: 100%;

  height: 100px;

}

الخروج:

والآن نتحدث عن طريقة الHexadecimal (الششوديسي). إنها تعمل أيضًا على مبدأ أن كل لون هو مزيج من اللونان الاحمر والأخضر والأزرق. يتطلب المethod Hex ثلاث أرقام Hex ثنائية الأرقام ويبدأ ب‘#’ الإشارة. هذه الثلاث قيم Hex المحددة تحدد مستوى تعزيز اللونان الاحمر والأخضر والأزرق بشكل منفصل.

ولأنه يتضمن قيم Hexadecimal ويأتي المبنى Hexadecimal في مجال قيم 0-15 حيث يمثل قيم في مجال 10-15 بحروف A-F. إذًا 00 يعطي اللون بمعدل القليل الأقل ، و FF ينتج المعدل الأعلى للتعزيز.

هذه بعض أحب الألونات Hex مع الأشياء:

دعونا نأخذ مثالًا لفهم كيفية عملية هذه الطريقة.

.container1{

  background-color:#91D8E4;

}

الخروج:

العمل مع RGB و Hexadecimal من السهل ويمكننا أي شيء. لكن هذا ليس صحيحًا. العمل مع هاتين الطريقتين ليس بسهولة ما يبدو. دعونا نرى كيف.

مشاكل متعلقة بشكل الرموز RGB والششوديسي.

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

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

حين تصمم الواجهة المستخدمة، يحتاج UI مصممون ومطورون الويب للعديد من الألوان المتنوعين للحفاظ على موضوع واحد من التوامين عبر الواجهة. على سبيل المثال، 30 ألوانًا من الزرقاء ، 20 ألوانًا من الأخضر ، 10 ألوانًا من البنفسجية ، وهلم جرا. قد يكون يوجد الفوضى إذا استخدمنا CSS متغيرات لتحميل هذه الألوان المتنوعة. عندما نلاحظ أن قيمات RGB جميع هذه التنوعات غير مرتبطة بعضها بالأخرى، يزداد الأسوأ.

ولكن هذه العقبات لطريقتي RGB والعشرية يمكن إزالتها بوجود ألوان HSL في CSS. دعونا نفهم دور HSL Colors في CSS ببدء من معرفة ما يعنيه طريقة HSL، كيف تعمل وكيف تتخلص من عقبات طريقتي RGB والعشرية.

ما هو HSL؟

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

ولأن الألوان الأساسية في format HSL هي الأحمر والأخضر والأزرق، فإن دورة الألوان RGB هي مبدأ رئيسي وراء تعامل الألوان الHSL في CSS.

دورة الألوان (RGB – Red Green Blue) تمثل أغلب الألوان الممتدة داخل دورة. تعرض هذه الدورة على علاقة الألوان الأساسية والثانوية والترتيبية. ومع ذلك يوجد ثلاث أنواع من الدورات اللونية – RGB (Red Green Blue)، CMY (Cyan Magenta Yellow)، وRYB (Red Yellow Blue).

وهذه الصورة المرفقة تمثل دورة الألوان RGB. يمكنك أن تلاحظ أن الأحمر هو 0 درجات، والأخضر في 120 درجات، والأزرق في 240 درجات. دعونا نستغيث بعمق في هذه الثلاث خصائص ونفهم ما يحدث خلف الكواليس عند استخدام الألوان الHSL في CSS.

تركيز اللون

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

القيمة من وحدة الزاوية تتراوح بين 0-360 درجة. الأحمر عند 0 درجة، الأخضر عند 120 درجة، والأزرق عند 240 درجة. بالنسبة للراديان، تتراوح القيم بين 0–6.28 راد. القيم الوحدية الأكثر استخداما في ألوان HSL في CSS هي قيم الدرجات.

لنأخذ مثالا لفهم طريقة عمل اللون الأساسي (Hue).

div {

  border: 2px solid;

  height: 100px;

  background-color: hsl(123deg, 39%, 49%);

}

النتيجة:

بالرغم من أن قيم الزاوية محدودة بين 0-360، يمكنها أن تتقبل قيم أقل من 0 درجة وأكثر من 360 درجة. عندما تتجاوز القيمة 360، يتم تحويلها إلى القيمة في النطاق بطريقة الاستقطاب من 360. في حالة القيم أقل من 0 أو القيم السلبية، يتم إضافة القيمة إلى 360، ومن ثم يستخدم القيمة الناتجة لاسترجاع اللون.

background-color: hsl(400deg, 39%, 49%);

النتيجة:

background-color: hsl(-120deg, 39%, 49%);

النتيجة:

<div class="container1">Container 1</div>

<div class="container2">Container 2</div>

div {

  border: 2px solid;

  height: 100px;

  text-align: center;

  font-size: 80px;

  margin-bottom: 10px;

}

 

 

.container1 {

  background-color: hsl(60, 39%, 49%);

}

 

 

.container2 {

  background-color: hsl(420, 39%, 49%);

}

النتيجة:

إذا نظرنا إلى القيم الزاوية، فإن 60 درجة و 420 درجة (420 – 360 = 60) كلاهما تعني نفس الشيء. ولهذا، نحصل على نفس لون الخلفية في كلا الحاويتين، كما يمكن ملاحظة في المثال أعلاه.

.container1 {

  background-color: hsl(90, 39%, 49%);

}

 

 

.container2 {

  background-color: hsl(-270, 39%, 49%);

}

النتيجة:

هنا أيضا، يمكنكم ملاحظة أن 90 درجة و -270 درجة تعطينا نفس النتيجة بسبب نفس السبب في المثال السابق. 90 درجة و -270 درجة، كلاهما قيم واحدة إذا نظرنا إلى القيم الزاوية.

الآن، دعونا نتحرك إلى الصفة الثانية للطريقة HSL، وهي الإشباع (Saturation).

الإشباع

يحدد التشبع مستوى نقاء اللون ومقدار تشبعه أو عدم تشبعه. بمعنى آخر، يؤثر سمة التشبع على مستوى الكثافة للون. تقبل قياسة التشبع قيمة صحيحة بوحدات النسبة المئوية لتحديد تشبع اللون.

دعونا نأخذ مثالًا لفهم كيفية عمل التشبع.

.container{

  background-color:hsl(60, 45%,49%);

}

الناتج:

إذا كانت قيمة سمة التشبع عالية، فإن كثافة اللون أيضًا عالية، وسيكون مقدار الظل الرمادي في ذلك اللون أقل. لذلك، ستمنحنا القيمة 100% من التشبع لونًا نقيًا، وستؤدي القيمة 50% إلى نصف لون ونصف ظل رمادي، وستؤدي القيمة 0% إلى الظل الرمادي الكامل.

.container1{

  background-color:hsl(60, 0%,49%);

}

 

 

.container2{

  background-color:hsl(420, 25%,49%);

}

 

 

.container3{

  background-color:hsl(420, 50%,49%);

}

 

 

.container4{

  background-color:hsl(420, 75%,49%);

}

 

 

.container5{

  background-color:hsl(420, 100%,49%);

}

الناتج:

في المثال أعلاه، يمكنك رؤية الفرق الذي نحصل عليه في لون الخلفية للحاويات عند زيادة قيمة سمة التشبع من 0% إلى 100%. عند القيمة 0%، نحصل على اللون الرمادي الكامل في الحاوية 1، ومع زيادة القيمة، تزيد كثافة اللون أيضًا. في النهاية، تكون الكثافة أعلى عند 100% في الحاوية 5.

نظرًا لأن سمة التشبع تقبل قيمة نسبية، تقع القيمة المحصل عليها ضمن النطاق 0% – 100%. بطريقة ما، يمكن للمستخدم أيضًا تمرير قيم أكبر من 100% وأقل من 0% في سمة التشبع.

ولكن على غرار سمة اللون الأساسي، لا فائدة من تمرير قيم خارج الحد لأنه إذا قام المستخدم بتمرير قيمة أكبر من 100%، فإن كثافة اللون تبقى مساوية لـ 100%. في القيم أقل من 0% (القيم السالبة)، تبقى الكثافة مساوية لـ 0%.

.container1 {

  background-color: hsl(60, 0%, 49%);

}

 

 

.container2 {

  background-color: hsl(420, -25%, 49%);

}

الناتج:

هنا، يمكنك أن تلاحظ أننا قمنا بتعيين قيم 0% و -25% للتكوين اللوني، وفي المعاملتين المختلفتين، نحصل على نفس اللون الخلفي.

.container1 {

  background-color: hsl(60, 100%, 49%);

}

 

 

.container2 {

  background-color: hsl(420, 200%, 49%);

}

الخريطة:

في هذا المثال، قمنا بتعيين القيم 100% و 200% للتكوين اللوني، ولكل هذين القيم المختلفتين، نحصل على نفس اللون الخلفي في المعاملتين.

و الآن، وقت الخاص بالخصائص الأخيرة لطريقة HSL التي يستخدم في HSL Colors in CSS، وهي البروز.

البروز

وكما يخبر الاسم، تحكم البروز في كمية الضوء في اللون. بمعنى آخر، يمكن أيضًا وصف البروز كخصائص التي تحكم في كمية اللون الأولي يكون ضوء أو داكن. مثل التكوين المتناول، تتطلب البروز أيضًا قيمة 整数 في وحدات البالغة البالغة.

دعونا نرى مثالًا لفهم عملية البروز.

.container {

  background-color: hsl(60, 39%, 49%);

}

الخريطة:

.container1 {

  background-color: hsl(60, 39%, 0%);

  color: white;

}

 

 

.container2 {

  background-color: hsl(420, 39%, 25%);

}

.container3 {

  background-color: hsl(420, 39%, 50%);

}

.container4 {

  background-color: hsl(420, 39%, 75%);

}

.container5 {

  background-color: hsl(420, 39%, 100%);

}

الخريطة:

هنا، يمكنك أن تلاحظ أن في ال0% من البروز، يكون لون الخلفية أسودًا منهجيًا في Container 1، ومع زيادة قيمة البروز، يزداد البروز في اللون، وفي البروز ال100% هو كامل؛ لذلك يكون اللون الخلفية أبيضًا كاملًا في Container 5.

مثل التكوين المتناول، يتقبل البروز قيم أعلى من 100% وأسفل من 0%. لكن قيم أعلى من 100% تعمل بنفس الطريقة كما 100%，وقيم أسفل من 0% (قيم سلبية) تعمل بنفس الطريقة كما 0%. دعونا نرى هذا في عمل.

.container1 {

  background-color: hsl(60, 39%, 0%);

}

 

 

.container2 {

  background-color: hsl(420, 39%, -25%);

}

الخريطة:

.container1 {

  background-color: hsl(60, 39%, 100%);

}

 

 

.container2 {

  background-color: hsl(420, 39%, 250%);

}

Output:

تلاحظ في هذا العимер أنه على الرغم من أننا قمنا بتعيين قيمة 100% من الفراشة في الحاوية 1 وقيمة 200% في الحاوية 2، إلا أنه لا يزيد من النتيجة باللون الخلفي.

لقد كنا نتحدث عن الصفات الثلاث لألوان HSL في CSS، لكن هذا ليس كل شيء. ميزة أخرى تحت ألوان HSL في CSS هي “A”، وهي تختصر لـ “ألفا”. إنها الصفة الرابعة. تحدد الصفة الألفا شفافية اللون. بمعنى آخر، تعديل الصفة الألفا ببساطة مستوى شفافية اللون. في HSL، لاستخدام الصفات الألفا، يُستخدم مетод HSLA.

على عكس الصفات الأخرى لألوان HSL في CSS التي تتطلب قيمة تتكون من الوحدات، لا تتطلب الصفة الألفا قيمة وحدة. تتطلب الصفة الألفا قيمة بدون وحدة تتراوح بين 0 – 1. في 0، اللون غير مرئي أو مخفي؛ في 1، تصل الصفة الألفا إلى قمتها الأعلى، واللون يصبح مرئي تماماً.

.container{

  background-color:hsla(60, 39%,49%, 0);

}

الناتج:

.container{

  background-color:hsla(60, 39%,49%, 1);

}

الناتج:

هنا، لأننا قمنا بتعيين الصفة الألفا بقيمة 1، يظهر لون الخلفية للحاوية ويمكننا بدء لون الخلفية.

لا يتميز الأمر بتطلب قيمة بدون وحدة فقط ما يميز صفة الألفا. يمكن لصفة الألفا قبول أي قيمة بين 0 إلى 1، حتى القيم العشرية (0.1, 0.2, 0.01) التي لا تعمل في الصفات الأخرى لألوان HSL في CSS.

.container {

  background-color: hsla(60, 39%, 49%, 0.5);

}

الناتج:

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

إليك مثال يوضح ذلك.

.container {

  background-color: hsla(60, 39%, 49%, 0.25);

}

الناتج:

هنا، قمنا بتمرير قيمة 0.25 وهي قيمة عشرية بمكانين إلى الخاصية ألفا.

مزايا استخدام ألوان HSL في CSS

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

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

بالنسبة للتطبيق العملي، تُعتبر ألوان HSL في CSS على مستويات مهنية عديدة للاستخدام بسبب مزاياها.

هناك عدة مزايا لاستخدام ألوان HSL كما هو مدرج أدناه:

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

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

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

تطبيقات استخدام الألوان HSL في CSS

توفر الألوان HSL في CSS طريقة متنوعة ومفهومة لتحديد الألوان وتمتلك عدد كبير من التطبيقات في التطوير الويب. هذه بعض أهم التطبيقات لاستخدام الألوان HSL في CSS:

الألوان الملونة

على المستوى المهني، لإنشاء موضوع و

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

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

الألوان المظلم في التحويل

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

button {

  padding: 10px;

  border-radius: 20px;

  background-color: hsl(240, 39%, 70%);

  color: white;

  font-size: 20px;

}

 

 

button:hover {

  background-color: hsl(240, 39%, 50%);

  cursor: pointer;

}

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

ألوان الأبيض المتنوعة

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

تساعدنا الألوان الـHSL في الـCSS على الحصول على أشades مختلفة من اللون الأبيض. يمكننا إضافة قيم مختلفة للخصوصية المضيئة في طريقة الـHSL للحصول على الأشades المختلفة من اللون الأبيض.

.container1 {

  color: hsl(30, 49%, 100%);

}

 

 

.container2 {

  color: hsl(30, 49%, 90%);

}

 

 

.container3 {

  color: hsl(30, 49%, 95%);

}

 

 

.container4 {

  color: hsl(30, 49%, 85%);

}

المنتج:

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

أنواع الأزاري

تأتي الألوان الـHSL في الـCSS بمفايدة كبيرة عندما يكون لدينا نوعين مختلفين من اللون المتبادل للأزاري. تحديد أشades مختلفة من اللون المشترك يجعل المستخدم يتمكن بسرعة من تحديد أي الأزاري هو الرئيسي وأي الثانوي.

في الحياة الحقيقية، يستخدم اللون المظلم الأكثر للأزاري الرئيسي والأشades الأخف يستخدم للأزاري الثانوي. للحصول على الأشades الضوئية والمظلمة من اللون المشترك، نقوم بتحديد قيم عالية وسطية للخصوصية المضيئة في طريقة الـHSL.

دعونا نرى هذا في عمل من خلال مثال.

.primary {

  color: white;

  background-color: hsl(10, 49%, 55%);

}

 

 

.secondary {

  background-color: hsl(10, 49%, 80%);

}

المنتج:

في مثال الأعلى، الزر الأعلى هو الرئيسي والزر السفلي هو الثانوي. يستخدم اللون المظلم الأكثر في الزر الرئيسي مع قيمة منخفضة للضوء ويستخدم اللون الأخف في الزر الثانوي مع قيمة عالية للضوء.

ألوان ال

إستخدام الcontrast اللوني correct من المهم في الواجهة المستخدمة. خاصةً عندما تمكن المستخدم من تفعيل السماحة المظلمة على الموقع. ووفقاً للدراسات التي اجريت في عام 2022، 81.9% من المستخدمين يستخدمون السماحة المظلمة على هواتفهم النقالة. من هذا، يمكنك تخيل أهمية الcontrast اللوني في الواجهات المستخدمة للسماحة المظلمة.

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

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

كيف تختار المعيار الأفضل للألوان

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

السدسي الhexadecimal

إذا كنت خارجًا من أي مجال من التصميم وإنشاء المشاريع للاستخدام الشخصي، فقد تتوج

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

RGB

والآن فيما يتعلق بخيار طريقة RGB: هذه الطريقة مفيدة لجميع المطورين المحترفين والمصممين في مجال تحرير الصور والتصميم. وسبب آخر هو أن طريقة RGB هي أكثر المعايير اللونية استخدامًا شائعًا في معظم التطبيقات التصميمية المحترفة، بما في ذلك CorelDraw وPhotoShop وIllustrator. ولكن تفشل طريقة RGB عندما يتوجب تخصيص أنواع مختلفة من نفس اللون بدون تعقيد جدًا.

HSL

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

توافر المتصفحات

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

بحسب الحظ، يع

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

لكن يمكنك أن تقوم باختبار التوافق المتعدد المتصفحات لضمان أن الألوان المستخدمة في الHSL في الCSS تقدم النتائج المطلوبة على كل متصفح. والأنظمة التجارية المتواصلة للجودة (أي. LambdaTest) تساعدك على أجراء اختبار التوافق المتعدد المتصفحات عبر مجموعة متنوعة من المتصفحات الحقيقية والأجهزة ومزيد من تلك التركيبات. وتقوم بتحقيق ما إذا كانت الألوان المحددة في الCSS تعمل بشكل صحيح في المتصفحات والأجهزة.

نهاية المقال!

هذا المقال علمنا عن دور الألوان الHSL في الCSS وكيف تختلف عن أساليب اللون الأخرى. وتحدثنا أيضًا عن تطبيقات الألوان الHSL في الCSS ومنحاً ذلك الفائد. وتعلمنا أيضًا كيف يمنح الألوان الHSL في الCSS مزيد من المرونة والدقة عندما يتم تحديد الألوان في التصميم الويبي.

باستخدام الألوان الHSL في الCSS، يمكن للمصممين أيضًا أن يكون لديهم تحكم أكبر في صدورة وضوح الألوان، مما يحدد مجموعة واسعة من اللونان والألوان الفرعي