في HTML ، يمكن تحديد اللون بثلاث طرق:
ضبط اللون في HTML من خلال اسمه
يمكن تحديد بعض الألوان من خلال اسمها ، باستخدام اسم اللون باللغة الإنجليزية كقيمة. الكلمات الرئيسية الأكثر شيوعًا: أسود (أسود) ، أبيض (أبيض) ، أحمر (أحمر) ، أخضر (أخضر) ، أزرق (أزرق) ، إلخ:
لون النص - أحمر
الألوان الأكثر شيوعًا لمعيار اتحاد شبكة الويب العالمية (W3C) هي:
| اللون | اسم | اللون | اسم | اللون | اسم | اللون | اسم |
|---|---|---|---|---|---|---|---|
| أسود | رمادي | فضة | أبيض | ||||
| الأصفر | جير | أكوا | ضارب الى الحمرة | ||||
| أحمر | أخضر | أزرق | أرجواني | ||||
| كستنائي | زيتون | القوات البحرية | بط نهري صغير |
مثال على استخدام أسماء ألوان مختلفة:
مثال: تحديد اللون من خلال اسمه
- جربها بنفسك "
رأس على خلفية حمراء
رأس على خلفية برتقالية
رأس على خلفية الجير
نص أبيض على خلفية زرقاء
رأس على خلفية حمراء
رأس على خلفية برتقالية
رأس على خلفية الجير
نص أبيض على خلفية زرقاء
تحديد اللون باستخدام RGB
عند عرض ألوان مختلفة على الشاشة ، يتم أخذ لوحة RGB كأساس. يتم الحصول على أي لون عن طريق مزج الألوان الثلاثة الرئيسية: R - أحمر, G - أخضر (أخضر), ب - أزرق (أزرق). يتم تحديد سطوع كل لون بواسطة بايت واحد ، وبالتالي يمكن أن تأخذ قيمًا من 0 إلى 255. على سبيل المثال ، يتم تقديم RGB (255،0،0) باللون الأحمر نظرًا لتعيين الأحمر على أعلى قيمة له (255) و يتم تعيين الباقي على 0 يمكنك أيضًا تعيين اللون كنسبة مئوية. تشير كل معلمة إلى مستوى سطوع اللون المقابل. على سبيل المثال: القيم rgb (127 ، 255 ، 127) و rgb (50٪ ، 100٪ ، 50٪) ستحدد نفس التشبع المتوسط باللون الأخضر:
مثال: تحديد لون باستخدام RGB
- جربها بنفسك "
RGB (127 ، 255 ، 127)
RGB (50٪ ، 100٪ ، 50٪)
RGB (127 ، 255 ، 127)
RGB (50٪ ، 100٪ ، 50٪)
اضبط اللون حسب القيمة السداسية العشرية
قيم ص جي بيمكن أيضًا تحديدها باستخدام قيم الألوان السداسية العشرية (HEX) بالشكل: #RRGGBB حيث تكون RR (أحمر) و GG (أخضر) و BB (أزرق) قيمًا سداسية عشرية من 00 إلى FF (مثل العلامة العشرية 0- 255). النظام السداسي العشري ، على عكس النظام العشري ، يعتمد ، كما يوحي اسمه ، على الرقم 16. يستخدم النظام السداسي العشري الأحرف التالية: 0 ، 1 ، 2 ، 3 ، 4 ، 5 ، 6 ، 7 ، 8 ، 9 ، A ، B ، C ، D ، E ، F. هنا يتم استبدال الأرقام من 10 إلى 15 بأحرف لاتينية. الأعداد الأكبر من 15 في النظام الست عشري هي اتحاد حرفين في قيمة واحدة. على سبيل المثال ، أعلى رقم 255 في النظام العشري يتوافق مع أعلى رقم FF في النظام الست عشري. على عكس النظام العشري ، فإن الرقم السداسي العشري مسبوق بعلامة الجنيه. # ، على سبيل المثال ، يتم عرض # FF0000 باللون الأحمر لأن اللون الأحمر مضبوط على أعلى قيمة له (FF) ويتم ضبط الألوان الأخرى على القيمة الدنيا (00). الأحرف بعد رمز التجزئة # يمكن كتابتها بأحرف كبيرة وصغيرة. يسمح النظام الست عشري باستخدام صيغة مختصرة مثل #rgb ، حيث تعادل كل حرف مرتين. وبالتالي ، يجب اعتبار الإدخال # f7O على أنه # ff7700.
مثال: لون HEX
- جربها بنفسك "
الأحمر: # FF0000
أخضر: # 00FF00
الأزرق: # 0000FF
الأحمر: # FF0000
أخضر: # 00FF00
الأزرق: # 0000FF
أحمر + أخضر = أصفر: # FFFF00
أحمر + أزرق = بنفسجي: # FF00FF
أخضر + أزرق = سماوي: # 00FFFF
قائمة الألوان الشائعة الاستخدام (الاسم ، HEX و RGB):
| عنوان باللغة الإنجليزية | الاسم الروسي | عينة | عرافة | RGB | ||
|---|---|---|---|---|---|---|
| قطيفة | قطيفة | # E52B50 | 229 | 43 | 80 | |
| العنبر | العنبر | # FFBF00 | 255 | 191 | 0 | |
| أكوا | أزرق أخضر | # 00FFFF | 0 | 255 | 255 | |
| أزور | أزور | # 007FFF | 0 | 127 | 255 | |
| أسود | الأسود | #000000 | 0 | 0 | 0 | |
| أزرق | أزرق | # 0000FF | 0 | 0 | 255 | |
| بوندي بلو | مياه شاطئ بوندي | # 0095B6 | 0 | 149 | 182 | |
| نحاس | نحاس | # B5A642 | 181 | 166 | 66 | |
| بني | بني | # 964B00 | 150 | 75 | 0 | |
| سيرولين | أزور | # 007BA7 | 0 | 123 | 167 | |
| أخضر ربيعي غامق | أخضر ربيعي غامق | #177245 | 23 | 114 | 69 | |
| زمرد | زمرد | # 50C878 | 80 | 200 | 120 | |
| باذنجان | باذنجان | #990066 | 153 | 0 | 102 | |
| ضارب الى الحمرة | ضارب الى الحمرة | # FF00FF | 255 | 0 | 255 | |
| ذهب | ذهب | # FFD700 | 250 | 215 | 0 | |
| رمادي | رمادي | #808080 | 128 | 128 | 128 | |
| أخضر | أخضر | # 00FF00 | 0 | 255 | 0 | |
| نيلي | نيلي | # 4B0082 | 75 | 0 | 130 | |
| يشم | يشم | # 00A86B | 0 | 168 | 107 | |
| جير | جير | # CCFF00 | 204 | 255 | 0 | |
| الملكيت | الملكيت | # 0BDA51 | 11 | 218 | 81 | |
| القوات البحرية | أزرق غامق | #000080 | 0 | 0 | 128 | |
| أكسيد الرصاص | أكسيد الرصاص | # CC7722 | 204 | 119 | 34 | |
| زيتون | زيتون | #808000 | 128 | 128 | 0 | |
| البرتقالي | البرتقالي | # FFA500 | 255 | 165 | 0 | |
| خوخ | خوخ | # FFE5B4 | 255 | 229 | 180 | |
| يقطين | يقطين | # FF7518 | 255 | 117 | 24 | |
| أرجواني | أرجواني | #800080 | 128 | 0 | 128 | |
| أحمر | أحمر | # FF0000 | 255 | 0 | 0 | |
| زعفران | زعفران | # F4C430 | 244 | 196 | 48 | |
| البحر الاخضر | البحر الاخضر | # 2E8B57 | 46 | 139 | 87 | |
| المستنقع الأخضر | بولوتني | # ACB78E | 172 | 183 | 142 | |
| بط نهري صغير | أزرق أخضر | #008080 | 0 | 128 | 128 | |
| Ultramarine | فوق البحر | # 120A8F | 18 | 10 | 143 | |
| البنفسجي | أرجواني | # 8B00FF | 139 | 0 | 255 | |
| الأصفر | الأصفر | # FFFF00 | 255 | 255 | 0 | |
رموز اللون (الخلفية) عن طريق التشبع وتدرج اللون.
11/28 / 1411.1 كلسوء الحظ ، ليس من الممكن حتى الآن إظهار أحاسيس التذوق على الموقع. ولكن يمكن تعويض ذلك بالكامل بمساعدة الألوان. بعد كل شيء ، تسمح لك ألوان html بعرض أي من ملايين الظلال. وبالتالي " أقلام ملونة"في مجموعته أكثر من سبعة.
نظام الألوان في html
في لغة تأشير النص الفائق ، يمكن تحديد اللون بعدة صيغ:
1. كقيمة سداسية عشرية - يتم استخدام الكود المحدد في النظام الست عشري. تتكون أكواد الألوان في لغة تأشير النص الفائق من ثلاثة أزواج من الأرقام السداسية العشرية. كل زوج مسؤول عن تشبع الصبغة بلونها الأساسي:
- الزوج الرقمي الأول مسؤول عن اللون الأحمر ؛
- الزوج الثاني لمحتوى اللون الأخضر ؛
- هذا الأخير لمحتوى اللون الأزرق.
في بداية الكود (قبل الأرقام) ، يتم وضع علامة التجزئة. هذا هو رمز اللون الست عشري. بالإضافة إلى الأرقام من 1 إلى 9 ، يستخدم نظام الأرقام هذا أحرف الأبجدية اللاتينية (A ، B ، C ، D ، E ، F).
على سبيل المثال ، قد يبدو كود اللون الأبيض في html بالشكل #FFFFFF:
2. الكلمات الرئيسية - يدعم html الآن حوالي 147 كلمة رئيسية. لكن ليست كل هذه الكلمات فريدة. يشير بعضها إلى نفس لون الظل.
يتم تمثيل الرمادي بكلمتين رئيسيتين: الرمادي والرمادي. يتم إعطاء الكود السداسي العشري (HEX) بنفس القيمة # 808080.
مثال :
#808080
3. في تنسيق RGB - يعتمد ترميز اللون هذا في html على استخدام ثلاث قيم محددة في النطاق من 0 إلى 255. يحدد كل منها تشبع تدرج اللون بأحد الألوان الأساسية:
- R - أحمر (أحمر) ؛
- G - أخضر (أخضر) ؛
- ب - أزرق (أزرق).
رقم اللون بصيغة RGB مكتوب على النحو التالي: rgb (0 ، 210 ، 100).
لون الخلفية: rgb (10018643)
4. في تنسيق RGBA - إنه تنسيق RGB متقدم ، حيث تحدد القيمة الرابعة شفافية اللون في شكل كسر عشري من 0 إلى 1.
مثال على الاستخدام:
لون الخلفية: rgba (100،86،143،0.2)
لون الخلفية: rgba (100،86،143،0.5)
لون الخلفية: rgba (100،86،143،0.8)
لون الخلفية: rgba (100،86،143،1)
جداول الألوان html ومولدات الألوان
مع هذه المجموعة الواسعة من تنسيقات ضبط الألوان ، من السهل الخلط. لذلك ، تم اختراع جدول ألوان خاص. في ذلك ، إلى 147 اسمًا رئيسيًا لظلال الألوان ، يتم تقديم رموز المراسلات في جميع المعايير الرئيسية لتمثيل الألوان. بالإضافة إلى ذلك ، تم تجهيز كل حقل بشريط لمطابقة الألوان المرئية. أحد هذه الجداول معروض على موقع colorcheme.ru:
ولكن حتى بمساعدة مثل هذا التنظيم للمراسلات ، قد يكون اختيار الظل المطلوب أمرًا صعبًا. وليست حقيقة أن هناك الجدول الصحيح في جدول رموز الألوان.
للالتفاف حول هذا الحاجز وتسهيل اختيار الظل المناسب قدر الإمكان ، تم تطوير خدمات الويب التفاعلية. قد تختلف واجهة المستخدم الخاصة بهم قليلاً عن بعضها البعض.
على موقع html-color-codes.info ، يبدو منشئ الألوان كما يلي:
وضمن خدمة color-picker.appsmaster.co ، يتم تنفيذ هذه الأداة بشكل مختلف قليلاً:
يتم ضبط تشبع كل لون في المولد باستخدام منزلقات خاصة. بصريًا ، يتم عرض الصبغة بلون الإطار والمستطيل على الجانب الأيسر. في الجزء السفلي ، تعرض 3 حقول رمز اللون في التنسيقات الرئيسية.
لكن مولد الألوان متاح ليس فقط في المواقع المتخصصة. تم تجهيز جميع برامج تحرير الرسوم تقريبًا بأداة مماثلة. على سبيل المثال ، Photoshop:
سلامة اللون
وكان ذلك منذ زمن بعيد ، في عصر بطاقات الفيديو التي تدعم 256 لونًا فقط. في تلك الأيام ، يمكن لأنظمة التشغيل عرض عدد معين فقط من ظلال ثمانية بت دون تشويه.
ثم ولدت مائدة كبيرة من الألوان الآمنة. وأشارت إلى 216 لونًا يمكن عرضها دون تشويه في أي من المتصفحات في ذلك الوقت. وحتى يومنا هذا مخطوطة عظيمة»لا يزال متاحًا في بعض الموارد:
كل شيء تغير في عصرنا. لذلك ، يتم إلغاء جميع قواعد الأمان تمامًا عند العمل باستخدام اللون في لغة تأشير النص الفائق. بعد كل شيء ، تدعم أجهزة الكمبيوتر الحديثة أكثر من 16 مليون لون مختلف. و 216 لونًا آمنًا قد غرقوا في النسيان.
يتم استخدام الأرقام السداسية العشرية لتحديد الألوان. النظام السداسي العشري ، على عكس النظام العشري ، يعتمد ، كما يوحي اسمه ، على الرقم 16. ستكون الأرقام كما يلي: 0 ، 1 ، 2 ، 3 ، 4 ، 5 ، 6 ، 7 ، 8 ، 9 ، أ ، B ، C ، D ، E ، F. يتم استبدال الأرقام من 10 إلى 15 بأحرف لاتينية. يتم تكوين الأعداد الأكبر من 15 في النظام الست عشري من خلال دمج رقمين في واحد. على سبيل المثال ، الرقم 255 في النظام العشري يتوافق مع الرقم FF بالنظام الست عشري. لتجنب الالتباس في تعريف نظام الأرقام ، فإن الرقم السداسي العشري مسبوق برمز التجزئة # ، على سبيل المثال # 666999. يمكن أن يأخذ كل لون من الألوان الثلاثة - الأحمر والأخضر والأزرق - قيمًا من 00 إلى FF. وهكذا ، ينقسم تعيين اللون إلى ثلاثة مكونات #rrggbb ، حيث يشير الحرفان الأولان إلى المكون الأحمر للون ، ويميز الحرفان الأوسطان اللون الأخضر ، وآخرهما باللون الأزرق. يُسمح باستخدام الصيغة المختصرة للصيغة #rgb ، حيث يجب مضاعفة كل حرف. وبالتالي ، يجب اعتبار الإدخال # fe0 على أنه # ffee00.
بالاسم
| متصفح الانترنت | كروم | أوبرا | سفاري | ثعلب النار | ذكري المظهر | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
تدعم المتصفحات بعض الألوان بالاسم. في الجدول. يوضح الشكل 1 الأسماء والرمز السداسي والقيم بتنسيق RGB و HSL والوصف.
| اسم | اللون | الرمز | RGB | HSL | وصف |
|---|---|---|---|---|---|
| أبيض | #fffff أو #fff | RGB (255،255،255) | hsl (0.0٪، 100٪) | أبيض | |
| فضة | # c0c0c0 | RGB (192192192) | hsl (0.0٪، 75٪) | رمادي | |
| رمادي | #808080 | RGB (128128128) | hsl (0.0٪، 50٪) | رمادي غامق | |
| أسود | # 000000 أو # 000 | RGB (0،0،0) | hsl (0،0٪، 0٪) | الأسود | |
| كستنائي | #800000 | RGB (128،0،0) | hsl (0.100٪ ، 25٪) | احمر غامق | |
| أحمر | # ff0000 أو # f00 | RGB (255،0،0) | hsl (0.100٪ ، 50٪) | أحمر | |
| البرتقالي | # ffa500 | RGB (255،165،0) | hsl (38.8100٪، 50٪) | البرتقالي | |
| الأصفر | # ffff00 أو # ff0 | RGB (255،255،0) | hsl (60،100٪، 50٪) | الأصفر | |
| زيتون | #808000 | RGB (128،128،0) | hsl (60،100٪، 25٪) | زيتون | |
| جير | # 00ff00 أو # 0f0 | RGB (0،255،0) | hsl (120،100٪، 50٪) | اخضر فاتح | |
| لون أخضر | #008000 | rgb (0،128،0) | hsl (120،100٪، 25٪) | أخضر | |
| أكوا | # 00ffff أو # 0ff | RGB (0،255،255) | hsl (180،100٪، 50٪) | أزرق | |
| أزرق | # 0000ff أو # 00f | RGB (0،0،255) | hsl (240،100٪، 50٪) | أزرق | |
| القوات البحرية | #000080 | RGB (0،0،128) | hsl (240،100٪، 25٪) | أزرق غامق | |
| بط نهري صغير | #008080 | RGB (0،128،128) | hsl (180،100٪ ، 25٪) | أزرق أخضر | |
| ضارب الى الحمرة | # ff00ff أو # f0f | RGB (255،0،255) | hsl (300،100٪، 50٪) | لون القرنفل | |
| ليلكي | #800080 | rgb (128،0،128) | hsl (300،100٪، 25٪) | أرجواني |
مع RGB
| متصفح الانترنت | كروم | أوبرا | سفاري | ثعلب النار | ذكري المظهر | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
يمكنك تحديد لون باستخدام قيم الأحمر والأخضر والأزرق بعبارات عشرية. يأخذ كل مكون من مكونات اللون الثلاثة قيمة من 0 إلى 255. ومن المقبول أيضًا تعيين اللون كنسبة مئوية ، بينما يتوافق 100٪ مع الرقم 255. أولاً ، يتم تحديد الكلمة الأساسية rgb ، ثم يتم تحديد مكونات اللون محددة بين قوسين ، مفصولة بفواصل ، على سبيل المثال rgb (255 ، 128 ، 128) أو rgb (100٪ ، 50٪ ، 50٪).
RGBA
| متصفح الانترنت | كروم | أوبرا | سفاري | ثعلب النار | ذكري المظهر | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
يتشابه تنسيق RGBA في بناء الجملة مع تنسيق RGB ، ولكنه يتضمن قناة ألفا تحدد شفافية العنصر. تكون القيمة 0 شفافة تمامًا ، والقيمة 1 معتم ، والقيمة الوسيطة مثل 0.5 شفافة.
تمت إضافة RGBA إلى CSS3 ، لذلك يجب إجراء التحقق من صحة كود CSS وفقًا لهذا الإصدار. تجدر الإشارة إلى أن معيار CSS3 لا يزال قيد التطوير وقد تتغير بعض الميزات. على سبيل المثال ، يجتاز لون RGB المضاف إلى خاصية لون الخلفية عملية التحقق من الصحة ، ولكن لا يتم التحقق من صحة اللون المضاف إلى خاصية الخلفية. في الوقت نفسه ، تفهم المتصفحات بشكل صحيح لون كلتا الخاصيتين.
HSL
| متصفح الانترنت | كروم | أوبرا | سفاري | ثعلب النار | ذكري المظهر | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
يتكون اسم تنسيق HSL من مزيج من الأحرف الأولى Hue (hue) و Saturate (Saturation) و Lightness (lightness). Hue هي قيمة اللون على عجلة الألوان (الشكل 1) ويتم تحديدها بالدرجات. 0 ° أحمر ، 120 ° أخضر ، 240 ° أزرق. يمكن أن تختلف قيمة تدرج اللون من 0 إلى 359.
أرز. 1. عجلة الألوان
التشبع هو شدة اللون ويتم قياسه كنسبة مئوية من 0٪ إلى 100٪. تشير القيمة 0٪ إلى عدم وجود لون وظلال الرمادي ، و 100٪ هي قيمة التشبع القصوى.
يضبط الإضاءة مدى سطوع اللون ويتم تحديده كنسبة مئوية من 0٪ إلى 100٪. القيم الصغيرة تجعل اللون أغمق ، بينما القيم العالية تجعله أفتح ، والقيم القصوى من 0٪ و 100٪ تتوافق مع الأسود والأبيض.
HSLA
| متصفح الانترنت | كروم | أوبرا | سفاري | ثعلب النار | ذكري المظهر | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
يتشابه تنسيق HSLA في بناء الجملة مع HSL ، ولكنه يتضمن قناة ألفا تحدد شفافية العنصر. تكون القيمة 0 شفافة تمامًا ، والقيمة 1 معتم ، والقيمة الوسيطة مثل 0.5 شفافة.
تتم إضافة قيم الألوان بتنسيقات RGBA و HSL و HSLA إلى CSS3 ، لذلك عند استخدام هذه التنسيقات ، تحقق من الكود للتحقق من الصلاحية مقابل الإصدار.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
تحذير
جميع طرق اصطياد الأسد المدرجة في الموقع هي نظرية وتستند إلى طرق حسابية. لا يضمن المؤلفون سلامتك عند استخدامها ويتنصلون من أي مسؤولية عن النتيجة. تذكر أن الأسد حيوان مفترس وحيوان خطير!
تظهر نتيجة هذا المثال في الشكل. 2.
أرز. 2. الألوان على صفحة الويب
فلاد مرزفيتش
في HTML ، يتم تحديد اللون بإحدى طريقتين: استخدام رمز سداسي عشري وباسم بعض الألوان. يتم استخدام الطريقة القائمة على النظام الست عشري بشكل أساسي ، باعتبارها الأكثر عالمية.
ألوان سداسية عشرية
يستخدم HTML الأرقام السداسية العشرية لتحديد الألوان. النظام السداسي العشري ، على عكس النظام العشري ، يعتمد ، كما يوحي اسمه ، على الرقم 16. ستكون الأرقام كما يلي: 0 ، 1 ، 2 ، 3 ، 4 ، 5 ، 6 ، 7 ، 8 ، 9 ، أ ، B ، C ، D ، E ، F. يتم استبدال الأرقام من 10 إلى 15 بأحرف لاتينية. في الجدول. يوضح 6.1 التطابق بين الأعداد العشرية والأرقام السداسية العشرية.
يتم تشكيل الأعداد الأكبر من 15 في النظام الست عشري من خلال الجمع بين رقمين في واحد (الجدول 6.2). على سبيل المثال ، الرقم 255 في النظام العشري يتوافق مع الرقم FF بالنظام الست عشري.
لتجنب الالتباس في تعريف نظام الأرقام ، فإن الرقم السداسي العشري مسبوق بعلامة الجنيه # ، على سبيل المثال # aa69cc. في هذه الحالة لا يهم ، لذلك يجوز كتابة # F0F0F0 أو # f0f0f0.
اللون النموذجي المستخدم في HTML هو كما يلي.
هنا ، يتم ضبط لون خلفية صفحة الويب على # FA8E47. علامة الجنيه # أمام رقم تعني أنه بالنظام الست عشري. يحدد أول رقمين (FA) المكون الأحمر للون ، والأرقام من الثالث إلى الرابع (8E) والمكون الأخضر ، والأخران (47) المكون الأزرق. النتيجة النهائية هي هذا اللون.
| FA | + | 8E | + | 47 | = | FA8E47 |
يمكن أن يأخذ كل لون من الألوان الثلاثة - الأحمر والأخضر والأزرق - قيمًا من 00 إلى FF ، والتي تشكل في النهاية 256 لونًا. وبالتالي ، يمكن أن يكون العدد الإجمالي للألوان 256 × 256 × 256 = 16.777.216 مجموعة. يُطلق على نموذج الألوان المعتمد على المكونات الحمراء والخضراء والزرقاء اسم RGB (أحمر ، أخضر ، أزرق ، أحمر ، أخضر ، أزرق). هذا النموذج مضاف (من الإضافة - الإضافة) ، حيث تشكل إضافة المكونات الثلاثة اللون الأبيض.
لتسهيل التنقل بألوان سداسية عشرية ، يجب مراعاة بعض القواعد.
- إذا كانت قيم مكونات اللون هي نفسها (على سبيل المثال: # D6D6D6) ، فسيتم الحصول على صبغة رمادية. كلما زاد الرقم ، كان اللون أفتح وتتغير القيم من # 000000 (أسود) إلى #FFFFFF (أبيض).
- يتشكل اللون الأحمر الساطع إذا كان المكون الأحمر هو الحد الأقصى (FF) ، وبقية المكونات مضبوطة على الصفر. اللون ذو القيمة # FF0000 هو اللون الأحمر الأكثر احمرارًا. وينطبق الشيء نفسه على اللون الأخضر (# 00FF00) والأزرق (# 0000FF).
- يتم الحصول على اللون الأصفر (# FFFF00) عن طريق خلط الأحمر مع الأخضر. يظهر هذا بوضوح على عجلة الألوان (الشكل 6.1) ، والتي تقدم الألوان الأساسية (الأحمر والأخضر والأزرق) والتكميلية أو التكميلية. وتشمل هذه الأصفر ، والسماوي ، والبنفسجي (وتسمى أيضا أرجواني). بشكل عام ، يمكن الحصول على أي لون عن طريق مزج الألوان المجاورة له. لذلك ، يتم الحصول على السماوي (# 00FFFF) عن طريق الجمع بين اللونين الأزرق والأخضر.
أرز. 6.1 دائرة اللون
لا يلزم تحديد الألوان القائمة على القيم السداسية العشرية تجريبياً. لهذا الغرض ، يعد محرر الرسومات الذي يمكنه العمل مع نماذج ألوان مختلفة ، مثل Adobe Photoshop ، مناسبًا. على التين. يظهر الشكل 6.2 نافذة لاختيار لون في هذا البرنامج ، حيث يدور الخط حول القيمة السداسية العشرية الناتجة عن اللون الحالي. يمكنك نسخه ولصقه في التعليمات البرمجية الخاصة بك.
أرز. 6.2 منتقي الألوان في برنامج فوتوشوب
ألوان الويب
إذا قمت بتعيين جودة ألوان الشاشة على 8 بت (256 لونًا) ، فيمكن عرض نفس اللون بشكل مختلف في متصفحات مختلفة. يتعلق هذا بالطريقة التي يتم بها عرض الرسومات عندما يعمل المستعرض باستخدام لوح الألوان الخاص به ولا يمكنه إظهار لون غير موجود في اللوحة. في هذه الحالة ، يتم استبدال اللون بمجموعة من وحدات البكسل من ألوان أخرى قريبة منه تحاكي اللون المحدد. من أجل أن يظل اللون كما هو في المتصفحات المختلفة ، تم تقديم لوحة من ألوان الويب المزعومة. ألوان الويب هي تلك الألوان ، لكل مكون منها - الأحمر والأخضر والأزرق - يتم تعيين إحدى القيم الست - 0 (00) ، 51 (33) ، 102 (66) ، 153 (99) ، 204 (CC) ، 255 (FF). يشار إلى القيمة السداسية العشرية لهذا المكون بين قوسين. إجمالي عدد الألوان من جميع التركيبات الممكنة يعطي 6x6x6 - 216 لونًا. مثال على لون الويب هو # 33FF66.
الميزة الرئيسية للون الويب هي أنه يتم عرضها بنفس الطريقة في جميع المتصفحات. في الوقت الحالي ، تعد أهمية ألوان الويب صغيرة جدًا نظرًا للتحسن في جودة الشاشات وتوسيع قدراتها.
الألوان بالاسم
حتى لا تتذكر مجموعة من الأرقام ، يمكنك بدلاً من ذلك استخدام أسماء الألوان الشائعة الاستخدام. في الجدول. يظهر 6.3 أسماء أسماء الألوان الشائعة.
| اسم اللون | اللون | وصف | قيمة سداسية عشرية |
|---|---|---|---|
| أسود | الأسود | #000000 | |
| أزرق | أزرق | # 0000FF | |
| ضارب الى الحمرة | ضوء ارجواني | # FF00FF | |
| رمادي | رمادي غامق | #808080 | |
| لون أخضر | أخضر | #008000 | |
| جير | اخضر فاتح | # 00FF00 | |
| كستنائي | احمر غامق | #800000 | |
| القوات البحرية | أزرق غامق | #000080 | |
| زيتون | زيتون | #808000 | |
| ليلكي | الأرجواني الداكن | #800080 | |
| أحمر | أحمر | # FF0000 | |
| فضة | رمادي فاتح | # C0C0C0 | |
| بط نهري صغير | أزرق أخضر | #008080 | |
| أبيض | أبيض | #FFFFFF | |
| الأصفر | الأصفر | # FFFF00 |
لا يهم كيف تحدد اللون - باسمه أو باستخدام الأرقام السداسية العشرية. في تأثيرها ، هذه الأساليب متساوية. يوضح المثال 6-1 كيفية تعيين ألوان الخلفية والنص لصفحة الويب.
مثال 6.1. لون الخلفية والنص
نص بسيط
في هذا المثال ، يتم تعيين لون الخلفية باستخدام سمة bgcolor للعلامة
ولون النص من خلال سمة النص. للتنوع ، يتم تعيين قيمة سمة النص إلى رقم سداسي عشري ، ويتم تعيين bgcolor على الكلمة الأساسية المحجوزة البط البري.تستخدم رموز الألوان في CSS لتحديد الألوان. عادةً ما يتم استخدام رموز الألوان أو قيم الألوان لتعيين لون لمقدمة عنصر (على سبيل المثال ، نص ، لون الارتباط) أو خلفية العنصر (الخلفية ، لون الكتلة). يمكن استخدامها أيضًا لتغيير لون الزر ، والحدود ، وعلامة التحويم ، والتأثيرات الزخرفية الأخرى.
يمكنك ضبط قيم الألوان الخاصة بك بتنسيقات مختلفة. يسرد الجدول التالي جميع التنسيقات الممكنة:
هذه التنسيقات موصوفة بمزيد من التفصيل أدناه.
ألوان CSS - رموز سداسية عشرية
رمز اللون السداسي عشريهو تمثيل لوني مكون من ستة أرقام. أول رقمين (RR) هما القيمة الحمراء ، والرقمان التاليان هما القيمة الخضراء (GG) والآخران هما القيمة الزرقاء (BB).
ألوان CSS - رموز سداسية عشرية قصيرة
رمز لوني قصير سداسي عشريهو شكل أقصر من تدوين ستة أحرف. في هذا التنسيق ، يتم تكرار كل رقم لإنتاج قيمة اللون المكافئة المكونة من ستة أرقام. على سبيل المثال: # 0F0 يصبح # 00FF00.
يمكن الحصول على القيمة السداسية العشرية من أي برنامج رسومات مثل Adobe Photoshop و Core Draw وما إلى ذلك.
سيُسبق كل رمز لون سداسي عشري في CSS بعلامة تجزئة "#". فيما يلي أمثلة على استخدام التدوين السداسي العشري.
ألوان CSS - قيم RGB
قيمة RGBهو رمز لوني يتم تعيينه باستخدام خاصية rgb (). تأخذ هذه الخاصية ثلاث قيم: واحدة لكل من الأحمر والأخضر والأزرق. يمكن أن تكون القيمة عددًا صحيحًا ، من 0 إلى 255 ، أو نسبة مئوية.
ملحوظة:لا تدعم جميع المتصفحات خاصية اللون rgb () ، لذلك لا يوصى باستخدامها.
يوجد أدناه مثال يوضح ألوانًا متعددة باستخدام قيم RGB.
مولد رمز اللون
يمكنك إنشاء الملايين من رموز الألوان من خلال خدمتنا.
ألوان المتصفح الآمن
يوجد أدناه جدول من 216 لونًا هي الأكثر أمانًا واستقلالية عن الكمبيوتر. تتراوح هذه الألوان في CSS من 000000 إلى الكود السداسي FFFFFF. وهي آمنة للاستخدام لأنها تضمن أن جميع أجهزة الكمبيوتر ستعرض الألوان بشكل صحيح عند العمل باستخدام لوحة ألوان 256.
| جدول الألوان "الآمنة" في CSS | |||||
| #000000 | #000033 | #000066 | #000099 | # 0000CC | # 0000FF |
| #003300 | #003333 | #003366 | #003399 | # 0033CC | # 0033FF |
| #006600 | #006633 | #006666 | #006699 | # 0066CC | # 0066FF |
| #009900 | #009933 | #009966 | #009999 | # 0099CC | # 0099FF |
| # 00CC00 | # 00CC33 | # 00CC66 | # 00CC99 | # 00CCCC | # 00CCFF |
| # 00FF00 | # 00FF33 | # 00FF66 | # 00FF99 | # 00FFCC | # 00FFFF |
| #330000 | #330033 | #330066 | #330099 | # 3300CC | # 3300FF |
| #333300 | #333333 | #333366 | #333399 | # 3333CC | # 3333FF |
| #336600 | #336633 | #336666 | #336699 | # 3366CC | # 3366FF |
| #339900 | #339933 | #339966 | #339999 | # 3399CC | # 3399FF |
| # 33CC00 | # 33CC33 | # 33CC66 | # 33CC99 | # 33CCCC | # 33CCFF |
| # 33FF00 | # 33FF33 | # 33FF66 | # 33FF99 | # 33FFCC | # 33FFFF |
| #660000 | #660033 | #660066 | #660099 | # 6600CC | # 6600FF |
| #663300 | #663333 | #663366 | #663399 | # 6633CC | # 6633FF |
| #666600 | #666633 | #666666 | #666699 | # 6666CC | # 6666FF |
| #669900 | #669933 | #669966 | #669999 | # 6699CC | # 6699FF |
| # 66CC00 | # 66CC33 | # 66CC66 | # 66CC99 | # 66CCCC | # 66CCFF |
| # 66FF00 | # 66FF33 | # 66FF66 | # 66FF99 | # 66FFCC | # 66FFFF |
| #990000 | #990033 | #990066 | #990099 | # 9900CC | # 9900FF |
| #993300 | #993333 | #993366 | #993399 | # 9933CC | # 9933FF |
| #996600 | #996633 | #996666 | #996699 | # 9966CC | # 9966FF |
| #999900 | #999933 | #999966 | #999999 | # 9999CC | # 9999FF |
| # 99CC00 | # 99CC33 | # 99CC66 | # 99CC99 | # 99CCCC | # 99CCFF |
| # 99FF00 | # 99FF33 | # 99FF66 | # 99FF99 | # 99FFCC | # 99FFFF |
| # CC0000 | # CC0033 | # CC0066 | # CC0099 | # CC00CC | # CC00FF |
| # CC3300 | # CC3333 | # CC3366 | # CC3399 | # CC33CC | # CC33FF |
| # CC6600 | # CC6633 | # CC6666 | # CC6699 | # CC66CC | # CC66FF |
| # CC9900 | # CC9933 | # CC9966 | # CC9999 | # CC99CC | # CC99FF |
| # CCCC00 | # CCCC33 | # CCCC66 | # CCCC99 | #CCCCCC | #CCCCFF |
| # CCFF00 | # CCFF33 | # CCFF66 | # CCFF99 | #CCFFCC | #CCFFFF |
| # FF0000 | # FF0033 | # FF0066 | # FF0099 | # FF00CC | # FF00FF |
| # FF3300 | # FF3333 | # FF3366 | # FF3399 | # FF33CC | # FF33FF |
| # FF6600 | # FF6633 | # FF6666 | # FF6699 | # FF66CC | # FF66FF |
| # FF9900 | # FF9933 | # FF9966 | # FF9999 | # FF99CC | # FF99FF |
| # FFCC00 | # FFCC33 | # FFCC66 | # FFCC99 | #FFCCCC | #FFCCFF |
| # FFFF00 | # FFFF33 | # FFFF66 | # FFFF99 | #FFFFCC | #FFFFFF |