18 – الالوان Colors في html

بسم الله الرحمن الرحيم

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

rgb

ويمكن تحديد الألوان بثلاثية النموذج اللوني أحمر أخضر أزرق ويختصر بهذة الحروف RGB
أي (Red Green Blue)

وهو نموذج لوني جمعي تجمع فيه الأضواء الحمراء والخضراء والزرقاء مع بعضها البعض بطرق مختلفة لتوليد مجموعة كبيرة من الألوان.
يمثل اللون عادة بثلاث مكونات (0، 0، 0)
تمثل الثلاثية (r,g,b)
طبعاً RGB تعني RED–GREEN–BLUE

بحيث كل خانة تمثل تركيز اللون بحيث تستطيع تشكيل أكثر من 16 مليون لون مختلف.
كل لون يحتمل من 0 إلى 255 من أدنى نسبة تركيز إلى أعلى نسبة تركيز.

255*255*255 = 16,581,375 لون مختلف.

وهو النظام العشري بمعني كل خانة تحتوي علي رقم من 0 الي 9

وأيضا لدينا نوع اخر من الالوان وهو الاهم والاكثر استخداما في مجالنا
الهيكس الثلاثي (Hex triplet)

وهو النظام ست عشري
الخانة الذي تتعدي ال 10 تتحول الي حرف
بمعني
Untitled-2

اللون الأبيض يمثل في نظام RGB عشري بـ (255,255,255) , ويمثل في نظام Hex الـست عشري ب (FFFFFF)
يمكن القول بانها هكذا (FF,FF,FF)
وسنشرح طرق تحويل الارقام من RGB الي Hex والعكس

كيف يمكن تحويل لون من RGB الي Hex ؟
الامر يحتاج الي عمليه حسابية بسيطة
لاحظ هذا الشرح في الصورة

يفلاتtled-1

لنفترض انني ساقوم بتحويل اللون الابيض (255,255,255) وهي تعني
6 خانات فارغة _ _ , _ _ , _ _
ناخذ اللون الاول R الاحمر
ناخذ الرقم 255 نقسمة علي 16
255 / 16 = 15 وبما وضحنا اعلي فان ال 15 = F
الان اصبح لدينا

من ثم نجد باقي القسمة يكون هو الخانه 2
255 / 16 = 15 –> 15 * 16 = 240
255 – 240 = 15 وبتحويلة يصبح F
الان اصبح لدينا

وبما ان الارقام متشابهة في كل الخانات سنطبق نفس العملية والناتج سيكون FFFFFF

لناخذ مثال اخر
(170,172,153) RGB
اللون الاحمر 170
170 / 16 = 10 .. لاحظ انه يتم تجاهل الارقام الكسرية ونتعامل مع الرقم الصحيح فقط
وبتحويل الرقم 10 الي نظام ست عشري يصبح A
الان اصبح لدينا

اللون الاحمر ايضا / باقي القسمة
170 / 16 = 10 .. 10 * 16 = 160 ….. 170 – 160 = 10 وهو باقي القسمة
وبتحويل الرقم 10 يصبح A
اصبح لدينا

اللون الاخضر 172
172 / 16 = 10 وبتحويلة يصبح A
اصبح لدينا

اللون الاخضر ايضا / باقي القسمة
172 / 16 = 10 …. 10 * 16 = 160 … 172 – 160 = 12 وبتحويلة يصبح C
اصبح لدينا الان

اللون الازرق
153 / 16 = 9 وبما انه لم يتعدي ال10 اي ضمن النظام العشري فيكتب كما هو
اصبح لدينا

اللون الازرق ايضا / باقي القسمة
153 / 16 = 9 … 9 * 16 = 144 …. 153 – 144 = 9 وهو ضمن النظام العشري
فيصبح الناتج النهائي

التحويل من hex الي rgb
لنقم بتحويل هذا
DE0000
لنتعامل مع de
علمنا ان D = 13
المعادلة ستكون كالتالي
13 * 16 = 208 + باقي القسمة وهو الخانه 2
الخانه 2 هي E ونعلم ان e = 14
208 + 14 = 222
اذا فان ال R = 222
الامر سهل اليس كذلك
ونفس الطريقة تستخدم لخانة G و B

اشعر بك الان وانت تتذمر من هذة الطرق وتقول كيف احدد لون ما .. يعجبني
لا تقلق لن تحتاج الي تجربة 16,581,375 لون لتجد اللون المناسب ^^
فالامر اسهل من يوجد مواقع عدة وبرامج عدة توفر عليك هذا وفي لحظات ^^
ولاحظ ايضا ان هناك بعض الالوان يمكن كتابتها مباشرة واعتقد انك لاحظت هذا في الدروس السابقة

	Black		White
	Red		Green
	Marron		Purple
	Navy		Blue
	Teal		Lime
	Gray		Silver
	Olive		Aqua
	Fuchsia		Yellow

ولكن نظام hex يمكنك من فعل الكثير
لاحظ التالي وهو تعديل الضوء الاحمر مع بقاء الازرق والاخضر 0

Red Light	HEX	RGB
	#000000	rgb(0,0,0)
	#080000	rgb(8,0,0)
	#100000	rgb(16,0,0)
	#180000	rgb(24,0,0)
	#200000	rgb(32,0,0)
	#280000	rgb(40,0,0)
	#300000	rgb(48,0,0)
	#380000	rgb(56,0,0)
	#400000	rgb(64,0,0)
	#480000	rgb(72,0,0)
	#500000	rgb(80,0,0)
	#580000	rgb(88,0,0)
	#600000	rgb(96,0,0)
	#680000	rgb(104,0,0)
	#700000	rgb(112,0,0)
	#780000	rgb(120,0,0)
	#800000	rgb(128,0,0)
	#880000	rgb(136,0,0)
	#900000	rgb(144,0,0)
	#980000	rgb(152,0,0)
	#A00000	rgb(160,0,0)
	#A80000	rgb(168,0,0)
	#B00000	rgb(176,0,0)
	#B80000	rgb(184,0,0)
	#C00000	rgb(192,0,0)
	#C80000	rgb(200,0,0)
	#D00000	rgb(208,0,0)
	#D80000	rgb(216,0,0)
	#E00000	rgb(224,0,0)
	#E80000	rgb(232,0,0)
	#F00000	rgb(240,0,0)
	#F80000	rgb(248,0,0)
	#FF0000	rgb(255,0,0)