ألوان الويب
ألوان الويب هي ألوان مستخدمة في تصميم صفحات الويب، وهي طرق لوصف وتحديد تلك الألوان.[1][2]
ولدى مصمّمي صفحات الويب مجموعة متنوعة من الخيارات المتاحة لتحديد ألوان عناصر الوثائق على شبكة الإنترنت. ويمكن تحديد الألوان بثلاثية ح خ ز (بالإنجليزية: RGB) بشكلها الستة عشري (بالإنجليزية: Hexadecimal)، كما أنّها قد تكون محدّدة وفقا لأسمائها الإنجليزيّة المعروفة في بعض الحالات. وغالبا ما تستخدم أداة الألوان (بالإنجليزية: color tool) أو برامج الرّسوميّات لتوليد قيم اللّون.
لقد استخدمت الإصدارات الأولى من برنامج موزايك ومستكشف نتسكيب أسماء الألوان إكس 11 كأساس لقوائم اللون الخاصّة بها، وفهي بدأت كتطبيقات في نظام النوفذة س.[3]
ولألوان الويب تعريفا لونيّا واضحا، وهي الفضاء اللّوني المعياري ح خ ز، الّتي تربط لونيّات إعدادات الفوسفورات، ومنحني التحويل المحدّد، والنقطة البيضاء، وظروف الرؤية.[4] وقد اختيرت هذه المتغيّرات لتكون مشابهة للعديد من شاشات العرض القريبة مما نراه في العالم الحقيقي وظروف الرؤية، وبذلك تكون قريبة من القيم المحددة بدون حتى إدارة الألوان. ومع ذلك، وكلاء المستخدم (بالإنجليزية: user agents) يتفاوتون في دقّة تمثيل الألوان المحددّة. بعض وكلاء المستخدم المتطوّرون يستخدمون إدارة الألوان لتوفير أفضل الألوان، وهذا مهم بشكل خاص لشبكة الإنترنت في تطبيقات الطباعة.
الهيكس الثلاثي
الهيكس الثلاثي (بالإنجليزية: Hex triplet) مكون من ستّ خانات، في كل خانه عدد ستّ عشريّ مكوّن من ثلاثة بايت (بالإنجليزية: byte) وتستخدم في الإتش تي إم إل (بالإنجليزية: HTML) و السي إس إس(بالإنجليزية: CSS) وإس في جي (بالإنجليزية: SVG)، وغيرها من تطبيقات الحوسبة، لتمثيل الألوان.
البايت يمثّل المكوّنات الحمراء والخضراء والزرقاء للون. والبايت الواحد يمثل رقم في نطاق 00 إلى FF (في التدوين الستّ عشري)، أو من 0 إلى 255 بالتدوين العشري.
وهذا يمثل على الأقل من (0) إلى (255) كثافة كل عنصر من عناصر اللون.
ان الهيكس الثلاثي يتشكل بواسطة سلسله من ثلاثه بايت في تدوين ست عشري، وفقا للترتيب التالي:
- البايت 1 : قيمة الأحمر (نوع اللون الأحمر)
- البايت 2 : قيمة خضراء (نوع اللون الأخضر)
- البايت 3 : قيمة زرقاء (نوع اللون الأزرق)
- البايت 2 : قيمة خضراء (نوع اللون الأخضر)
على سبيل المثال، حيث قيم الألوان الأحمر / الأخضر / الأزرق هي الأرقام العشرية: أحمر == 36، 104 = الأخضر، الأزرق == 160 (رمادي أزرق اللون).
الأرقام العشرية 36 و 104 و 160 هي معادلة لأرقام ست عشرية 24 و 68 و A0 على التوالي. يتم تمثيل الهيكس الثلاثي بواسطة سلسلة من 6 أرقام ست عشرية معا، كما في هذا المثال 2468A0.
علما أنه إذا كانت قيمه أيا من الثلاث قيم أقل من 16 (عشري) أو 10 (ستعشري)، يجب أن يسبق الرقم بصفر حتى يكون دائما مكون من ست أرقام. على سبيل المثال، الثلاثي العشري 4 و 8 و 16 يمثل بالستعشري 04، 08، 10، ويتشكل الهيكس الثلاثي هكذا 040810.
عدد الألوان التي يمكن أن يمثلها هذا النظام:
ان توسيع النموذج إلى تمثيل الستة أرقام يعتبر بسيطا.فكل رقم يضاعف: حيث 09C يصبح 0099CC. وهذا يسمح لكل قيمة لون تغطية مجموعتها الكاملة من 00 إلى FF. وتمثيل الرقم الثلاثي موضح في مواصفات السي اس اس CSS، وليس في الاتش تي ام ال HTML. نتيجة لذلك هو غير صالح في بعض المتصفحات. {1[بحاجة لمصدر]
تحويل ح خ ز إلى الست عشري
قيم ح خ ز عادة في نطاق ما بين 0-255 ؛ اما إذا كانوا في نطاق 0-1، فالقيم مضروبة في 255 قبل التحويل. عندما نقسم العدد بالعدد 16 (قسمة عدد صحيح؛ تجاهل المتبقي) يعطينا أول عدد ست عشري (بين 0 ووF، حيث الحروف A إلىF تمثل الأرقام من 10 ال 15. انظر الستعشري hexadecimal لمزيد من التفاصيل). والباقي يعطينا ثاني رقم ستعشري.
على سبيل المثال قيمة العددRGB= 201 نقسم العدد 201 على 16 يعطينا 12، وبالتالي فإن الرقم الأول هو C. والمتبقيي 9 هو الرقم الثاني فالنتيجة الرقم الست عشري C9. وتتكرر هذه العملية لكل واحد من قيم اللون الثلاثة.
ان معظم أنظمة التشغيل الحديثة مدمج فيها آلة حاسبة لتنفيذ تحويلات بين قواعد العدد ويمكن أيضا القيام بهذه العمليات بواسطة آلات الحاسبة اليدوية. ويمكن أن تكون هذه المهمة نفذت باستخدام موارد الشبكة المختلفة. [6]
أسماء ألوان الاتش تي ام ال HTML
تقوم مواصفات أتش تي أم أل 4.01 بتعريف ستة عشر لونا مسمياً، كما يلي: (أسماءهذه الألوان مرتبة أبجديا كم أنها لا تتأثر بحالة الأحرف الكبيرة والصغيرة (case-insensitive):
| اللون | الستة عشري | اللون | الستة عشري | اللون | الستة عشري | اللون | الستة عشري |
|---|---|---|---|---|---|---|---|
| أزرق مائي | #00FFFF | رمادي | #808080 | كحلي | #000080 | فضي | #C0C0C0 |
| أسود[؟] | #000000 | أخضر | #008000 | زيتوني | #808000 | شرشيري | #008080 |
| أزرق | #0000FF | ليمي (لون) | #00FF00 | أرجواني | #800080 | أبيض | #FFFFFF |
| فوشي | #FF00FF | ماروني | #800000 | أحمر | #FF0000 | أصفر | #FFFF00 |
هذه الستة عشرة لونا وصفت بأنها اس ار بي جي sRBG ووهي مدرجه في مواصفات اتش تي ام ال HTML 3.0، وملاحظ انها " الوان لوح ويندز في جي أي VGA القياسية [8]
أسماء ألوان إكس 11 X11
بالإضافة إلى ذلك فإن عددا من الألوان يتم تعريفها بواسطة متصفحات الويب. بعض المتصفحات قد لا تتعرف على كل من هذه الألوان، ولكن بصفه عامه اعتبارا من عام 2005 جميع المتصفحات الحديثة تدعم القائمة الكاملة. العديد من هذه الألوان هي من قائمة أسماء ألوان X11وهي موزعه مع نظام X Window. هذه الألوان هي قياسيه بالنسبة اس في جيSVG 1.0، ومقبولة من قبل وكلاء مستخدمي اس في جي{1}SVG الكامل{/1}. وأنها ليست جزءا من SVG Tiny.
و لغه نت فريم وركNET Framework{/0.} تستخدم نفس الأسماء تقريبا، في KnownColor وترقيم الألوان. والفرق الوحيد هو لون الأخضر البحري الغامق الذي يعرف بأنه 8F، BC، 8B (بدلا من 8F، BC، 8F).
قائمة الألوان مدمجه مع منتج اكس ون ون X11 الذي يتفاوت بين التنفيذ، والذي يتشابك مع بعض أسماءHTMLا مثل اللون الأخضر. وعلاوة على ذلك، فإن ألوان الاكس ون ون X11 تعرف بأنها اس ار بي جي RGB البسيطة (لا سيما لون الفضاء)، بدلا من sRGB. وهذا يعني أن قائمة من الألوان التي توجد في X11 (مثلا في / usr/lib/X11/rgb.txt) لا ينبغي أن تستخدم بشكل مباشر في اختيار الألوان لشبكة الإنترنت. [9]
وهذه RGB هي (Red_Green_Blue).
قائمة «ألوان X11» على شبكة الإنترنت هي من مواصفات CSS3، جنبا إلى جنب مع نظرائها العشرية والستعشرية، في الجدول المبين أدناه، قارن قوائم الأبجدي في معايير W3C. علما بأن هذا يشمل المترادفات الشائعة: أكوا (HTML4/CSS 1.0 اسم قياسي) وسماوي (الاسم الشائع sRGB)، قرمزي (الاسم الشائع sRGB) وف (HTML4/CSS 1.0 اسم قياسي) والرمادي (HTML4/CSS 1.0 اسم القياسية والرمادية. [5][6]
|
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ألوان شبكة الإنترنت الآمنة
| عمق لوني |
|---|
|
لون 8-بت |
| مواضيع متعلقة |
مجموعة أخرى مكونه من 216 قيم اللون شائع انها الوان الويب «الآمنة» لوحة الألوان، وضعت في وقت كان فيه العديد من شاشات الحاسوب فقط قادرة على عرض 256 لون وهناك مجموعة من الألوان التي بحاجة إلى أن تظهر من دون التردد على 256 -عروض اللون؛ والرقم 216 قد تم اختياره ويرجع ذلك ان أنظمة تشغيل الكمبيوتر عادة تحفظ ستة عشر إلى عشرين لونا لاستعمالهم الخاص، أيضا تم اختياره لأنه يسمح بستة ظلال للون الأحمر والأخضر والأزرق (6 × 6 × 6 = 216).
قائمة الألوان غالبا ما تعرض وكأن لديها خصائص خاصة الأمر الذي يجعلها في مأمن من التردد. في الواقع، على 256 لونا ان تعرض تطبيقات يمكن أن تحدد لوحة من اختيارات الألوان التي يختارونها وقد تم اختيار هذه الألوان على وجه التحديد لأنها مطابقة لوحات مختارة من قبل المتصفح ثم التطبيقات الرائدة لحسن الحظ، لم تكن هناك اختلافا جذريا في استخدام لوحات في المتصفحات الشعبية مختلفة.
«ألوان الويب» آمنة كانت تعاني من عيب في ذلك، على أنظمة مثل نظام النافذة إكس حيث لوح الألوان هو مشترك بين التطبيقات، كثيرا ما كانت توزع من قبل المستعرضات مكعبات اللون صغيرة (5 × 5 × 5 أو 4 × 4 × 4) -- وهكذا، الوان «الشبكة الآمنة» ممكن ان ترتجف في هذه الأنظمة. وقد تم الحصول على نتائج أفضل من خلال تقديم صورة مع مجموعة أكبر من الألوان ويسمح للمتصفح أن يثبت قيمة لون الفراغ إذا لزم الأمر، بدلا من أن يعاني من فقدان جودة تكميم مزدوجة.
اعتبارا من عام 2007 [التحديث]، الحواسيب الشخصية عادة ما تكون على الأقل 16 بت اللون وعادة 24 بت (لون حقيقي). وحتى الأجهزة المحمولة تحتوي على الأقل 16 بت اللون، مدفوعا بإدراج الكاميرات في الهواتف المحمولة. استخدام الوان «الشبكة العالمية» الآمنة قد عفا عنه الزمن العملي، ولكن لا تزال قائمة في مجال الثقافة.
على نظام لوح شبكة الإنترنت الآمنة لا يزال مستمرا حيث اللوحة مريحه حيث العين البشرية يمكنها تمييز الألوان. وأدى استخدام ألوان الويب الآمنة في أنظمة مكافحة الخداع. [12]
الوان الويب الآمنة ليس لكل منها أسماء قياسية، ولكن كل منها يمكن أن تكون محددة من قبل الثلاثي RGB : كل عنصر (الأحمر والأخضر والأزرق) تأخذ واحدة من القيم الستة من الجدول التالي (من أصل 256 قيم ممكنه متاحة لكل جزْء كامل في 24 بت اللون).
| رَقْم | سِتَّ عَشَرِيّ | عُشْرِيّ |
|---|---|---|
| 0 | 00 | 0 |
| 3 | 33 | 51 |
| 6 | 66 | 102 |
| 9 | 99 | 153 |
| C أو (12) | CC | 204 |
| F أو (15) | FF | 255 |
ويبين الجدول التالي «ألوان» شبكة الإنترنت الآمنة، مما يؤكد ح - الألوان الآمنة الحقيقة. عدم وجود تصحيح غاما يعني أن الكثافات الستة المرجوة 0 ٪، 20 ٪، 40 ٪، 60 ٪، 80 ٪، و 100 ٪، كما يتم عرض 0 ٪، 2 ٪، 10 ٪، 28 ٪، 57 ٪، وبنسبة 100 ٪ على معيار {1}ويندوز{/1} 2.5 غاما إنبوب أشعة القطب السالب أو شاشات الكريستال السائل،2.5 CRT or LCD وتصبح الألوان داكنة جدا. (أحد أوجه القصور في لوحة شبكة الإنترنت الآمنة هو سوء اختيار ألوان الخلفية الخفيفة.) في كثير من الأحيان من الصعب التمييز بسبب شدة في نهاية منخفضة للمجموعة، وخاصة في أحلك اثنين،
جدول اللون Color table
في الجدول أدناه، لكل لون رمز مذكور مختزل لقيمة RGB، على سبيل المثال، رمز 609 أي ما يعادل رمز RGB 660099.
| Web-Safe Colors | *000* | 300 | 600 | 900 | C00 | *F00* |
| *003* | 303 | 603 | 903 | C03 | *F03* | |
| 006 | 306 | 606 | 906 | C06 | F06 | |
| 009 | 309 | 609 | 909 | C09 | F09 | |
| 00C | 30C | 60C | 90C | C0C | F0C | |
| *00F* | 30F | 60F | 90F | C0F | *F0F* | |
| 030 | 330 | 630 | 930 | C30 | F30 | |
| 033 | 333 | 633 | 933 | C33 | F33 | |
| 036 | 336 | 636 | 936 | C36 | F36 | |
| 039 | 339 | 639 | 939 | C39 | F39 | |
| 03C | 33C | 63C | 93C | C3C | F3C | |
| 03F | 33F | 63F | 93F | C3F | F3F | |
| 060 | 360 | 660 | 960 | C60 | F60 | |
| 063 | 363 | 663 | 963 | C63 | F63 | |
| 066 | 366 | 666 | 966 | C66 | F66 | |
| 069 | 369 | 669 | 969 | C69 | F69 | |
| 06C | 36C | 66C | 96C | C6C | F6C | |
| 06F | 36F | 66F | 96F | C6F | F6F | |
| 090 | 390 | 690 | 990 | C90 | F90 | |
| 093 | 393 | 693 | 993 | C93 | F93 | |
| 096 | 396 | 696 | 996 | C96 | F96 | |
| 099 | 399 | 699 | 999 | C99 | F99 | |
| 09C | 39C | 69C | 99C | C9C | F9C | |
| 09F | 39F | 69F | 99F | C9F | F9F | |
| 0C0 | 3C0 | 6C0 | 9C0 | CC0 | FC0 | |
| 0C3 | 3C3 | 6C3 | 9C3 | CC3 | FC3 | |
| 0C6 | 3C6 | 6C6 | 9C6 | CC6 | FC6 | |
| 0C9 | 3C9 | 6C9 | 9C9 | CC9 | FC9 | |
| 0CC | 3CC | 6CC | 9CC | CCC | FCC | |
| 0CF | 3CF | 6CF | 9CF | CC | FCF | |
| *0F0* | 3F0 | *6F0* | 9F0 | CF0 | *FF0* | |
| 0F3 | *3F3* | *6F3* | 9F3 | CF3 | *FF3* | |
| *0F6* | *3F6* | 6F6 | 9F6 | *CF6* | *FF6* | |
| 0F9 | 3F9 | 6F9 | 9F9 | CF9 | FF9 | |
| *0FC* | *3FC* | 6FC | 9FC | CFC | FFC | |
| *0FF* | *3FF* | *6FF* | 9FF | CFF | *FFF* |
الألوان الأكثر أمانا على شبكة الإنترنت Safest web colors
المصممين شجعوا على التمسك بهذه الـ 216 لونا آمنا«على شبكة الإنترنت» في مواقعهم على شبكة الإنترنت، ومع ذلك فإن عرض 8 بت اللون كان أكثر شيوعا عند لوحة 216 لون مما هي عليه الآن. ديفيد لين وهادلي شتيرن منذ ذلك الحين اكتشفو أن 22 فقط من 216 الألوان في لوحة شبكة الإنترنت الآمنة موثوق بها وتعرض دون تغيير على 16 بت، على شاشات الكمبيوتر. وأصبحت تسمى هذه ال 22 لونا باللوحة الآمنه، وتتكون أساسا من ظلال خضراء وصفراء، كما يمكن ملاحظتها في الجدول أعلاه. [13]
الوان السي اس اس css
CSS هي أوراق الأنماط المتتالية لغة تعرف على نفس العدد من ألوان الاتش تي ام ال HTML، وهي 16 لون المذكورة سابقا. بالإضافة إلى ذلك، CSS 2.1 يضيف |سم اللون 'البرتقالي' في لائحة:
| اللون | الستعشري |
|---|---|
| برتقالي | #FFA500 |
CSSو SVG وCSS 2.1 تسمح للكاتبين على شبكة الإنترنت باستخدام ما يسمى نظام الألوان، والتي هي عبارة عن أسماء الألوان والقيم تؤخذ من نظام التشغيل. يتيح هذا للكاتبين على شبكة الإنترنت لعرض المضمون وفقا لنظام التشغيل لوكيل المستخدم.
تطوير مواصفات CSS3 سيدخل لون فراغHSL القيم لأوراق الأنماط:
/* RGB model */
p { color: #F00 } /* #rgb */
p { color: #FF0000 } /* #rrggbb */
p { color: rgb(255,0,0) } /* integer range 0 - 255 */
p { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */
/* RGB with alpha channel, added to CSS3 */
p { color: rgba(255,0,0,0.5) } /* 0.5 opacity, semi-transparent */
/* HSL model, added to CSS3 */
p { color: hsl(0, 100%, 50%) } /* red */
p { color: hsl(120, 100%, 50%) } /* green */
p { color: hsl(120, 100%, 25%) } /* dark green */
p { color: hsl(120, 100%, 75%) } /* light green */
p { color: hsl(120, 50%, 50%) } /* pastel green */
/* HSL model with alpha channel */
p { color: hsla(120, 100%, 50%, 1) } /* green */
p { color: hsla(120, 100%, 50%, 0.5) } /* semi-transparent green */
p { color: hsla(120, 100%, 50%, 0.1) } /* very transparent green */
سهولة الدخول والوصول Accessibility
- بعض المتصفحات والأجهزة لا تدعم الألوان.
- بالنسبة للمستخدمين المكفوفين وعمى الألوان، يمكن أن محتوى الويب يعتمد على ألوان تكون غير صالحة للاستعمال أو يصعب استخدامها.
- خلط تركة ترميزية مثل bgcolor مع CSS الحديثة قد يحصل فشل لإرث المتصفحات التي لا تدعم CSS.
- وينبغي أن كل لون الأمامية والخلفية قابله للتعديل لتجنب الآثار السوداء على السوداء.
المتصفحات تظهر الروابط التشعبية كظلال زرقاء. ألوان الخلفية المظلمة، مثل الأزرق أو البحرية، لا تعرض بشكل جيد لمثل هذه الروابط. استخدام CSS لتعديل الألوان قد لا تعمل مع جميع المتصفحات. على سبيل المثال، نتسكيب 4.x يدعم CSS غالبا مايمنع لانه لا قيمه له. [عدل]
اقرأ أيضاً
المراجع
- ^ Web Design in a Nutshell By Jennifer Niederst Robbins. Page 103.
- ^ Beginning CSS By Richard York. Page 71-72.
- ^ Guide to Graphics[وصلة مكسورة]. SP LUS, splus.com. Page 13.
- ^ Digital Color Imaging Handbook By Gaurav Sharma. ISBN 0-8493-0900-X
- ^ W3C TR CSS3 Color Module, SVG color keywords نسخة محفوظة 30 سبتمبر 2017 على موقع واي باك مشين.
- ^ W3C TR SVG 1.0, recognized color keyword names نسخة محفوظة 09 مارس 2018 على موقع واي باك مشين.
وصلات خارجية
- 4,096 Web-Safe Colors
- CSS2.1 Color Specification
- Sortable Table of X11 Colors
- ألوان الويب على مشروع الدليل المفتوح
- X11/browser colors, with closest web-safe equivalents
