ألوان الويب

📅 آخر تحديث: ١ أغسطس ٢٠٢٦
✍️ نُشر في: ١ أغسطس ٢٠٢٦
📷 يحتوي على 3 صور
الموسوعة الحرة

ألوان الويب ، والمعروفة أيضًا برموز الألوان السداسية العشرية ، هي الألوان المستخدمة في عرض صفحات الويب على شبكة الإنترنت العالمية . يمكن وصفها بثلاث طرق: إما بتحديد اللون كثلاثية RGB ، أو بتنسيق سداسي عشري ( ثلاثية سداسية عشرية )، أو وفقًا لاسمه الشائع باللغة الإنجليزية في بعض الحالات. غالبًا ما تُستخدم أدوات الألوان أو برامج الرسومات الأخرى لإنشاء قيم الألوان. في بعض الاستخدامات، تُحدد رموز الألوان السداسية العشرية باستخدام علامة الرقم (#) في البداية. [ 1 ] [ 2 ] يُحدد اللون وفقًا لشدة مكوناته الأحمر والأخضر والأزرق، حيث يُمثل كل مكون بثمانية بتات . وبالتالي، يُستخدم 24 بتًا لتحديد لون الويب ضمن نطاق ألوان sRGB ، ويمكن تحديد 16,777,216 لونًا بهذه الطريقة. في النظام السداسي العشري، تُحدد هذه الألوان برقمين سداسيين عشريين لكل لون، ليصبح المجموع ستة أرقام سداسية عشرية. في بعض السياقات، من الممكن تحديد قيمتين مكانيتين إضافيتين، مما يوفر قناة للشفافية (ألفا) .

يمكن تحديد الألوان خارج نطاق sRGB في أوراق الأنماط المتتالية (CSS) بجعل واحد أو أكثر من مكونات الأحمر والأخضر والأزرق سالبًا أو أكبر من 100%، وبالتالي فإن مساحة اللون نظريًا هي امتداد غير محدود لـ sRGB مشابه لـ scRGB . [ 3 ] يتطلب تحديد لون غير sRGB بهذه الطريقة RGB()استدعاء دالة. هذا غير ممكن باستخدام الصيغة السداسية العشرية (وبالتالي غير ممكن في مستندات HTML القديمة التي لا تستخدم CSS ).

استخدمت الإصدارات الأولى من متصفحي Mosaic و Netscape Navigator أسماء ألوان X11 كأساس لقوائم الألوان الخاصة بهما، حيث بدأ كلاهما كتطبيقات لنظام X Window . تتميز ألوان الويب بتعريف لوني واضح، وهو sRGB ، الذي يربط بين خصائص الألوان لمجموعة فسفورية معينة ، ومنحنى نقل محدد، ونقطة بيضاء تكيفية، وظروف العرض. [ 4 ] وقد تم اختيار هذه الخصائص لتكون مشابهة للعديد من شاشات العرض وظروف العرض في العالم الحقيقي ، مما يسمح بعرض قريب جدًا من القيم المحددة حتى بدون إدارة الألوان . تختلف برامج المستخدم في دقة تمثيلها للألوان المحددة. تستخدم برامج المستخدم الأكثر تطورًا إدارة الألوان لتوفير دقة ألوان أفضل؛ وهذا أمر بالغ الأهمية لتطبيقات الطباعة من الويب .

ثلاثية سداسية

الثلاثية السداسية هي عدد سداسي عشري مكون من ستة (أو ثمانية) أرقام، وثلاثة ( أو أربعة) بايتات، يُستخدم في HTML و CSS و SVG وتطبيقات حاسوبية أخرى لتمثيل الألوان. تمثل البايتات مكونات اللون الأحمر والأخضر والأزرق. (يشير البايت الرابع الاختياري إلى قناة ألفا ). يمثل كل بايت رقمًا في النطاق من 00 إلى FF (بالنظام السداسي العشري)، أو من 0 إلى 255 (بالنظام العشري). وهذا يمثل أدنى (0) إلى أعلى (255) شدة لكل مكون من مكونات اللون. وبالتالي، تحدد ألوان الويب الألوان في نظام ألوان RGB ذي 24 بت . تتكون الثلاثية السداسية من خلال دمج ثلاثة بايتات بالنظام السداسي العشري، بالترتيب التالي:

  • البايت 1: قيمة اللون الأحمر (نوع اللون أحمر)
  • البايت 2: قيمة اللون الأخضر (نوع اللون الأخضر)
  • البايت 3: قيمة اللون الأزرق (نوع اللون أزرق)
  • البايت 4: قيمة ألفا (الشفافية، اختياري)

على سبيل المثال، لنفترض اللون الذي تمثل قيم الأحمر والأخضر والأزرق فيه أرقامًا عشرية: أحمر = 123، أخضر = 58، أزرق = 30 (لون بني يشبه لون الخشب الصلب). الأرقام العشرية 123 و58 و30 تعادل الأرقام السداسية عشرية 7B و3A و1E على التوالي. يتم الحصول على الثلاثية السداسية العشرية بدمج الأرقام السداسية العشرية الستة معًا، 7B3A1E في هذا المثال.

إذا كانت أي قيمة من قيم الألوان الثلاثة أقل من 10 بالنظام الست عشري (16 بالنظام العشري)، فيجب تمثيلها بصفر في البداية بحيث تتكون الثلاثية دائمًا من ستة أرقام بالضبط. على سبيل المثال، تُمثَّل الثلاثية العشرية 4، 8، 16 بالأرقام الست عشرية 04، 08، 10، لتُشكِّل الثلاثية الست عشرية 040810.

عدد الألوان التي يمكن تمثيلها بواسطة هذا النظام هو 256 3 ، 16 6 ، أو 2 24 = 16,777,216.

صيغة سداسية عشرية مختصرة

يمكن استخدام صيغة مختصرة مكونة من ثلاثة أرقام (سداسي عشري) أو أربعة أرقام، [ 5 ] ولكن قد يتسبب ذلك في حدوث أخطاء إذا كانت البرامج أو نصوص الصيانة تتوقع الصيغة الكاملة فقط. توسيع هذه الصيغة إلى الصيغة المكونة من ستة أرقام بسيط للغاية، إذ يكفي تكرار كل رقم: 09C تصبح 0099CC كما هو موضح في مثال CSS التالي :

.threedigit { color : #09C ; } .sixdigit { color : #0099CC ; } / * نفس اللون أعلاه * /

يُقلل هذا الشكل المختصر عدد الألوان إلى 4096 لونًا، أي ما يعادل 12 بتًا للألوان، مقارنةً بـ 24 بتًا للألوان باستخدام الشكل الكامل المكون من ستة أرقام (16,777,216 لونًا). هذا القيد كافٍ للعديد من المستندات النصية.

تحويل RGB إلى نظام العد الست عشري

تُعطى قيم RGB عادةً في النطاق من 0 إلى 255؛ إذا كانت في النطاق من 0 إلى 1، تُضرب القيم في 255 قبل التحويل. يُقسم هذا العدد على 16 (قسمة صحيحة، مع تجاهل الباقي) ليعطي الرقم الست عشري الأول (بين 0 وF، حيث تُمثل الأحرف من A إلى F الأرقام من 10 إلى 15. راجع قسم "النظام الست عشري" لمزيد من التفاصيل). يُعطي الباقي الرقم الست عشري الثاني. على سبيل المثال، قيمة RGB 58 (كما هو موضح في المثال السابق للثلاثيات الست عشرية) تُقسم إلى 3 مجموعات من 16، وبالتالي فإن الرقم الأول هو 3. والباقي 10 يُعطي الرقم الست عشري 3A. وبالمثل، قيمة RGB 201 تُقسم إلى 12 مجموعة من 16، وبالتالي فإن الرقم الأول هو C. والباقي 9 يُعطي الرقم الست عشري C9. تُكرر هذه العملية لكل قيمة من قيم الألوان الثلاثة.

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

أسماء ألوان HTML

مخطط يحتوي على جميع ألوان HTML الأساسية
مخطط يحتوي على جميع ألوان HTML الأساسية

تُفرّق مواصفات W3C الحديثة لأسماء الألوان بين الألوان الأساسية والألوان الموسّعة . [ 6 ] في لغتي HTML وXHTML، يمكن استخدام الألوان للنصوص والخلفيات وحدود الإطارات والجداول وخلايا الجداول الفردية. [ 7 ]

الألوان الأساسية

الألوان الأساسية هي 16 لونًا محددة في مواصفات HTML 4.01، التي تم التصديق عليها في عام 1999، [ 8 ] على النحو التالي (مع مراعاة حالة الأحرف):

أسماء ألوان CSS 1–2.0، وHTML 3.2–4، وVGA
اسمنظام الألوان السداسي (RGB)أحمر (RGB)أخضر (RGB)أزرق (RGB)اللون (HSL/HSV)السبت (HSL)الضوء (HSL)السبت (HSV)القيمة (HSV)رقم CGA (الاسم)؛ الاسم المستعار
أبيض#FFFFFF100%100%100%0 درجة0%100%0%100%15 (أبيض)
فضيC0C0C075%75%75%0 درجة0%75%0%75%07 (رمادي فاتح)
رمادي#80808050%50%50%0 درجة0%50%0%50%08 (  رمادي داكن)
أسودرقم 0000000%0%0%0 درجة0%0%0%0%00 (أسود)
أحمر#FF0000100%0%0%0 درجة100%50%100%100%12 (  أحمر مرتفع)
مارون٨٠٠٠٠٠50%0%0%0 درجة100%25%100%50%04 (أحمر منخفض)
أصفر#FFFF00100%100%0%60 درجة100%50%100%100%14 (أصفر)
زيتون٨٠٨٠٠٠50%50%0%60 درجة100%25%100%50%06 (بني)
ليمون#00FF000%100%0%120 درجة100%50%100%100%10 (  أخضر مرتفع)؛ أخضر
أخضررقم 0080000%50%0%120 درجة100%25%100%50%02 (  أخضر منخفض)
أكوا#00FFFF0%100%100%180 درجة100%50%100%100%11 (  أزرق سماوي عالي)؛ أزرق سماوي
اللون الأزرق المخضر#0080800%50%50%180 درجة100%25%100%50%03 (  أزرق سماوي منخفض)
أزرق#0000FF0%0%100%240 درجة100%50%100%100%09 (  أزرق عالي)
البحريةرقم 0000800%0%50%240 درجة100%25%100%50%01 (  أزرق منخفض)
ضارب الى الحمرة#FF00FF100%0%100%300 درجة100%50%100%100%13 (  أرجواني داكن)؛ أرجواني
أرجواني٨٠٠٠٨٠50%0%50%300 درجة100%25%100%50%05 (  لون أرجواني فاتح)

تم تصنيف هذه الألوان الستة عشر على أنها sRGB وتم تضمينها في مواصفات HTML 3.0، والتي أشارت إلى أنها "الألوان الستة عشر القياسية المدعومة بلوحة ألوان VGA الخاصة بنظام التشغيل Windows ". [ 9 ]

ألوان موسعة

إصدار SVG لأسماء ألوان X11
إصدار SVG لأسماء ألوان X11
ألوان SVG 1.1 المسماة برموز sRGB سداسية عشرية/عشرية ورموز HSL، بدقة UHD (4K).
ألوان SVG 1.1 المسماة برموز sRGB سداسية عشرية/عشرية ورموز HSL، بدقة UHD (4K).

الألوان الموسعة هي نتيجة دمج المواصفات من HTML 4.01 و CSS 2.0 و SVG 1.0 وواجهات مستخدم CSS3 (CSS3 UI). [ 6 ]

تُعرّف متصفحات الويب عدة ألوان . قد لا يتعرف متصفح معين على جميع هذه الألوان، ولكن اعتبارًا من عام ٢٠٠٥، تدعم جميع متصفحات الويب الرسومية الحديثة ذات الاستخدام العام قائمة الألوان الكاملة. العديد من هذه الألوان مأخوذة من قائمة أسماء ألوان X11 الموزعة مع نظام X Window . تم توحيد هذه الألوان بواسطة SVG 1.0 ، وهي مقبولة من قبل برامج SVG Full . وهي ليست جزءًا من SVG Tiny .

تختلف قائمة الألوان المرفقة مع منتج X11 بين التطبيقات، وتتعارض مع بعض أسماء الألوان في لغة HTML، مثل الأخضر. تُعرَّف ألوان X11 على أنها RGB بسيطة (أي بدون مساحة لونية محددة)، وليست sRGB . هذا يعني أنه لا ينبغي استخدام قائمة الألوان الموجودة في X11 (مثلاً، في /usr/lib/X11/rgb.txt) مباشرةً لاختيار ألوان الويب. [ 10 ]

تُعرض أدناه قائمة ألوان "X11" الخاصة بالويب من مواصفات CSS3، بالإضافة إلى ما يُقابلها من رموز سداسية عشرية وعشرية. قارن القوائم الأبجدية في معايير W3C. يتضمن ذلك المرادفات الشائعة: aqua (الاسم القياسي في HTML4/CSS 1.0) و cyan (الاسم الشائع في sRGB)، و fuchsia (الاسم القياسي في HTML4/CSS 1.0) و magenta (الاسم الشائع في sRGB)، و gray (الاسم القياسي في HTML4/CSS 1.0)، و grey. [ 11 ] [ 12 ]

اسم HTMLRGB
عرافةعشري
اللون الوردي
أحمر بنفسجي متوسطC71585199، 21، 133
ديب بينكFF1493255، 20، 147
أحمر بنفسجي باهتDB7093219، 112، 147
وردي فاقعFF69B4255، 105، 180
وردي فاتحFFB6C1255، 182، 193
لون القرنفلFFC0CB255، 192، 203
الألوان الحمراء
أحمر داكن8B0000139، 0، 0
أحمرFF0000255، 0، 0
الطوب الحراريB22222178، 34، 34
قرمزيDC143C220، 20، 60
إنديان ريدCD5C5C205، 92، 92
لايت كورالF08080240، 128، 128
سمك السلمونFA8072250، 128، 114
سلمون داكنE9967A233، 150، 122
سلمون فاتحFFA07A255، 160، 122
اللون البرتقالي
برتقالي محمرFF4500255، 69، 0
طماطمFF6347255، 99، 71
برتقالي داكنFF8C00255، 140، 0
المرجانFF7F50255، 127، 80
البرتقاليFFA500255، 165، 0
اللون الأصفر
كاكي داكنBDB76B189، 183، 107
ذهبFFD700255، 215، 0
كاكيF0E68C240، 230، 140
حبة الخوخFFDAB9255، 218، 185
أصفرFFFF00255، 255، 0
عصا ذهبية باهتةEEE8AA238، 232، 170
حذاء بدون كعبFFE4B5255، 228، 181
بابايا ويبFFEFD5255، 239، 213
أصفر ذهبي فاتحFAFAD2250، 250، 210
ليمون شيفونFFFACD255، 250، 205
أصفر فاتحFFFFE0255، 255، 224
الألوان البنية
مارون800000128، 0، 0
بنيA52A2A165، 42، 42
سادل براون8B4513139، 69، 19
سييناA0522D160، 82، 45
الشوكولاتةD2691E210، 105، 30
عصا الذهب الداكنةB8860B184، 134، 11
بيروCD853F205، 133، 63
روزي براونBC8F8F188، 143، 143
عصا الذهبDAA520218، 165، 32
ساندي براونF4A460244، 164، 96
تانD2B48C210، 180، 140
بورليوودDEB887222، 184، 135
قمحF5DEB3245، 222، 179
نافاجو وايتميت255، 222، 173
حساء دسمFFE4C4255، 228، 196
لوز مقشورFFEBCD255، 235، 205
حرير الذرةFFF8DC255، 248، 220
اسم HTMLRGB
عرافةعشري
ألوان أرجوانية، بنفسجية، وأرجوانية داكنة
النيلي4B008275، 0، 130
أرجواني800080128، 0، 128
دارك ماجنتا8B008B139، 0، 139
البنفسجي الداكن9400D3148، 0، 211
أزرق داكن483D8B72، 61، 139
أزرق بنفسجي8A2BE2138، 43، 226
دارك أوركيد9932 سم مكعب153، 50، 204
ضارب الى الحمرةFF00FF255، 0، 255
أرجوانيFF00FF255، 0، 255
رمادي أزرق6A5ACD106، 90، 205
أزرق رمادي متوسط7B68EE123، 104، 238
زهرة الأوركيد المتوسطةBA55D3186، 85، 211
بنفسجي متوسط9370DB147، 112، 219
زهرة الأوركيدDA70D6218، 112، 214
بنفسجيEE82EE238، 130، 238
البرقوقDDA0DD221، 160، 221
الشوكD8BFD8216، 191، 216
الخزامىE6E6FA230، 230، 250
اللون الأزرق
أزرق منتصف الليل19197025، 25، 112
البحرية0000800، 0، 128
أزرق داكن00008B0، 0، 139
أزرق متوسط0000CD0، 0، 205
أزرق0000FF0، 0، 255
رويال بلو4169E165، 105، 225
ستيل بلو4682B470، 130، 180
دودجر بلو1E90FF30، 144، 255
ديب سكاي بلو00BFFF0، 191، 255
أزرق زهرة الذرة6495ED100، 149، 237
سماء زرقاء87CEEB135، 206، 235
أزرق سماوي فاتح87CEFA135، 206، 250
أزرق فولاذي فاتحB0C4DE176، 196، 222
أزرق فاتحADD8E6173، 216، 230
أزرق بودرةB0E0E6176، 224، 230
ألوان سماوية
اللون الأزرق المخضر0080800، 128، 128
دارك سيان008B8B0، 139، 139
أخضر فاتح بحري20B2AA32، 178، 170
كاديت بلو5F9EA095، 158، 160
فيروزي داكن00CED10، 206، 209
فيروزي متوسط48D1CC72، 209، 204
الفيروزي40E0D064، 224، 208
أكوا00FFFF0، 255، 255
سماوي00FFFF0، 255، 255
زبرجد7FFFD4127، 255، 212
فيروزي فاتحأفيييي175، 238، 238
أزرق فاتحE0FFFF224، 255، 255
اسم HTMLRGB
عرافةعشري
الألوان الخضراء
أخضر داكن٠٠٦٤٠٠0، 100، 0
أخضر0080000، 128، 0
أخضر زيتوني داكن556B2F85، 107، 47
أخضر غابي228B2234، 139، 34
سي جرين2E8B5746، 139، 87
زيتون808000128، 128، 0
زيتوني داكن6B8E23107، 142، 35
أخضر بحري متوسط3CB37160، 179، 113
أخضر ليموني32CD3250، 205، 50
ليمون00FF000، 255، 0
أخضر ربيعي00FF7F0، 255، 127
أخضر ربيعي متوسط00FA9A0، 250، 154
أخضر بحري داكن8FBC8F143، 188، 143
أكوامارين متوسط66CDAA102، 205، 170
أصفر مخضر9ACD32154، 205، 50
لون جرين7CFC00124، 252، 0
أخضر مصفر7FFF00127، 255، 0
أخضر فاتح90EE90144، 238، 144
أخضر مصفرADFF2F173، 255، 47
أخضر فاتح98FB98152، 251، 152
اللون الأبيض
ميستي روزFFE4E1255، 228، 225
أبيض عتيقFAEBD7250، 235، 215
الكتانFAF0E6250، 240، 230
البيجF5F5DC245، 245، 220
وايت سموكF5F5F5245، 245، 245
لافندر بلاشFFF0F5255، 240، 245
أولد ليسFDF5E6253، 245، 230
أليس بلوF0F8FF240، 248، 255
صدفFFF5EE255، 245، 238
أبيض شبحيF8F8FF248، 248، 255
المنF0FFF0240، 255، 240
أبيض زهريFFFAF0255، 250، 240
أزرق سماويF0FFFF240، 255، 255
كريمة النعناعF5FFFA245، 255، 250
الثلجFFFAFA255، 250، 250
عاجيFFFFF0255، 255، 240
أبيضFFFFFF255، 255، 255
اللونان الرمادي والأسود
أسود٠٠٠٠٠٠0, 0, 0
رمادي داكن2F4F4F47، 79، 79
ديمغراي696969105، 105، 105
رمادي داكن708090112، 128، 144
رمادي808080128، 128، 128
رمادي فاتح778899119، 136، 153
رمادي داكنA9A9A9169، 169، 169
فضيC0C0C0192، 192، 192
رمادي فاتحD3D3D3211، 211، 211
غينزبوروDCDCDC220، 220، 220

ألوان CSS

تُحدد مواصفات أوراق الأنماط المتتالية (CSS) نفس عدد الألوان المُسماة الموجودة في مواصفات HTML 4، وهي ألوان HTML الستة عشر، بالإضافة إلى 124 لونًا من قائمة ألوان Netscape X11 ، ليصبح المجموع 140 اسمًا تم التعرف عليها بواسطة Internet Explorer (IE) 3.0 وNetscape Navigator 3.0. [ 13 ] ويشير موقع Blooberry.com إلى أن Opera 2.1 وSafari 1 تضمنتا أيضًا قائمة Netscape الموسعة التي تضم 140 اسمًا للألوان، ولكنهما اكتشفا لاحقًا 14 اسمًا لم تكن موجودة في Opera 3.5 على نظام Windows 98. [ 14 ]

في CSS 2.1، أُضيف اللون البرتقالي (أحد الألوان الـ 140) إلى قسم ألوان HTML4 الستة عشر، ليصبح اللون السابع عشر. [ 15 ] لم تتضمن مواصفات CSS 3.0 اللون البرتقالي في قسم "كلمات ألوان HTML4 الرئيسية"، الذي أُعيدت تسميته إلى "كلمات الألوان الأساسية". [ 16 ] في المرجع نفسه، أُعيدت تسمية قسم "كلمات ألوان SVG الرئيسية" إلى "كلمات الألوان الموسعة"، بعد أن كان يُعرف سابقًا باسم "كلمات ألوان X11 الرئيسية" في مسودة عمل سابقة. [ 17 ] تجمع مسودة العمل لوحدة الألوان من المستوى الرابع قسمي "الأساسي" و"الموسع" في قسم واحد بسيط بعنوان "الألوان المسماة". [ 18 ]

تمت إضافة اللون في CSS 2.1
اسمنظام الألوان السداسي (RGB)أحمر (RGB)أخضر (RGB)أزرق (RGB)اللون (HSL/HSV)السبت (HSL)الضوء (HSL)السبت (HSV)القيمة (HSV)
البرتقالي#FFA500100%65%0%39 درجة100%50%100%100%

تسمح CSS 2 و SVG وCSS 2.1 لمطوري المواقع الإلكترونية باستخدام ألوان النظام ، وهي أسماء ألوان تُستمد قيمها من نظام التشغيل ، وذلك باختيار لون النص المميز في نظام التشغيل، أو لون خلفية عناصر التحكم في التلميحات. يُمكّن هذا مطوري المواقع من تنسيق محتواهم بما يتوافق مع نظام تشغيل متصفح المستخدم. [ 19 ] وقد أوقفت وحدة ألوان CSS3 استخدام ألوان النظام لصالح خاصية مظهر نظام واجهة المستخدم في CSS3، [ 20 ] [ 21 ] والتي تم حذفها لاحقًا من CSS3. [ 22 ]

مثال على كلمات مفتاحية لألوان النظام
مظهرالكلمة المفتاحية
نص الرابط
نص تمت زيارته
النص النشط
تسليط الضوء
علامة

كما يقدم معيار CSS3 قيم مساحة ألوان HSL إلى أوراق الأنماط: [ 23 ]

/* نموذج RGB */ p { color : #F00 } /* #rgb */ p { color : #FF0000 } /* #rrggbb */ p { color : rgb ( 255 , 0 , 0 ) } /* نطاق الأعداد الصحيحة 0 - 255 */ p { color : rgb ( 100 % , 0 % , 0 % ) } /* نطاق الأعداد العشرية 0.0% - 100.0% *//* RGB مع قناة ألفا، تمت إضافتها إلى CSS3 */ p { color : rgba ( 255 , 0 , 0 , 0.5 ) } /* شفافية 50%، شبه شفاف *//* نموذج HSL، تمت إضافته إلى CSS3 */ p { color : hsl ( 0 , 100 % , 50 % ) } /* أحمر */ p { color : hsl ( 120 , 100 % , 50 % ) } /* أخضر */ p { color : hsl ( 120 , 100 % , 25 % ) } /* أخضر داكن */ p { color : hsl ( 120 , 100 % , 75 % ) } /* أخضر فاتح */ p { color : hsl ( 120 , 50 % , 50 % ) } /* أخضر فاتح *//* نموذج HSL مع قناة ألفا */ p { color : hsla ( 120 , 100 % , 50 % , 1 ) } /* أخضر */ p { color : hsla ( 120 , 100 % , 50 % , 0.5 ) } /* أخضر شبه شفاف */ p { color : hsla ( 120 , 100 % , 50 % , 0.1 ) } /* أخضر شفاف للغاية */

يدعم CSS أيضًا اللون الخاص transparent، الذي يمثل قيمة ألفا تساوي صفرًا؛ transparentويتم عرضه افتراضيًا كلون أسود غير مرئي rgba(0, 0, 0, 0). وقد تم تقديمه في CSS1، ولكن نطاق استخدامه قد توسع عبر الإصدارات. [ 23 ]

لون CSS 4

أدخل المستوى الرابع من مواصفات ألوان CSS العديد من تنسيقات ألوان CSS الجديدة. [ 24 ]

إلى جانب الطرق الجديدة لكتابة الألوان، يقدم هذا الكتاب مفهوم مزج الألوان في فضاء لوني غير sRGB ، وهي خطوة أولى نحو حل مشكلة معروفة في تدرجات الألوان . كما أُضيفت بعض الأقسام التي تشرح نظرية الألوان والعمليات الشائعة مثل تعيين نطاق الألوان لتسهيل التطبيق. [ 24 ]

p { color : #F80A } /* #rgba */ p { color : #FF8800 AA } /* #rrggbbaa */ p { color : rgb ( 255.0 136.0 0.0 / 0.667 ) } /* نطاق الأعداد العشرية من 0.0 إلى 255.0 لدقة أعلى من 8 بت */ p { color : rgb ( 100 % 53.3 % 0 % / 66.7 % ) } /* نطاق الأعداد العشرية من 0.0% إلى 100.0% */ p { color : color ( sRGB 1 0.533 0 / 0.667 ) } /* دالة color() مع مساحة اللون */

لون مستقل عن الجهاز

يقدم CSS Color 4 العديد من التنسيقات المختلفة للألوان المستقلة عن الجهاز والتي يمكنها عرض كامل الألوان المرئية (على شاشة قادرة على ذلك)، بما في ذلك: [ 25 ]

مساحات لونية محددة مسبقًا

كما تم إدخال عدد من مساحات RGB ذات نطاقات ألوان أوسع من sRGBcolor() من خلال الوظيفة الجديدة: [ 25 ]

كما تم تعريف صيغة خطية من sRGB لمزج الألوان. [ 24 ]

صيغ أخرى

في 21 يونيو 2014، أضافت مجموعة عمل CSS اللون RebeccaPurple إلى مسودة المحرر لمستوى 4 من وحدة الألوان، وذلك لإحياء ذكرى ريبيكا، ابنة إريك ماير ، التي توفيت في 7 يونيو 2014، في عيد ميلادها السادس. [ 26 ]

تمت إضافة اللون في وحدة ألوان CSS4
اسمنظام الألوان السداسي (RGB)أحمر (RGB)أخضر (RGB)أزرق (RGB)اللون (HSL/HSV)السبت (HSL)الضوء (HSL)السبت (HSV)القيمة (HSV)
ريبيكا بيربل66339940%20%60%270 درجة50%40%67%60%

كما يقدم CSS4 نموذج ألوان HWB كبديل لـ HSL/HSV. [ 18 ]

لون CSS 5

يقدم مسودة مواصفات CSS Color 5 [ 27 ] صيغة لخلط الألوان الموجودة ومعالجتها، بما في ذلك:

  • وظيفة color-mix()لخلط الألوان
  • صيغة الألوان النسبية لمعالجة مكونات لون موجود

كما يتم دعم مساحات الألوان المخصصة عبر ملفات تعريف ICC . وهذا يسمح باستخدام CMYK على صفحات الويب. [ 27 ]

ألوان آمنة للاستخدام على الإنترنت

في منتصف التسعينيات، كانت العديد من الشاشات قادرة فقط على عرض 256 لونًا، [ 28 ] وهو عدد تحدده مواصفات الجهاز أو يمكن تغييره عبر "جدول الألوان". وعندما يُعثر على لون غير متوفر (مثلاً في صورة)، كان لا بد من استخدام لون آخر. وكان ذلك يتم إما باستخدام أقرب لون أو باستخدام تقنية التمويه اللوني .

كانت هناك محاولات عديدة لإنشاء لوحة ألوان "قياسية". كانت هناك حاجة إلى مجموعة من الألوان التي يمكن عرضها دون تشويش على شاشات عرض ذات 256 لونًا؛ تم اختيار الرقم 216 جزئيًا لأن أنظمة تشغيل الكمبيوتر عادةً ما تحتفظ بستة عشر إلى عشرين لونًا لاستخدامها الخاص؛ كما تم اختياره لأنه يسمح بست درجات متساوية التباعد من الأحمر والأخضر والأزرق (6 × 6 × 6 = 216)، كل منها من 00 إلى FF (بما في ذلك كلا الحدين).

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

كانت ألوان "الويب الآمنة" تعاني من عيب يتمثل في أنه على أنظمة مثل X11 ، حيث تتشارك التطبيقات لوحة الألوان، كانت المتصفحات تخصص مكعبات ألوان أصغر (5×5×5 أو 4×4×4)، مما كان يؤدي إلى ظهور تدرج لوني في هذه الألوان. وقد تم الحصول على نتائج مختلفة بتوفير صورة ذات نطاق ألوان أوسع، والسماح للمتصفح بتقسيم مساحة الألوان عند الحاجة، بدلاً من تحمل فقدان الجودة الناتج عن التقسيم المزدوج.

خلال العقد الأول من القرن الحادي والعشرين، انخفض استخدام شاشات 256 لونًا في أجهزة الكمبيوتر الشخصية بشكل حاد لصالح شاشات 24 بت ( TrueColor )، [ 29 ] ولم تعد الألوان "الآمنة للويب" شائعة الاستخدام على الويب.

لا تحتوي جميع الألوان "الآمنة للويب" على أسماء قياسية، ولكن يمكن تحديد كل منها بواسطة ثلاثية RGB : يأخذ كل مكون (الأحمر والأخضر والأزرق) واحدة من القيم الست من الجدول التالي (من بين 256 قيمة ممكنة متاحة لكل مكون في لون 24 بت كامل).

ستة درجات من كل لون
مفتاحعرافةعشريجزء
0٠٠00
333510.2
6661020.4
9991530.6
ج (12)نسخة2040.8
F (15)FF2551

يُبيّن الجدول التالي جميع الألوان "الآمنة للويب". من عيوب هذه المجموعة اللونية قلة نطاق الألوان الفاتحة لخلفيات صفحات الويب، بينما تتشابه درجات الألوان المنخفضة، كالأغمق لونين، مما يصعب تمييزها. أما القيم التي تحمل علامة "*" (نجمة) فهي جزء من "مجموعة الألوان الآمنة جدًا"؛ انظر "ألوان الويب الأكثر أمانًا " أدناه.

جدول الألوان

216 لونًا "آمنًا للاستخدام على الإنترنت"
*٠٠٠*300600900C00*F00*
*003*303603903C03*F03*
006306606906C06F06
009309609909C09F09
00 درجة مئوية30 درجة مئوية60 درجة مئوية90 درجة مئويةC0CF0C
*00F*30 فهرنهايت60 فهرنهايت90 فهرنهايتC0F*F0F*
030330630930C30F30
033333633933C33F33
036336636936C36إف 36
039339639939C39F39
03C33 درجة مئوية63 درجة مئوية93 درجة مئويةC3CF3C
03F33 فهرنهايت63 فهرنهايت93 فهرنهايتC3FF3F
060360660960C60F60
063363663963C63F63
066366666966C66F66
069369669969C69F69
06C36 درجة مئوية66 درجة مئوية96 درجة مئويةC6CF6C
06F36 فهرنهايت66 فهرنهايت96 فهرنهايتC6FF6F
090390690990C90F90
093393693993C93F93
096396696996C96F96
099399699999C99F99
09C39 درجة مئوية69 درجة مئوية99 درجة مئويةC9CF9C
09F39 فهرنهايت69 فهرنهايت99 فهرنهايتC9FF9F
0C03C06C09C0CC0FC0
0C33C36C39C3CC3FC3
0C63C66C69C6CC6FC6
0C93C96C99C9CC9FC9
0 سم مكعب3 سم مكعب6 سم مكعب9 سم مكعبCCCلجنة الاتصالات الفيدرالية
0 درجة مئوية3CF6CF9CFCCFالتدفق النقدي الحر
*0F0*3F0*6F0*9F0CF0*FF0*
0F3*3F3**6F3*9F3CF3*FF3*
*0F6**3F6*6F69F6*CF6**FF6*
0F93F96F99F9CF9FF9
*0FC**3FC*6FC9FCمركبات الكلوروفلوروكربونFFC
*إيقاف**3FF**6FF*9FFتليف الكبد الدهني المزمن*FFF*

كل رمز لوني مدرج هو اختصار لقيمة RGB. على سبيل المثال، الرمز 609 يعادل رمز RGB 102-0-153 أو رمز HEX #660099 .

ألوان الويب الأكثر أمانًا

شُجِّع المصممون على الالتزام بهذه الألوان الـ 216 "الآمنة للويب" في مواقعهم الإلكترونية، نظرًا لانتشار شاشات العرض ذات الألوان 8 بت عند تطوير لوحة الألوان هذه. اكتشف ديفيد لين وهادلي ستيرن أن 22 لونًا فقط من أصل 216 لونًا في لوحة الألوان الآمنة للويب تُعرض بشكل موثوق دون إعادة تعيين غير متناسقة على شاشات الكمبيوتر ذات الألوان 16 بت . أطلقوا على هذه الألوان الـ 22 اسم "لوحة الألوان الآمنة حقًا"؛ وهي تتكون في الغالب من درجات الأخضر والأصفر والسماوي. [ 30 ] [ 31 ]

ألوان الويب الأكثر أمانًا
R--
-GB
0369جF
٠٠*٠٠٠**F00*
03*003**F03*
06
09
0 درجة مئوية
0 فهرنهايت*00F**F0F*
⋮⋮
F0*0F0**6F0**FF0*
F3*3F3**6F3**FF3*
F6*0F6**3F6**CF6**FF6*
F9
نادي كرة القدم*0FC**3FC*
FF*إيقاف**3FF**6FF**FFF*

إمكانية الوصول

اختيار اللون

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

إما عدم تحديد أي ألوان (لاستدعاء ألوان المتصفح الافتراضية)، أو تحديد كل من لون الخلفية وجميع ألوان المقدمة (مثل ألوان النص العادي، والروابط غير المزارة، والروابط التي يتم تمرير المؤشر عليها، والروابط النشطة، والروابط التي تمت زيارتها) لتجنب تأثيرات الأسود على الأسود أو الأبيض على الأبيض . [ 32 ]

تباين الألوان

توصي إرشادات إمكانية الوصول إلى محتوى الويب بنسبة تباين لا تقل عن 4.5:1 بين سطوع النص ولون خلفيته [ 33 ] ، أو 3:1 على الأقل للنصوص الكبيرة. ويتطلب تحسين إمكانية الوصول نسب تباين أكبر من 7:1.

مع ذلك، لا يقتصر حل مشكلات إمكانية الوصول على زيادة نسبة التباين فحسب. فكما يشير تقريرٌ صادرٌ عن مبادرة إمكانية الوصول إلى الويب [ 34 ] ، فإنّ القراء الذين يعانون من عسر القراءة يستفيدون أكثر من نسب تباين أقل من الحد الأقصى. وتبلغ نسب التباين في التوصيات التي أشاروا إليها، والمتمثلة في استخدام اللون الأسود المائل للرمادي (#0A0A0A) على خلفية بيضاء مائلة للرمادي (#FFFFE5)، والأسود (#000000) على خلفية كريمية (#FAFAC8)، 11.7:1 و20.3:1 على التوالي. ومن بين أزواج الألوان الأخرى، نجد أن اللون البني (#282800) على خلفية خضراء داكنة (#A0A000) تبلغ نسبة تباينه 3.24:1، وهي أقل من توصية WCAG ، بينما تبلغ نسبة التباين في اللون البني الداكن (#1E1E00) على خلفية خضراء فاتحة (#B9B900) 4.54:1، وفي اللون الأزرق (#00007D) على خلفية صفراء (#FFFF00) 11.4:1. تستخدم الألوان المذكورة في التقرير قيمًا لونية مختلفة عن ألوان الويب التي تحمل نفس الاسم.

انظر أيضاً

مراجع

  1. ↑ نيدرست روبنز، جينيفر (فبراير 2006). "الملحق د: تحديد اللون". تصميم مواقع الويب باختصار . أورايلي. ص  830. ISBN 978-0-596-00987-8.
  2. ↑ يورك، ريتشارد. مقدمة في CSS ، الصفحات 71-72.
  3. ↑ بيمبرتون، ستيفن؛ بيتيت، براد (7 يونيو 2011). تشيليك، تانتك؛ ليلي، كريس؛ بارون، ل. ديفيد (محررون). "وحدة ألوان CSS المستوى 3" . W3C. القسم 4.2.1. قيم ألوان RGB.
  4. ↑ شارما، غاوراف؛ بالا، راجا (19 ديسمبر 2017). دليل التصوير الرقمي الملون . مطبعة سي آر سي. رقم ISBN 978-1-4200-4148-4.
  5. ↑ بيمبرتون، ستيفن؛ بيتيت، براد (7 يونيو 2011). تشيليك، تانتك؛ ليلي، كريس؛ بارون، ل. ديفيد (محررون). "4.2.1. قيم ألوان RGB" . وحدة ألوان CSS المستوى 3. W3C . تم الاطلاع عليه في 19 مارس 2013 .
  6. 1 2 "وحدة ألوان CSS المستوى 3" . W3c . تم الاطلاع عليه بتاريخ 19 يوليو 2020 .
  7. ↑ باول، توماس أ. (2010). HTML وCSS: المرجع الكامل، الطبعة الخامسة . نيويورك: ماكجرو هيل. ص 765. ISBN  9780071741705.
  8. ↑ "مواصفات HTML 4.01 | أنواع بيانات HTML الأساسية | الألوان" . W3C . تم الاطلاع عليه بتاريخ 8 يوليو 2013 .
  9. ↑ راجيت، ديف. "مواصفات مرجعية لـ HTML 3.2 | عنصر BODY" . W3C . تم الاطلاع عليه بتاريخ 8 يوليو 2013 .
  10. ↑ ليلي، كريس (24 أبريل 2002). "ردًا على: تعارض أسماء الألوان في SVG-1.0 مع /usr/lib/X11/rgb.txt" . أرشيفات القوائم البريدية العامة لاتحاد شبكة الويب العالمية . تم الاطلاع عليه في 8 يوليو 2013 .
  11. ↑ بيمبرتون، ستيفن؛ بيتيت، براد (7 يونيو 2011). تشيليك، تانتك؛ ليلي، كريس؛ بارون، ل. ديفيد (محررون). "4.3. كلمات مفتاحية موسعة للألوان" . وحدة ألوان CSS المستوى 3. W3C . تم الاطلاع عليه في 19 مارس 2013 .
  12. ↑ "الرسومات المتجهة القابلة للتوسيع (SVG) 1.1 (الطبعة الثانية) | أنواع البيانات الأساسية والواجهات | أسماء الكلمات المفتاحية للألوان المعترف بها" . W3C. 16 أغسطس 2011. تم الاطلاع عليه في 1 فبراير 2019 .
  13. ↑ "مجموعة ألوان X11" . الحوسبة والشبكات في HSEAS . مؤرشف من الأصل في 14 يوليو 2014. تم الاطلاع عليه في 6 يوليو 2014 .
  14. ↑ برايان ويلسون. "الألوان في HTML وCSS" . blooberry.com . تم الاطلاع عليه بتاريخ 6 يوليو 2014 .
  15. ↑ "مواصفات CSS 2.1: بناء الجملة وأنواع البيانات الأساسية: الألوان" . W3C . 8 سبتمبر 2009. تم الاطلاع عليه في 21 ديسمبر 2009 .
  16. ↑ "وحدة ألوان CSS المستوى 3 - التوصية المقترحة - 11. التغييرات" . W3C . 28 أكتوبر 2010. تم الاطلاع عليه في 6 يوليو 2014 .
  17. ↑ "وحدة CSS3: اللون | مسودة عمل" . W3C . 18 أبريل 2002. تم الاطلاع عليه في 6 يوليو 2014 .
  18. 1 2 "وحدة ألوان CSS المستوى 4 - الألوان المسماة" . 
  19. ↑ "واجهة المستخدم - ألوان النظام" . W3C . تم الاطلاع عليه بتاريخ 8 يوليو 2013 .
  20. ↑ بيمبرتون، ستيفن؛ بيتيت، براد (7 يونيو 2011). تشيليك، تانتك؛ ليلي، كريس؛ بارون، ل. ديفيد (محررون). "4.5.1. ألوان نظام CSS2" . وحدة ألوان CSS المستوى 3. W3C . تم الاطلاع عليه في 19 مارس 2013 .
  21. ↑ "وحدة واجهة المستخدم الأساسية CSS3 | مظهر النظام" . W3C . تم الاطلاع عليه بتاريخ 8 يوليو 2013 .
  22. ↑ Çelik, Tantek, ed. (17 يناير 2012). "قائمة التغييرات الجوهرية" . وحدة واجهة المستخدم الأساسية CSS، المستوى 3. W3C . تم الاطلاع عليه في 19 مارس 2013. تم حذف خاصية مظهر النظام، بما في ذلك قيم المظهر والخاصية، وخطوط النظام / امتداد اختصار خاصية "الخط".
  23. 1 2 بيمبرتون، ستيفن؛ بيتيت، براد (7 يونيو 2011). تشيليك، تانتك؛ ليلي، كريس؛ بارون، ل. ديفيد (محررون). "4.2.4. قيم ألوان HSL" . وحدة ألوان CSS المستوى 3. W3C . تم الاسترجاع في 19 مارس 2013 .
  24. 1 2 3 4 "وحدة ألوان CSS المستوى 4" . W3C . تم الاطلاع عليه بتاريخ 14 مارس 2022 .
  25. 1 2 "وحدة ألوان CSS المستوى 4: نظرة عامة" . W3C . تم الاطلاع عليه بتاريخ 11 يناير 2022 .
  26. ↑ غلازمان، دانيال (21 يونيو 2014). "ردًا على: [ CfC ] إضافة 'rebeccapurple' إلى مستوى ألوان CSS 4" . منشور على القائمة البريدية www-style . W3C . تم الاطلاع عليه في 24 يونيو 2014 .
  27. 1 2 وحدة ألوان CSS المستوى 5
  28. ↑ جينكينز، سو (27 ديسمبر 2012). تصميم مواقع الويب الشامل للمبتدئين . جون وايلي وأولاده. ISBN 9781118404119.
  29. ↑ "إحصائيات عرض المتصفح" . W3Schools . تم الاطلاع عليه بتاريخ 8 يوليو 2013 .
  30. ↑ لين، ديفيد؛ ستيرن، هادلي. "نهاية لوحة ألوان الويب الآمنة؟" . asc.ohio-state.edu. مؤرشف من الأصل في 3 مارس 2021. تم الاسترجاع في 3 مارس 2021 .
  31. ↑ بايبروغلو، ستيفانوس (13 ديسمبر 2000). "مرجع ألوان الويب - HTML مع النمط | 4" . مرجع الويب . مؤرشف من الأصل في 23 نوفمبر 2016. تم الاسترجاع في 5 يناير 2016 .
  32. ↑ "إذا اخترت لونًا واحدًا، فاخترها كلها" . W3C . تم الاطلاع عليه بتاريخ 8 يوليو 2013 .
  33. ↑ إرشادات WCAG 2.0، البند 1.4
  34. ↑ ألوان مثالية لتحسين سهولة القراءة للأشخاص الذين يعانون من عسر القراءة