من الأسماء إلى السداسية عشرية إلى rgb وhsl، اكتشف الطرق العديدة التي تتيح لك CSS وصف اللون.

الماخذ الرئيسية

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

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

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

instagram viewer

1. استخدام أسماء الألوان

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

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

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

color_property: color_name;

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

p {
color: red;
}

سيؤدي ذلك إلى إعطاء فقراتك لونًا أحمر للنص:

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

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

2. رموز الألوان السداسية العشرية

تعد رموز الألوان السداسية العشرية، والتي يشار إليها غالبًا باسم "الأكواد السداسية"، أكثر الطرق شيوعًا لتحديد الألوان في تصميم الويب. تتكون هذه الرموز من مجموعات مكونة من ستة أحرف من الأرقام والحروف (0-9، A-F)، تمثل مزيجًا من مكونات الأحمر والأخضر والأزرق (RGB) في اللون.

على الرغم من أنها سهلة الاستخدام، إلا أن فهم كيفية عملها قد يكون أمرًا صعبًا. يمكنك أن تأخذ الغوص العميق في الرموز السداسية لفهم أفضل. فيما يلي مثال أساسي لكيفية استخدام الرموز السداسية في CSS:

color: #RRGGBB;

في هذا التنسيق، يمثل RR وGG وBB المكونات الحمراء والخضراء والزرقاء على التوالي. يمكن أن يتراوح كل مكون من 00 (بدون شدة) إلى FF (أقصى كثافة). على سبيل المثال، إذا كنت تريد تعيين لون خلفية رأس موقع الويب إلى ظل معين من اللون الأزرق، فيمكنك استخدام رمز سداسي عشري مثل هذا:

header {
background-color: #336699;
}

سيؤدي ذلك إلى إنتاج لون أزرق غامق:

​​​​​

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

header {
background-color: #369;
}

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

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

3. قيم الألوان RGB وRGBA

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

قيم اللون RGB

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

وهنا بناء الجملة:

rgb(red_value, green_value, blue_value);

يستبدل red_value, القيمة الخضراء، و blue_value مع القيم الرقمية الخاصة بها. على سبيل المثال، يمكنك تحقيق الألوان الأبيض والأسود والأحمر مثل تلك الموضحة في هذه الصورة:

عندما تقوم بتعيين قنوات الألوان الثلاثة (الأحمر والأخضر والأزرق) على القيمة القصوى البالغة 255، يؤدي ذلك إلى أعلى كثافة لكل قناة، مما يؤدي إلى إنشاء اللون الأبيض:

.white-box {
 color: rgb(255, 255, 255);
}

عندما تقوم بتعيين جميع قنوات الألوان الثلاثة على الحد الأدنى لقيمتها وهو 0، فإن ذلك يمثل غياب اللون في كل قناة، مما يؤدي إلى ظهور اللون الأسود.

.black-box {
color: rgb(0, 0, 0);
}

ضبط القناة الحمراء على قيمتها القصوى 255، مع إبقاء القنوات الأخرى على الحد الأدنى لقيمتها 0، ينتج اللون الأحمر:

.red-box {
color: rgb(255, 0, 0); 
}

قيم اللون RGBA

يعمل RGBA بنفس طريقة RGB، والفرق الوحيد هو تضمين قيمة ألفا. يشير الحرف "A" في RGBA إلى ألفا، والذي يحدد مستوى الشفافية أو العتامة للون المختار. تمثل القيمة 0 الشفافية الكاملة، مما يجعل اللون غير مرئي تمامًا، بينما تمثل القيمة 1 العتامة الكاملة، مما يجعل اللون مرئيًا بالكامل.

يعد RGBA مفيدًا بشكل خاص عندما تريد إنشاء عناصر بمستويات مختلفة من الشفافية، مثل الخلفيات الشفافة أو النص الباهت. بناء الجملة الكامل هو:

color: rgba(red_value, green_value, blue_value, alpha_value);

هنا، red_value, القيمة الخضراء، و blue_value تمثل قنوات الألوان كما في RGB، و alpha_value يحدد مستوى الشفافية.

div {
background-color: rgba(0, 128, 0, 0.5);
}

في هذا المثال، تقوم قيمة ألفا البالغة 0.5 بتعيين شفافية بنسبة 50% للون الأخضر، مما يسمح للمحتوى الموجود أسفله بالظهور من خلال:

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

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

4. قيم الألوان HSL وHSLA

HSL - اختصار لـ Hue وSaturation وLightness - هي وظيفة CSS أخرى تحدد الألوان. مثل RGB، يستخدم HSL قيمًا رقمية لتمثيل الألوان، لكنه يفعل ذلك بشكل مختلف. قد تكون على دراية قيم HSL من مكونات واجهة المستخدم في تطبيقات التصميم وفي أماكن أخرى.

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

التشبع: يحدد التشبع حيوية اللون أو كثافته. إنه يحدد علاقة اللون بالرمادي، حيث يكون 0% تدرجًا رماديًا بالكامل (غير مشبع) و100% مشبعًا بالكامل (نابض بالحياة ونقي).

خفة: تمثل الخفة مدى سطوع اللون أو قتامة اللون. يتعلق الأمر بموقع اللون على الطيف بين الأسود (0%) والأبيض (100%). تمثل القيمة 50% اللون العادي، بينما القيم الأقل من 50% تغمق اللون، والقيم الأعلى من 50% تؤدي إلى تفتيحه.

بالإضافة إلى HSL، هناك HSLA، حيث يشير الحرف "A" إلى "alpha". وهذا مشابه للحرف "A" في RGBA ويدل على الشفافية.

وهنا بناء الجملة:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

باستخدام بناء الجملة هذا، استبدال hue_value, saturation_percentage، و lightness_percentage بالقيم المحددة التي تريدها لكل مكون. على سبيل المثال:

div {
background-color: hsl(120, 100%, 50%);
}

في هذا المثال، لون الخلفية لـ a شعبة تم ضبط العنصر على اللون الأخضر النابض بالحياة باستخدام قيم HSL. يمثل 120 اللون (الأخضر)، و100% للتشبع الكامل، و50% يضبط الإضاءة على مستوى متوازن.

الايجابيات: يقدم HSL وHSLA حسابات ألوان متعددة الاستخدامات باستخدام خصائص CSS المخصصة. وهي متوافقة إلى حد كبير مع المتصفحات الحديثة وتتيح إجراء تعديلات سهلة على إضاءة الألوان.

سلبيات: يتضمن تعلم HSL فهم علم الألوان، مثل درجات اللون والتشبع، والتي يمكن أن تكون أكثر تحديًا من ألوان RGB المألوفة.

احتضان قوة ألوان CSS

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

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