شرح أكواد ألوان HEX: كيف تعمل صيغة #RRGGBB
كود لون HEX مثل #1e90ff هو ثلاثة أزواج من الأرقام الست عشرية: كمية الضوء الأحمر والأخضر والأزرق، وكل منها من 00 (لا شيء) إلى ff (الحد الأقصى، 255). أضف زوجًا رابعًا لتحديد الشفافية: القيمة 80 تعني نحو 50%، وff تعني لونًا معتمًا تمامًا.
وقت القراءة: 5 د
كيف يعمل كود لون HEX
كل لون على الشاشة مزيج من ضوء أحمر وأخضر وأزرق. ويكتب كود HEX شدة كل ضوء بحرفين بعد علامة #: الأحمر أولًا، ثم الأخضر، ثم الأزرق. هذا هو نمط #RRGGBB.
هذه الحروف ست عشرية، أي طريقة عدّ بستة عشر رمزًا: من 0 إلى 9، ثم a (10) وb (11) وc (12) وd (13) وe (14) وf (15). ويغطي الزوج الواحد 256 قيمة، من 00 (0) إلى ff (255)، وهو بالضبط مدى rgb().
لتحويل زوج إلى رقم عادي، اضرب الرقم الأول في 16 وأضف إليه الثاني. أدناه اللون #1e90ff، وهو لون CSS المسمى dodgerblue، بأربع صيغ، ثم حسابه زوجًا زوجًا.
| الصيغة | القيمة |
|---|---|
| HEX | |
| RGB | |
| HSL | |
| OKLCH |
| الزوج | القناة | الحساب | القيمة |
|---|---|---|---|
| 1e | الأحمر | 1 × 16 + 14 | 30 |
| 90 | الأخضر | 9 × 16 + 0 | 144 |
| ff | الأزرق | 15 × 16 + 15 | 255 |
إذن #1e90ff هو rgb(30, 144, 255): قليل من الأحمر، وقدر لا بأس به من الأخضر، وأزرق كامل، والنتيجة أزرق سماوي ساطع. وثلاثة أزواج لكل منها 256 قيمة تعطي 16,777,216 لونًا ممكنًا.
اختصار HEX بثلاث خانات وبأربع خانات
إذا تساوى رقما كل زوج، يمكنك كتابة كل زوج مرة واحدة. فيصبح #ffcc00 هو #fc0، ويكرر المتصفح كل رقم من جديد. أما #1e90ff فليس له اختصار، لأن 1e و90 ليسا زوجين متكررين.
لا يغطي الاختصار سوى 4,096 لونًا من أصل 16.7 مليون. وتضيف الصيغة ذات الخانات الأربع الشفافية بالطريقة نفسها، فـ#f008 يعني #ff000088.
| المختصر | الكامل | اللون |
|---|---|---|
| #fff | #ffffff | أبيض |
| #000 | #000000 | أسود |
| #f00 | #ff0000 | أحمر |
| #fc0 | #ffcc00 | أصفر دافئ |
| #abc | #aabbcc | أزرق رمادي |
| #f008 | #ff000088 | أحمر بعتامة 53% |
الشفافية في HEX: كود بثماني خانات مع ألفا
يضيف الكود ذو الخانات الثماني زوجًا رابعًا لقناة ألفا، أي الشفافية: #RRGGBBAA. القيمة 00 شفافة تمامًا وff معتمة تمامًا. وتدعمها كل المتصفحات الحالية في CSS، ومعها الاختصار ذو الخانات الأربع #RGBA.
للحصول على الزوج، اضرب نسبة العتامة في 255، وقرّب الناتج إلى أقرب عدد صحيح، ثم حوّله إلى HEX. فنسبة 50% تعطي 127.5، وتُقرَّب إلى 128، وتُكتب 80. وإليك الجدول كاملًا مطبقًا على #1e90ff.
| العتامة | ألفا (0–255) | زوج HEX | #1e90ff مع ألفا |
|---|---|---|---|
| 100% | 255 | ff | #1e90ffff |
| 95% | 242 | f2 | #1e90fff2 |
| 90% | 230 | e6 | #1e90ffe6 |
| 85% | 217 | d9 | #1e90ffd9 |
| 80% | 204 | cc | #1e90ffcc |
| 75% | 191 | bf | #1e90ffbf |
| 70% | 179 | b3 | #1e90ffb3 |
| 65% | 166 | a6 | #1e90ffa6 |
| 60% | 153 | 99 | #1e90ff99 |
| 55% | 140 | 8c | #1e90ff8c |
| 50% | 128 | 80 | #1e90ff80 |
| 45% | 115 | 73 | #1e90ff73 |
| 40% | 102 | 66 | #1e90ff66 |
| 35% | 89 | 59 | #1e90ff59 |
| 30% | 77 | 4d | #1e90ff4d |
| 25% | 64 | 40 | #1e90ff40 |
| 20% | 51 | 33 | #1e90ff33 |
| 15% | 38 | 26 | #1e90ff26 |
| 10% | 26 | 1a | #1e90ff1a |
| 5% | 13 | 0d | #1e90ff0d |
| 0% | 0 | 00 | #1e90ff00 |
CSS
.overlay {
background: #00000080;
}
.overlay-same {
background: rgb(0 0 0 / 50%);
}هناك أمران ينبغي الانتباه لهما. أولًا، القيمة 80 تساوي 128 من 255، أي 50.2% وليس 50% بالضبط: فألفا في HEX لها 256 خطوة فقط، لذا فمعظم النسب المئوية المستديرة مجرد تقريب قريب. ثانيًا، يضع Android قناة ألفا في البداية. ففي ملف موارد الألوان في Android يعني #801e90ff ما يعنيه #1e90ff80 في CSS.
كيف تقرأ كود HEX بالعين
يمكنك تخمين اللون دون أي تحويل. انظر إلى الرقم الأول من كل زوج، فهو يحمل معظم المعلومات تقريبًا.
| الاسم في CSS | HEX | RGB | كيف تقرؤه |
|---|---|---|---|
| tomato | #ff6347 | 255, 99, 71 | أحمر كامل مع قليل من الأخضر والأزرق: أحمر فاتح دافئ |
| gold | #ffd700 | 255, 215, 0 | أحمر وأخضر مرتفعان بلا أزرق: أصفر |
| chocolate | #d2691e | 210, 105, 30 | الأحمر في الصدارة والأخضر في المنتصف والأزرق منخفض: بني برتقالي |
| darkturquoise | #00ced1 | 0, 206, 209 | أخضر وأزرق مرتفعان بلا أحمر: سماوي |
| dodgerblue | #1e90ff | 30, 144, 255 | الأزرق في الصدارة والأخضر في المنتصف: أزرق سماوي |
| mediumorchid | #ba55d3 | 186, 85, 211 | أحمر وأزرق مرتفعان وأخضر منخفض: بنفسجي |
| teal | #008080 | 0, 128, 128 | أخضر وأزرق في المنتصف: سماوي داكن |
| navy | #000080 | 0, 0, 128 | أزرق فقط في المنتصف: أزرق داكن |
| slategray | #708090 | 112, 128, 144 | قيم شبه متساوية والأزرق أعلى قليلًا: رمادي مزرق |
- الرقم الأول الأكبر يدل على الضوء الغالب. في #d2691e نجد d في الأحمر و6 في الأخضر و1 في الأزرق، فهو بني مائل إلى البرتقالي.
- تمتزج القناتان المرتفعتان: الأحمر والأخضر يعطيان الأصفر، والأخضر والأزرق يعطيان السماوي، والأحمر والأزرق يعطيان الأرجواني أو البنفسجي.
- ثلاثة أزواج متساوية تعطي رماديًا. فـ#333333 رمادي داكن، و#999999 رمادي فاتح. والأزواج شبه المتساوية، مثل #708090، تعطي لونًا باهتًا مائلًا إلى الرمادي.
- الأرقام المرتفعة عمومًا تعني لونًا فاتحًا، والمنخفضة لونًا داكنًا. فإذا كانت الأزواج الثلاثة كلها c0 أو أعلى، كان اللون شاحبًا. وإذا كانت كلها 30 أو أقل، كان داكنًا جدًا.
- يبدو الأخضر أسطع بكثير من الأزرق عند الرقم نفسه. فإضاءة #00ff00 في OKLCH تبلغ 0.866، بينما لا تتجاوز إضاءة #0000ff القيمة 0.452.
لماذا ليس #808080 رماديًا متوسطًا
يقع #808080 في المنتصف تمامًا من حيث الأرقام: 128 من 255 في كل قناة. لكنه لا يبدو في منتصف المسافة بين الأسود والأبيض. فإضاءته في OKLCH تبلغ 0.600، أي أنه يبدو قاطعًا 60% من الطريق نحو الأبيض.
قيم HEX مُرمَّزة أصلًا بمنحنى sRGB، وهو يتبع إدراك العين تقريبًا لكن ليس بدقة. يبعث #808080 نحو 21.6% من ضوء الأبيض، وتضع النماذج الإدراكية المنتصف البصري في موضع أدنى: عند #636363 في OKLCH، وعند #777777 في CIELAB.
| الرمادي | ما هو | OKLCH L | التباين على الأبيض | التباين على الأسود |
|---|---|---|---|---|
| #808080 | المنتصف الرقمي، 128 | 0.600 | 3.95:1 | 5.32:1 |
| #777777 | منتصف CIELAB، L* 50 | 0.569 | 4.48:1 | 4.69:1 |
| #767676 | أفتح رمادي يحقق 4.5:1 على الأبيض | 0.566 | 4.54:1 | 4.62:1 |
| #636363 | منتصف OKLCH، L 0.5 | 0.500 | 6.01:1 | 3.50:1 |
لهذا أهمية في النصوص. فالرمادي #808080 على الأبيض يعطي تباينًا قدره 3.95:1، ولا يجتاز المستوى AA في WCAG للنص العادي. و#767676 هو أفتح رمادي يحقق 4.5:1، أما #777777، الأفتح منه بخطوة واحدة، فيسقط عند 4.48:1.
أحرف كبيرة أم صغيرة، مع # أم بدونها
أكواد HEX لا تميز بين الأحرف الكبيرة والصغيرة. فـ#1E90FF و#1e90ff و#1E90ff لون واحد في CSS وSVG وأدوات التصميم. اختر أسلوبًا واحدًا والتزم به في كل مكان، حتى يعثر البحث في الكود على كل استخدام. والأحرف الصغيرة هي الخيار الشائع في CSS.
علامة # جزء من صياغة CSS وليست جزءًا من اللون. تعرض Figma وكثير من أدوات التصميم الكود بدونها، وكثيرًا ما تكتبه لغات البرمجة رقمًا ببادئة 0x، كما في Flutter حيث يبدأ Color(0xFF1E90FF) بزوج ألفا.
كيف تعرف كود HEX للون على الشاشة
استخدم أداة القطّارة: أداة تقرأ اللون الموجود تحت المؤشر وتعرض كوده. هذه الأدوات مجانية، ومعظمها مثبت لديك مسبقًا.
- Chrome وEdge: افتح DevTools بالضغط على F12، وانقر أي مربع لون في لوحة Styles، ثم استخدم أيقونة القطّارة لالتقاط لون من الصفحة.
- PickShade: في منتقي الألوان على الصفحة الرئيسية زر قطّارة في Chrome وEdge يلتقط اللون من أي مكان على الشاشة.
- Windows: ثبّت Microsoft PowerToys واضغط Win + Shift + C لفتح Color Picker.
- macOS: افتح Digital Color Meter من Applications ثم Utilities. حوّله إلى sRGB، ثم اختر View ثم Display Values ثم as Hexadecimal.
- Figma وPhotoshop ومعظم تطبيقات التصميم: اضغط I لأداة القطّارة.
- في صورة أو لقطة شاشة: افتحها في منتقي الألوان من الصور وانقر أي بكسل. تبقى الصورة على جهازك.
قد تختلف القيمة الملتقطة ببضع وحدات عن الأصل، لأن الشاشات تطبق ملفات تعريف الألوان والصور مضغوطة. وحين تحتاج إلى القيمة الدقيقة، انسخها من ملف التصميم أو من CSS، لا من لقطة شاشة.
أسئلة وأجوبة
ما هو كود لون HEX؟
كود لون HEX هو كود من ست خانات مثل #1e90ff يصف اللون بكمية الضوء الأحمر والأخضر والأزرق فيه. ويتراوح كل زوج من الأرقام الست عشرية بين 00 (0) وff (255)، فيكون #1e90ff هو rgb(30, 144, 255).
كيف أضيف الشفافية إلى لون HEX؟
أضف زوجًا رابعًا من الأرقام في النهاية: #RRGGBBAA. اضرب نسبة العتامة في 255، وقرّب الناتج، وحوّله إلى HEX، فتكون 50% هي 80، و25% هي 40، و75% هي bf. مثلًا، #1e90ff80 هو لون dodgerblue بعتامة 50% تقريبًا.
كم تساوي شفافية 50% في HEX؟
عتامة 50% في HEX هي 80، كما في #00000080 للأسود نصف الشفاف. والقيمة 80 تساوي 128 من 255، أي 50.2%، لأن ألفا في HEX لها 256 خطوة، و50% بالضبط تقع بين 7f و80.
ما الفرق بين HEX وRGB؟
لا فرق في اللون، بل في طريقة الكتابة فقط. تكتب HEX قيم الأحمر والأخضر والأزرق أزواجًا بالنظام الست عشري، وتكتبها rgb() أرقامًا عشرية من 0 إلى 255، فـ#ff6347 وrgb(255, 99, 71) هما لون الطماطم الأحمر نفسه.
هل تميز أكواد ألوان HEX بين الأحرف الكبيرة والصغيرة؟
لا. فـ#FF6347 و#ff6347 و#Ff6347 لون واحد في CSS وHTML وSVG وأدوات التصميم. تستخدم معظم مشاريع CSS الأحرف الصغيرة، لكن أي أسلوب يصلح ما دام ثابتًا.
ما كود HEX للرمادي المتوسط؟
#808080 هو المنتصف الرقمي، لكنه يبدو أفتح من المنتصف، إذ تبلغ إضاءته في OKLCH القيمة 0.600. أما الرمادي الذي يبدو في منتصف المسافة بين الأسود والأبيض فيقع بين #636363 (OKLCH L 0.5) و#777777 (CIELAB L* 50).