رمز لون التوت. يمكن تحديد اللون في الأنماط بطرق مختلفة: حسب القيمة السداسية العشرية، وبالاسم، بتنسيق RGB، وRGBA، وHSL، وHSLA
تُستخدم رموز الألوان في 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 | #3300 سي سي | #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 | #6600سي سي | #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 |
فلاد ميرزيفيتش
في 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) المكون الأزرق. وستكون النتيجة النهائية هذا اللون.
| F. A. | + | 8E | + | 47 | = | FA8E47 |
يمكن لكل لون من الألوان الثلاثة - الأحمر والأخضر والأزرق - أن يأخذ قيمًا من 00 إلى FF، مما ينتج عنه إجمالي 256 لونًا. وبالتالي، يمكن أن يكون العدد الإجمالي للألوان 256x256x256 = 16777216 مجموعة. يُطلق على نموذج الألوان المعتمد على مكونات الأحمر والأخضر والأزرق اسم 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 (فف). تتم الإشارة إلى القيمة السداسية العشرية لهذا المكون بين قوسين. إجمالي عدد الألوان من جميع المجموعات الممكنة يعطي 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 على الكلمة الأساسية المحجوزة Teal .>>إدارة الألوان
قيم ألوان RGB السداسية العشرية
تختلف طرق وصف الألوان ومعالجتها عن بعضها البعض في التمثيل النهائي المقصود منها. دعونا نقارن، على سبيل المثال، بين تمثيل الألوان للطباعة وشاشات الكمبيوتر. في الحالة الأولى، يتم أخذ الأساس أبيضلون الورقة التي يتم تطبيق ثلاثة ألوان أساسية عليها فيما بعد: أزرق, أرجوانيو أصفر. عند مزجها مع بعضها البعض ومع اللون الأبيض للورق بنسب مختلفة، تعطي هذه الألوان الأساسية الثلاثة درجات ألوان مختلفة، باستثناء اللون الأسود النقي، أو في حالة الغياب التام للدهانات تعطي ورقًا أبيض. وإذا أضفنا إليها اللون الأسود نحصل على كميك-طريقة نقل اللون عند الحصول على اللون المطلوب عن طريق طرح الألوان المفقودة من اللون الأبيض.
وفي الحالة الثانية يتم أخذ الأساس أسودلون شاشة العرض، حيث تتوهج كل خلية منها بأحد الألوان الثلاثة: أحمر-أحمر، أخضر-الأخضر و أزرق-أزرق. ثم، في حالة الغياب التام لأي توهج، نحصل على لون شاشة أسود خالص، ويتم إعطاء أي من الألوان المطلوبة بنسبة كل لون من الألوان الثلاثة. في هذه الحالة سوف نحصل RGB- طريقة انتقال الألوان . يمكن أن تحتوي الألوان الأساسية على قيم تتراوح من 0
قبل 255
، او من 0%
قبل 100%
أو يمكن تمثيلها كقيمة سداسية عشرية. في الشكل أدناه يمكنك رؤية نتائج خلط الألوان الأساسية.
نظام الأرقام السداسية العشرية، على عكس نظام الأرقام العشرية، لا يحتوي على عشرة أرقام، ولكن ستة عشر - ومن هنا الاسم. وفقًا لذلك، لا يمكن أن يكون هناك سوى متغيرات غير متكررة من مجموعات من رقمين - 256 ، لمواصلة سلسلة الأرقام بعد ذلك 9 رسائل من أقبل Fوبالتالي ستكون السلسلة بهذا الشكل
| 0,1,2,3,4,5,6,7,8,9,أ,ب,ج,د,ه,و. |
في هذه الحالة، يتم تحديد اللون بثلاثة أرقام سداسية عشرية، يتكون كل منها من رقمين. الرقم الأول يحدد الشدة أحمرالألوان المتوسطة- أخضر، آخر شيء- أزرقالألوان. يمكن لجميع الأرقام أن تأخذ قيمًا في النطاق من 00 قبل FF(من 0 إلى 255). على سبيل المثال: يتم إعطاء اللون الأخضر ك #00FF00، أحمر - مثل #FF0000، مثل الأزرق #0000FF، أبيض مثل #FFFFFF، ويرد الغياب الكامل للون أو الأسود كما #000000 .
في النموذج أدناه يمكنك تحديد أي قيم سداسية عشرية لكل لون من الألوان الثلاثة ومعرفة نتيجة مزجها من خلال النقر في حقل الإخراج.
أمثلة على بعض قيم ألوان RGB السداسية العشرية: تدرجات اللون الأحمر والأزرق والأخضر.
| منظر | شفرة | منظر | شفرة | منظر | شفرة | منظر | شفرة | منظر | شفرة | منظر | شفرة |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | #A00000 | #002000 | #00A000 | #000020 | #0000A0 | ||||||
| #300000 | #ب00000 | #003000 | #00B000 | #000030 | #0000B0 | ||||||
| #400000 | #C00000 | #004000 | #00C000 | #000040 | #0000C0 | ||||||
| #500000 | #D00000 | #005000 | #00D000 | #000050 | #0000D0 | ||||||
| #600000 | #E00000 | #006000 | #00E000 | #000060 | #0000E0 | ||||||
| #700000 | #FF0000 | #007000 | #00FF00 | #000070 | #0000FF |
تحديد اللون باستخدام سلسلة حرفية
لسهولة الاستخدام، تم تخصيص أسماء لبعض الألوان ومجموعاتها التي تتعرف عليها جميع المتصفحات، وأصبح من الممكن تعيين الكثير منها بالاسم. ويبين الجدول أدناه بعض أسماء الألوان:
| منظر | اسم | منظر | اسم | منظر | اسم | منظر | اسم |
| أبيض | أحمر | البرتقالي | أصفر | ||||
| أخضر | أزرق | أرجواني | أسود | ||||
| أليس الأزرق | الأبيض العتيقة | أكوا | زبرجد | ||||
| أزور | اللون البيج | حساء دسم | بلانشدالموند | ||||
| بنفسجي مزرق | بني | خشب قوي البنية | طالبا الأزرق | ||||
| شارتروز | شوكولاتة | المرجان | ردة الذرة الأزرق | ||||
| كورنسيلك | قرمزي | ازرق سماوي | أزرق غامق | ||||
| داركسيان | Darkgoldenrod | الرمادي الداكن | أخضر غامق | ||||
| داركخاكي | أرجواني داكن | دارك أوليف جرين | برتقالي قاتم | ||||
| داركوركيد | احمر غامق | سمك السلمون الداكن | Darkseagreen | ||||
| Darkslateblue | Darkslategray | تركواز غامق | بنفسجي غامق | ||||
| زهري غامق | ديبسكيبلو | ديمجراي | المراوغ الأزرق | ||||
| الطوب الناري | أبيض زهري | فورستجرين | فوشيا | ||||
| جينزبورو | غوستوايت | ذهب | غولدنرود | ||||
| رمادي | أخضر أصفر | المن | وردي فاقع | ||||
| أحمر هندي | نيلي | عاج | الكاكي | ||||
| لافندر | لافندربلاش | ليمونشيفون | أزرق فاتح | ||||
| لايتكورال | ضوء سماوي | أصفر فاتح بارد | اخضر فاتح | ||||
| رمادي فاتح | وردي فاتح | لايت سلمون | أخضر فاتح | ||||
| أزرق فاتح | رمادي فاتح | أزرق فاتح | أصفر فاتح | ||||
| جير | ليمون اخضر | الكتان | أرجواني | ||||
| كستنائي | متوسطالزبرجد | ازرق متوسط | زهرة الأوركيد المتوسطة | ||||
| أرجواني متوسط | متوسطةأخضر البحر | متوسط الأزرق الداكن | متوسطة الربيع الأخضر | ||||
| متوسطالفيروز | أحمر بنفسجي متوسط | منتصف الليل الأزرق | كريم النعناع | ||||
| ارتفع ضبابي | نافاجو وايت | القوات البحرية | أولدليس | ||||
| زيتون | أوليفراب | أحمر برتقالي | زهرة الأوركيد | ||||
| باليغولدينرود | أخضر باهت | باليتوركواز | شاحب اللون الأحمر | ||||
| سوط البابايا | نفخة الخوخ | بيرو | لون القرنفل | ||||
| وظيفة محترمة | مسحوق أزرق | روزي براون | الأزرق الملكي | ||||
| السرج البني | سيجرين | صدف | سيينا | ||||
| فضة | أزرق سماوي | لائحة الأزرق | الرمادي الداكن | ||||
| ثلج | ربيع اخضر | الأزرق الصلب | تان | ||||
| بط نهري صغير | الشوك | طماطم | الفيروز | ||||
| البنفسجي | قمح | دخان ابيض | الأخضر الأصفر |
استخدام لوحة الألوان الآمنة
لسوء الحظ، على منصات مختلفة، مع إعدادات نظام مختلفة، يمثل إعادة إنتاج الألوان الصحيحة مشكلة. الشيء هو أن المتصفح يحاول دائمًا ضبط لوحة ألوان المستند على إعدادات النظام وقدرات المراقبة، عن طريق مزج الألوان واستبدالها بشكل مستقل. ونتيجة لذلك، في بعض الأحيان لا يرى المستخدم بالضبط ما أراد مشرف الموقع إظهاره له. تم العثور على طريقة للخروج من هذا الموقف من خلال استخدام لوحة الألوان، حيث يتم ضمان عرض كل لون بشكل متساوٍ من قبل جميع المتصفحات على منصات مختلفة. هذا هو ما يسمى مضمونلوحة، وتسمى أيضا آمنلوحة. تتضمن هذه اللوحة الألوان التي تأخذ مكوناتها اللونية القيم التالية: 00 ,33 ,66 ,99 , نسخة,FF، بكل الطرق الممكنة 216 مجموعاتهم.
| منظر | شفرة | منظر | شفرة | منظر | شفرة | منظر | شفرة | منظر | شفرة | منظر | شفرة |
| FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399 سي سي | 0099CC | 003333 | ||||||
| 99CCFF | 3399FF | 0099FF | 6699 سي سي | 336699 | 006699 | ||||||
| 0066FF | 3366 سي سي | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699FF | 3366FF | 0000FF | 0000CC | 0033CC | 000033 | ||||||
| 3333FF | 3300FF | 3300 سي سي | 3333 سي سي | 000099 | 000066 | ||||||
| 9999 سي سي | 6666FF | 6666 سي سي | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600FF | 330099 | 330066 | ||||||
| 9966 سي سي | 9966FF | 6600 سي سي | 6633 سي سي | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900 سي سي | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
يمكن ضبط اللون في CSS بطرق مختلفة:
- بالاسم،
- بالقيمة السداسية العشرية،
- بتنسيقات RGB وRGBA،
- في تنسيقات HSL وHSLA.
ضبط اللون بالاسم
تدعم المتصفحات تحديد بعض الألوان للعناصر حسب الاسم. يحتوي هذا الجدول على بعض الكلمات الأساسية (أسماء الألوان الإنجليزية) المستخدمة لتحديد خصائص اللون ورمز RGB والرمز السداسي العشري (HEX) ورمز HSL.
| اسم | لون | RGB | عرافة | HSL | وصف |
|---|---|---|---|---|---|
| أبيض | رغب (255، 255، 255) | #ffffff أو #ffff | هسل (0، 0٪، 100٪) | أبيض | |
| فضة | رغب (192، 192، 192) | #c0c0c0 | هسل (0، 0٪، 75٪) | رمادي | |
| رمادي | رغب (128، 128، 128) | #808080 | هسل (0، 0٪، 50٪) | الرمادي الداكن | |
| أسود | رغب (0، 0، 0) | #000000 أو #000 | هسل (0، 0٪، 0٪) | أسود | |
| كستنائي | رغب (128، 0، 0) | #800000 | هسل (0، 100٪، 25٪) | احمر غامق | |
| أحمر | رغب (255، 0، 0) | #ff0000 أو #f00 | هسل (0، 100٪، 50٪) | أحمر | |
| البرتقالي | رغب (255، 165، 0) | #ffa500 | إتش إس إل (38.8، 100%، 50%) | البرتقالي | |
| أصفر | رغب (255، 255، 0) | #ffff00 أو #ff0 | هسل (60، 100٪، 50٪) | أصفر | |
| زيتون | رغب (128، 128، 0) | #808000 | هسل (60، 100%، 25%) | زيتون | |
| جير | رغب (0، 255، 0) | #00ff00 أو #0f0 | هسل (120، 100٪، 50٪) | اخضر فاتح | |
| أخضر | رغب (0، 128، 0) | #008000 | هسل (120، 100٪، 25٪) | أخضر | |
| أكوا | رغب (0، 255، 255) | #00ffff أو #0ff | هسل (180، 100٪، 50٪) | أزرق | |
| أزرق | رغب (0، 0، 255) | #0000ff أو #00f | هسل (240، 100٪، 50٪) | أزرق | |
| القوات البحرية | رغب (0،0،128) | #000080 | هسل (240، 100%، 25%) | أزرق غامق | |
| بط نهري صغير | رغب (0، 128، 128) | #008080 | هسل (180، 100٪، 25٪) | أزرق أخضر | |
| ضارب الى الحمرة | رغب (255، 0، 255) | #ff00ff أو #f0f | هسل (300، 100٪، 50٪) | لون القرنفل | |
| أرجواني | رغب (128، 0، 128) | #800080 | هسل (300، 100٪، 25٪) | البنفسجي |
هذا مثال على استخدام أسماء الألوان، أسماء الألوان مأخوذة من الجدول الموسع.
وإليك كيفية عمل هذا الرمز:
ضبط اللون باستخدام RGB
RGB هو نموذج ألوان مضافة. باللغة الإنجليزية إضافة- إضافة. RGB هو اختصار للكلمات الإنجليزية: الأحمر، الأخضر، الأزرق - الأحمر، الأخضر، الأزرق). ومن هذا يتضح أنه في نموذج RGB يتم تركيب الألوان بإضافة ثلاثة ألوان (أحمر، أخضر، أزرق) بكميات مختلفة.
من خلال مزج الألوان الأحمر والأخضر والأزرق، يمكنك الحصول على عدة ملايين من الظلال. يتم تخزين جميع المجموعات الممكنة في ذاكرة الكمبيوتر.
أوضح ماذا تقصد.
لتعيين الخصائص بهذا التنسيق، استخدم الترميز rgb(r, g, b) حيث r, g, b هي القنوات الثلاث لكل لون (أحمر، أخضر، أزرق). يتم تعيين القيم لكل قناة في النطاق من 0 إلى 255.
رمز المثال.
لتوضيح كل شيء، إليك مثال التعليمات البرمجية:
هذه هي الطريقة التي يجب أن يعمل بها هذا المثال:
رسم بياني 1. الألوان في RGB. التوضيحات على سبيل المثال.
في بداية الصفحة نقوم بإنشاء فئة div.rgb، وهي ضرورية للكتل التي تم إنشاؤها بواسطة العلامة
بعد ذلك، في الكود، قمنا بتعيين لون خلفية الكتلة
حاول تحرير هذا المثال وتحديد القيم الخاصة بك، على سبيل المثال rgb(100, 100, 100) .
ضبط اللون باستخدام RGBA
يحتوي CSS3 على أداة جديدة للتعامل مع الألوان - تنسيق RGBA. يمكن أن يطلق عليه تطورًا لنموذج RGB، ولكن مع إضافة قناة جديدة واحدة - قناة A أو قناة ألفا. تقوم هذه القناة بتعيين شفافية اللون. يتم تعيين قيمها في النطاق من 0 إلى 1. القيمة 0 تتوافق مع الشفافية الكاملة، 1 - التعتيم الكامل (سيكون اللون هو نفسه الذي تم تحديده في قنوات RGB الثلاثة الأولى)، والقيم المتوسطة مثل 0.4 أو 0.6 - الشفافية بدرجات متفاوتة.
رمز المثال.
وإليك كيف ستعمل:
يشبه هذا الرمز بصريًا ما يلي، والذي يستخدم نموذج RGB لتحديد قيمة اللون:
وهذه هي نتيجته:
قيمة قناة ألفا تساوي الصفر تجعل أي لون غير مرئي - شفاف تمامًا؛ القيمة التي تساوي واحدًا تترجم اللون في كود RGB دون تغييرات. تُظهر الخاصية rgba(255,0,0,1.0) اللون الأحمر rgb(255, 0, 0) .
حسب القيمة السداسية العشرية (رمز HEX)
في الحياة اليومية، نستخدم نظام العد العشري. أصوله بسيطة للغاية - لدينا عشرة أصابع في أيدينا، وكان العد على أصابعنا أمرًا مريحًا في الحياة. إذا كان النظام العشري يتكون من عشرة أرقام: من 0 إلى 9، والرقم 10 هو الرقم التالي، فإن نظام الأرقام السداسي العشري يتكون من 16 رقمًا، والرقم التالي هو الرقم 16.
للإشارة إلى رموز الألوان، يتم استخدام الأرقام العشرية العادية من 0 إلى 9 كأرقام سداسية عشرية، وتستخدم الحروف اللاتينية من A إلى F للإشارة إلى الأرقام من 10 إلى 15، أي (0، 1، 2، 3، 4، 5). ، 6، 7، 8، 9، أ، ب، ج، د، ه، و). من أجل الوضوح، دعونا نضع هذا في الجدول:
لكتابة أرقام سداسية عشرية أكبر من F (15 في النظام العشري)، كما هو الحال في النظام العشري، يستخدمون أيضًا مزيجًا من رقمين، ولكن بالفعل سداسي عشري، وهو أمر واضح. وبالتالي، لكتابة الرقم العشري 255 بالتدوين الست عشري، استخدم تدوين FF.
يعد النظام السداسي العشري أكثر قابلية للفهم للكمبيوتر، ويقوم بمعالجة القيم المحددة بواسطة القيمة السداسية العشرية بشكل أسرع.
لتحديد لون بالنظام الست عشري، تسبق القيمة الرقمية بعلامة "#"، على سبيل المثال: #FFC0CB. تتكون القيمة #FFC0CB نفسها من ثلاثة أرقام سداسية عشرية FF وC0 وCB. معنى هذا الإدخال هو نفس تحديد اللون بتنسيق RGB (rgb(r, g, b)) - يشير كل رقم سداسي عشري في كود HEX إلى تشبع اللون في قناته الخاصة بنموذج RGB.
سيعرض هذا الرمز العناصر التالية:
وهذه صورة بالنتيجة من قسم "ضبط الألوان باستخدام RGB" في هذه الصفحة أعلاه.
رسم بياني 1. الألوان في RGB. نرى أن الألوان متطابقة.
يُسمح بتدوين مختصر لرمز اللون HEX: يمكن كتابة رقم مكون من 6 أرقام كرقم مكون من 3 أرقام. يكون هذا صالحًا فقط عند تكرار رقمين في قيمة اللون لقناة واحدة.
أي أن الاختصار التالي مقبول:
على سبيل المثال، يمكن كتابة اللون #ff22aa كـ #f2a، أو يمكن كتابة اللون #44aa22 كـ #4a2.
ضبط اللون باستخدام HSL
يحتوي CSS3 على تنسيق جديد لتحديد الألوان.
تنسيق HSL هو اختصار للكلمات الإنجليزية: Hue (hue)، Saturate (Saturation)، Lightness (lightness).
Hue in HSL هي قيمة اللون على عجلة ألوان خاصة (الشكل 2) ويتم تحديدها بالدرجات. إذا قمنا برسم تشبيهات مع نموذج RGB، فإن 0 درجة تتوافق مع اللون الأحمر، و120 درجة تتوافق مع اللون الأخضر، و240 درجة تتوافق مع اللون الأزرق.
ستتغير قيمة تدرج اللون في النطاق من 0 إلى 359.
الشكل 2. عجلة الألوان HSL. القيمة الثانية - التشبع (التشبع) يتم تعيينها كنسبة مئوية. عند التشبع بنسبة 100%، يكون اللون "مثيرًا" قدر الإمكان؛ ومع تحرك مؤشر التشبع نحو 0%، يصبح اللون باهتًا ويتحول إلى اللون الرمادي.
يتم أيضًا تعيين القيمة الثالثة، Lightness، كنسبة مئوية. كلما زادت النسبة، أصبح اللون أكثر سطوعًا. ستشير القيم القصوى 0% و100% إلى اللونين الأسود (بدون ضوء) والأبيض (المتعرض للضوء بشكل مفرط)، على التوالي، ولا يهم اللون الذي تم تحديده من عجلة الألوان في القناة الأولى. قيمة سطوع اللون الأمثل هي 50%.
ضبط اللون باستخدام HSLA
يرتبط تنسيق HSLA بـ HSL، تمامًا كما يرتبط RGB بـ RGBA. في تنسيق HSLA، كما هو الحال في RGBA، تتم إضافة قناة ألفا المسؤولة عن شفافية الألوان.
اللون المحدد بتنسيق HSL أسهل في القراءة. يمكننا القول أنها بديهية. على سبيل المثال، يمكن أن يمثل الكود hsl(120,60%,50%) اللون النهائي إذا كانت هناك صورة لعجلة الألوان HSL في الذاكرة. لا يمكن قول الشيء نفسه عن تنسيقات RGB وHEX؛ يصبح رمز اللون المحدد في هذه التنسيقات واضحًا فقط بعد ظهوره على الشاشة.
تعمل التنسيقات الجديدة في CSS3 (HSL وHSLA وRGBA) في المتصفحات بدءًا من الإصدارات: IE 9.0 وOpera 10.0 Firefox 3.0. كيف يمكنني جعل الأنماط تعمل على المتصفحات القديمة؟
Somebloсk ( لون الخلفية: rgb(255,50,50); لون الخلفية: rgba(255,50,50,0.85))
عند استخدام هذا الرمز في المتصفحات القديمة، سيتم عرض لون الخلفية لفئة .somebloсk، على الرغم من أنها لن تستخدم قناة ألفا، بتنسيق RGB.
02/26/15 8.9 ألفكما تعلمون، يمكن أن يؤثر اللون على حالة الشخص: العقلية والجسدية. كل يوم، أثناء تصفح المواقع على الإنترنت، تقوم العيون بتقييم ملايين الألوان والظلال. يمكن لمصمم الويب المطلع على سيكولوجية الألوان أن يتلاعب بمزاج الزائر لتحقيق أهداف معينة.
ويرجع ذلك إلى حقيقة أن بعض الظلال تهدأ وبعضها على العكس من ذلك يثير. سنتحدث بعد ذلك عن كيفية تصنيع الألوان وعرضها باستخدام تكنولوجيا الكمبيوتر.
RGB هو نموذج ألوان يمثل طريقة للحصول على جميع الألوان وظلالها عن طريق مزج ثلاثة مكونات رئيسية بنسب مختلفة، وهي:
- أحمر اللون ( أحمر);
- اللون الاخضر ( أخضر);
- لون ازرق ( أزرق).
ومن هنا يأتي الاسم المختصر RGB. تم اختيار هذه الألوان باعتبارها الألوان الرئيسية لسبب ما: السبب هو فسيولوجيا شبكية العين البشرية وكيفية إدراكها لها:
يظل نموذج RGB هو الأكثر شعبية اليوم ويستخدم لإعادة إنتاج الألوان على شاشات التلفزيون وشاشات الكمبيوتر. نظرًا لأن الشركات المصنعة تمنح منتجاتها خصائص مختلفة، فقد تم في عام 1996 إنشاء نظام موحد لتركيب الألوان يعتمد على RGB يسمى sRGB، والذي عملت عليه Microsoft وHP معًا.
التمثيل العددي للون
كما ذكرنا سابقًا، يتم تشكيل ألوان RGB عن طريق مزج الألوان الأساسية. لوصف شدة كل منها، تم اعتماد مخطط يتم فيه تمثيل اللون بالنطاق 0-255 (8 بت)، والذي يتوافق في التدوين السداسي العشري مع 00-FF.
أي أن الألوان الأساسية ستبدو كما يلي:
- الأحمر – RGB (255,0,0);
- الأخضر – RGB (0,255,0);
- الأزرق - RGB (0،0،255)؛
إذا كانت شدة اللون تأخذ قيمًا أقل من 255، فسيتم الحصول على ظلال مختلفة من الأحمر والأخضر والأزرق. وفيما يلي جدول بتدرجاتها، فضلا عن القيم السداسية العشرية لكل من الظلال:
جداول الألوان RGB
وبطبيعة الحال، بالإضافة إلى تدرجات الألوان الأساسية، هناك ألوان مختلطة، وعددها كبير جدًا. لذلك تم إنشاء جدول ألوان RGB يعرض جميع الظلال الموجودة بالإضافة إلى أسمائها وتمثيلاتها الرقمية ( في شكل عشري وسداسي عشري).
يمكنك مشاهدته هنا. هذا الجدول يجعل الحياة أسهل بكثير لمصممي الويب، حيث يمكنك في بضع ثوان العثور على الظل المطلوب ومعرفة تمثيله العددي.
لوحة ألوان RGB آمنة
ومع ذلك، في مرحلة ما كانت هناك مشكلة في عرض الألوان في متصفحات مختلفة، ولحلها، تم تجميع ما يسمى باللوحة "الآمنة" لألوان RGB، والتي تم استخلاصها من خلال الحسابات الرياضية.
عندما لا يتمكن المتصفح من عرض لون ما بشكل صحيح، سيحاول تقريب شيء ما إلى ما يحتاج إليه عن طريق مزج الألوان المتجاورة، وعلى الأغلب ستكون النتيجة غير مقبولة على الإطلاق:
باستخدام رموز ألوان RGB من هذه اللوحة، يمكن لمطور الويب أن يشعر براحة البال فيما يتعلق بعرض الألوان على صفحات موقعه على الويب عند عرضها باستخدام متصفحات ومنصات وشاشات مختلفة. على الرغم من أن جدول الألوان الآمنة يفقد أهميته حاليًا ( التقدم التكنولوجي لا يزال لا يقف ساكنا) ، عند استخدامه يمكنك، كما يقولون، النوم بسلام.
اللون الذهبي في نموذج RGB
تم استخدام كلمة "الذهب" لأول مرة في بداية القرن الرابع عشر لوصف لون عنصر كيميائي يسمى أوروم - الذهب. في نموذج RGB، يتم تمثيل اللون الذهبي بالقيم الرقمية التالية:
- RGB (255، 215، 0) – النظام العشري؛
- HEX #FFD700 – نظام سداسي عشري.
اللون البيج في نموذج RGB
يحتل اللون البيج مكانا مهما إلى حد ما في التاريخ، حتى لو لم يكن الأكثر تعبيرا. تم صنع العديد من المعالم الثقافية، وخاصة المنحوتات القديمة، من الحجر الأملس والحجر الأملس، اللذين لهما صبغة بيج. في نموذج RGB، يحتوي اللون البيج على التمثيلات الرقمية التالية.
-
17 أبريل 2015متعدد النواة DSP TMS320C6678 -
17 أبريل 2015منتجات إنتل: الشرائح وميزاتها -
17 أبريل 2015كاتربيلر تكشف عن هاتف ذكي مزود بكاميرا حرارية Cat S60
