تحويل HEX إلى RGB Hexadecimal ↔ Red Green Blue مجاناً عبر الإنترنت آمن

لماذا تحوّل HEX إلى RGB

تعطيك أداة التصميم اللون بصيغة ‎#5A4632. وتطلبه ورقة الأنماط أو سكربت اللوحة أو مكتبة الرسوم البيانية أو برنامج الرسوميات بصيغة rgb(90, 70, 50). هما اللون نفسه، ويظهر عمل الانتقال من كتابة إلى أخرى طوال الوقت: دليل علامة يسرد رموز hex وشيفرتك تحتاج إلى أرقام لحساب درجة أفتح، وعميل يرسل لوناً من شعار وعليك أن تملأ rgba() بالشفافية، ومكتبة تقبل ثلاث قيم منفصلة فقط. وتحويل HEX إلى RGB مهمة صغيرة، ومحوّل موثوق يوفر عليك الحساب في الأساس ستة عشر في رأسك والخطأ فيه.

التحويل دقيق، وهذا ليس صحيحاً لكل تحويل لوني. فـhex وrgb() كتابتان للأرقام الثلاثة نفسها، مقادير الضوء الأحمر والأخضر والأزرق التي ينبغي أن تبعثها الشاشة، كل منها من 0 إلى 255. لا شيء يُقرّب، والرحلة ذهاباً وإياباً تعيد ما بدأت به. تجري هذه الصفحة ذلك في متصفحك ولا يُرفع شيء. وستجد أدناه كيف تُحوَّل خانات hex إلى الأرقام الثلاثة، وكيف تنتقل الشفافية، وماذا يفعل الشكل المختصر، وحدود sRGB، والمواقف التي يحتاج فيها المطورون والمصممون إلى تحويل HEX إلى RGB.

كيف يعمل التحويل

ثلاثة أزواج من الخانات تصير ثلاثة أرقام

لون hex هو علامة # تتبعها ست خانات ستة عشرية، تُقرأ أزواجاً: الزوج الأول للأحمر والثاني للأخضر والثالث للأزرق. وكل زوج رقم في الأساس ستة عشر بين 00 وFF، أي من 0 إلى 255 في النظام العشري الذي تستخدمه كل يوم. فـ‎#5A4632 يتفكك إلى 5A و46 و32. و5A هو 5 × 16 + 10 = 90، و46 هو 4 × 16 + 6 = 70، و32 هو 3 × 16 + 2 = 50. فاللون rgb(90, 70, 50)، وهو المثال الذي تبدأ به الصفحة.

لماذا تمتد الخانات من 0 إلى F

يحتاج الأساس ستة عشر إلى ستة عشر رمزاً، فبعد 9 تأتي الحروف من A إلى F، وتمثل 10 إلى 15. وزوج من هذه الخانات يعطي 16 × 16 = 256 قيمة، وهو بالضبط ما يتسع له بايت واحد. ولون الشاشة ثلاثة بايتات، وhex ببساطة طريقة مدمجة لكتابتها: ستة أحرف بدل ثلاثة أرقام بفواصل وأقواس.

الأحرف الكبيرة والصغيرة

‎#5a4632 و‎#5A4632 اللون نفسه. يقبل CSS أيّاً منهما، وكذلك هذا المحوّل. اختر قاعدة واحدة لمشروع والزمها، لأن اختلاط الحالات يجعل البحث في ورقة الأنماط أصعب.

ما يحتفظ به التحويل وما لا يستطيع

يحتفظ باللون بدقة

hex وrgb() كتابتان للأرقام الثلاثة نفسها، من 0 إلى 255 للأحمر والأخضر والأزرق، فلا شيء يُقرّب والرحلة ذهاباً وإياباً تعيد ما بدأت به. حوّل HEX إلى RGB ثم عد، فيكون لديك الرمز نفسه الذي بدأت به، باستثناء محتمل في الأحرف الكبيرة.

ينقل الشفافية

وتُنقل أيضاً قيمة رابعة للشفافية: يصير ‎#RRGGBBAA إلى rgba()، والعكس. والزوج الأخير هو قناة ألفا، من 00، شفاف تماماً، إلى FF، معتم تماماً. فـ‎#5A463280 هو rgba(90, 70, 50, 0.5)، لأن 80 في hex هي 128، و128 من 255 تقارب النصف. وتقبل كل المتصفحات الحالية ثماني خانات.

لا يستطيع وصف ألوان خارج sRGB

تصف الكتابتان sRGB، الفضاء اللوني الذي تستخدمه الشاشات منذ ثلاثين سنة. ولا تستطيعان وصف لون خارجه، وهذا ما وُجدت له الصيغ الأحدث في CSS: lab() وoklch() وcolor(). تستطيع الشاشات الحديثة عرض ألوان أكثر تشبعاً مما يحويه sRGB، والمصمم الذي اختار لوناً كهذا في أداة واسعة المدى سيراه مقصوصاً إلى sRGB حين يُكتب بصيغة hex.

يُوسَّع الاختصار ولا يُحفظ

يُوسَّع الاختصار ولا يُحفظ: ‎#abc يعود ‎#AABBCC، وهو اللون نفسه مكتوباً بالطريقة الطويلة. تُضاعف كل خانة. وهذا يعني أنك تستطيع لصق رمز من ثلاث خانات والحصول على الأرقام الصحيحة، لكنك لا تستطيع استعادة الكتابة القصيرة من الطويلة بالنظر، بل بالتحقق من أن كل زوج مكرر.

ألوان شائعة وأرقامها

بعضها يستحق التذكر

الأبيض ‎#FFFFFF، أي rgb(255, 255, 255): الأضواء الثلاثة كلها بكامل القدرة. والأسود ‎#000000، أي rgb(0, 0, 0): لا ضوء إطلاقاً. والأحمر النقي ‎#FF0000 والأخضر ‎#00FF00 والأزرق ‎#0000FF. والرمادي المتوسط أي رمز فيه ثلاثة أزواج متساوية، مثل ‎#808080، أي rgb(128, 128, 128). فالأزواج المتساوية تعني دائماً رمادياً، لأن مقادير متساوية من الأضواء الثلاثة لا تعطي صبغة.

قراءة رمز بنظرة

حين تعرف النمط تستطيع تقدير اللون من خانات hex. فالرمز الذي يبدأ بزوج أول مرتفع مائل إلى الحمرة، وزوج أوسط مرتفع مائل إلى الخضرة، وزوج أخير مرتفع مائل إلى الزرقة. و‎#FF8800 فيه كثير من الأحمر وبعض الأخضر ولا أزرق، وهو البرتقالي. لا تحتاج إلى أداة لهذا، لكنك تحتاج إليها للأرقام الدقيقة.

كيف تحوّل HEX إلى RGB هنا

اكتب رمز hex أو الصقه

أدخل اللون في الحقل الأول، بعلامة # أو بدونها. وتُقبل صيغ الثلاث والست والثماني خانات.

اقرأ قيمة rgb

يظهر الجواب فوراً في الحقل الآخر، بصيغة rgb(90, 70, 50)، أو rgba() إن حمل الرمز شفافية. وتعرض الصفحة الجملة ‎#5A4632 = rgb(90, 70, 50) لتتحقق بنظرة.

انسخه إلى شيفرتك

الصق النتيجة في ورقة الأنماط أو السكربت أو الأداة التي طلبتها. وإذا احتجت إلى الأرقام الثلاثة منفصلة فهي التي بين القوسين.

من أين تأتي هذه الصيغ

hex وRGB هما الشيء نفسه مكتوباً مرتين

لون الشاشة ثلاثة أرقام، كم من الضوء الأحمر والأخضر والأزرق يُبعث، كل منها من 0 إلى 255، أي بايت واحد. ويكتب hex ببساطة هذه البايتات في الأساس ستة عشر، فـ‎#FF8800 وrgb(255, 136, 0) هما التعليمة نفسها للبكسل نفسه.

HSL وCMYK

اخترع HSL لأن أياً منهما لا يقرؤه الإنسان: فهو يعطي الصبغة زاوية حول عجلة ألوان، مع التشبع والإضاءة نسباً مئوية، ليستطيع المصمم أن يجعل شيئاً أفتح دون إعادة حساب ثلاثة أرقام. أما CMYK فتنتمي إلى عالم مختلف تماماً، حبر لا ضوء. وهي طرحية، مبنية من أربعة ألواح طباعة، ولا تبلغ كل لون تبلغه الشاشة، لأن الشاشة تبعث الضوء بينما الورق يعكسه فقط. وللاثنين انظر HEX إلى HSL وHEX إلى CMYK.

أين تلتقي بها

في أوراق الأنماط

hex هو ما تكتبه في ورقة الأنماط وما تسلمه لك أداة التصميم. ويظهر RGB حيثما يحتاج اللون إلى حساب: التدرجات والشفافية والشيفرة التي تحسب درجة. ومعرفة الكتابتين والقدرة على الانتقال بينهما جزء من عمل الواجهات اليومي.

في السكربتات ورسم اللوحة

غالباً ما تريد شيفرة الرسم الأرقام الثلاثة منفصلة، لمزج لونين أو لتغميق واحد بمقدار ثابت أو لاختبار هل يطابق بكسل هدفاً. وتحويل HEX إلى RGB يعطيك الأرقام مباشرة.

في أدوات الرسوميات والصور

تعرض محررات الصور عادةً اللون ثلاثة أرقام أو رمز hex، وتتيح لك كتابة أيهما. والانتقال بين الاثنين يتيح لك إعادة إنتاج لون من صفحة ويب في برنامج يريد أرقاماً.

في الوثائق وأدلة العلامات

قد يسرد دليل علامة لوناً بصيغة hex للويب وبصيغة RGB للشاشات وبصيغة CMYK للطباعة. وجعل الأولين متفقين مسألة تحويل واحد، وهو من الفحوص التي تلتقط خطأً مطبعياً قبل أن يُطبع على ألف نشرة.

استخدامات عملية لصيغة RGB

شفافية دون لون ثانٍ

مع rgba(90, 70, 50, 0.5) تحصل على اللون بنصف قوته، فيظهر ما خلفه. وهي الطريقة المعيارية لصنع التراكبات والظلال والخلفيات الملونة من لون علامة دون ابتكار لون جديد.

حساب درجات أفتح وأغمق

لجعل حالة التمرير أغمق قليلاً يستطيع سكربت أن يطرح مقداراً ثابتاً من كل من الأرقام الثلاثة. وفعل الشيء نفسه على سلسلة hex مرهق؛ وعلى rgb هو حساب بسيط. وإذا احتجت إلى تعديل قائم على الصبغة فحوّل HEX إلى HSL بدلاً من ذلك.

فحوص التباين

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

فخاخ عند تحويل HEX إلى RGB

نسيان زوج ألفا

الرمز ذو الثماني خانات فيه الشفافية في الخانتين الأخيرتين. وإذا حذفتهما فقدتها. تحقق من طول الرمز قبل أن تقرر أن النتيجة هي اللون.

خلط الترتيب

hex هو أحمر وأخضر وأزرق. وتستخدم بعض الصيغ، وبعض واجهات الرسوميات القديمة، أزرق وأخضر وأحمر. فإذا خرج لون خطأً في برنامج معين فتحقق من ترتيب قنواته.

النسخ من لقطة شاشة

اللون المقروء من لقطة شاشة هو اللون بعد إدارة ألوان الشاشة وأي ضغط. وقد يختلف قليلاً عن اللون في الملف الأصلي. استخدم ملف التصميم متى استطعت.

افتراض أن الشاشات متفقة

تعرض شاشتان الرمز نفسه بشكل مختلف قليلاً. الأرقام دقيقة؛ وما تراه يتوقف على الشاشة وملف تعريفها.

أسئلة يطرحها الناس قبل التحويل

ما هو ‎#FF0000 في RGB؟

rgb(255, 0, 0)، أحمر نقي.

ما هو ‎#FFFFFF في RGB؟

rgb(255, 255, 255)، أبيض.

هل أستطيع تحويل رمز من ثلاث خانات؟

نعم. تُضاعف كل خانة: ‎#09C يصير ‎#0099CC، وهو rgb(0, 153, 204).

هل التحويل دقيق؟

نعم. هما كتابتان للأرقام الثلاثة نفسها.

هل يُرفع لوني؟

لا. يجري الحساب في متصفحك ولا يُرسل شيء إلى أي مكان.

كيف أعود؟

بـRGB إلى HEX، الذي يكتب الأرقام الثلاثة رمز hex.

الاختيار الحكيم عند تحويل HEX إلى RGB

اعرف ما تحتاج إليه بعد ذلك

إذا احتجت إلى الشفافية فـrgba() هي الصيغة الطبيعية. وإذا احتجت إلى تعديل الإضاءة أو الصبغة فـHSL أسهل. وإذا كان اللون سيُطبع فـCMYK هي الخطوة التالية، مع التحفظات التي يحملها ذلك التحويل. انظر RGB إلى CMYK.

احتفظ بـhex أصلاً رئيسياً

للألوان في لوحة علامة احتفظ برمز hex مرجعاً. فهو قصير لا لبس فيه ومفهوم في كل مكان. واشتق الصيغ الأخرى منه حين تحتاج إليها.

استخدم الخصائص المخصصة

في CSS عرّف الألوان مرة واحدة، مثل --brand: ‎#5A4632، وأشر إليها بالاسم. وإذا احتجت إلى الأرقام لـrgba() فعرّف أيضاً --brand-rgb: 90 70 50. فيُنجز التحويل مرة واحدة.

CSS الحديث وصيغة RGB

الصياغة المفصولة بمسافات

يقبل CSS الحالي rgb() بمسافات وشرطة مائلة للشفافية، كما في rgb(90 70 50 / 50%). والأرقام هي نفسها في صيغة الفواصل، فتعمل نتيجة التحويل في الصيغتين. وتتوقع المتصفحات الأقدم وبعض الأدوات الفواصل، فتبقى صيغة الفواصل الخيار الآمن حين لا تعرف أين سيُستخدم اللون.

النسب المئوية والكسور

يمكن أن يُكتب RGB أيضاً بنسب مئوية، مثل rgb(35% 27% 20%)، حيث 100 بالمئة هي 255. وتعطي الصفحة أعداداً صحيحة لأنها ما يخزنه hex وما تتوقعه معظم الأدوات. وإذا احتجت إلى نسب مئوية فاقسم كل رقم على 255 واضرب في 100.

خصائص مخصصة للأرقام الثلاثة

حيلة شائعة هي تخزين الأرقام الثلاثة فقط في خاصية مخصصة، --brand-rgb: 90 70 50، واستخدامها هكذا rgb(var(--brand-rgb) / 0.5). فيخدم تعريف واحد الاستخدامين المصمت والشفاف. وحين تحوّل HEX إلى RGB لهذا الغرض فانسخ الأرقام وحدها من الجواب.

العمل مع اللون عملياً

تحقق مقابل دليل العلامة

إذا أعطى دليل علامة hex وrgb للون نفسه فحوّل أحدهما وقارن بالآخر. وعدم التطابق يعني عادةً خطأً مطبعياً في الدليل، والعثور عليه قبل استخدامه في كل صفحة يستحق الدقيقة التي يستغرقها.

احتفظ بلوحة في قائمة قصيرة

تستخدم معظم المواقع من خمسة إلى ثمانية ألوان. اكتبها في ملاحظة بالصيغتين. وفي كل مرة تحتاج فيها إلى تحويل HEX إلى RGB لمكوّن جديد تستطيع أن تبحث عنه بدل حسابه من جديد، وتبقى اللوحة متسقة.

سمِّ الألوان بحسب دورها

أسماء مثل primary وsurface وwarning تنجو من إعادة التصميم أفضل من أسماء مثل أخضر أو بني. التحويل يعطيك الأرقام؛ والاسم يقول لماذا هي.

محوّلات ذات صلة

تغطي أسرة الأدوات نفسها التحويلات المجاورة. وللعودة استخدم RGB إلى HEX. وللألوان الموصوفة بالصبغة فإن HEX إلى HSL وHSL إلى HEX في المتناول، وللطباعة HEX إلى CMYK وCMYK إلى HEX وCMYK إلى RGB. وللأحجام في ورقة الأنماط نفسها فإن px إلى rem وpx إلى em تفعلان للأطوال ما تفعله هذه الصفحة للألوان.

مثال محلول

لنفترض أن لون علامتك ‎#1E7A5C وتريد نسخة شفافة لخلفية بطاقة. تكتب الرمز وتقرأ rgb(30, 122, 92). وفي ورقة الأنماط تكتب background: rgba(30, 122, 92, 0.12)، وهي تدرج خفيف جداً من الأخضر نفسه، وحداً rgba(30, 122, 92, 0.4). فتستقر البطاقة براحة على صفحة بيضاء وعلى رمادية، لأن الشفافية تدع الصفحة تظهر. وحين يتغير لون العلامة لاحقاً تستبدل الأرقام الثلاثة في خاصية مخصصة واحدة فيتبعها كل تدرج.

قائمة تحقق قصيرة

قبل التحويل

تحقق من طول الرمز: ثلاث أو ست أو ثماني خانات. وقرر هل تحتاج إلى الشفافية.

أثناء التحويل

الصق الرمز واقرأ قيمة rgb وانسخها مع قوسيها، أو الأرقام الثلاثة وحدها.

بعد التحويل

اختبر اللون في السياق، على الخلفية الحقيقية، وافحص تباين أي نص يقع عليه.

أخطاء شائعة

إسقاط زوج الشفافية

ثماني خانات تعني ألفا. احتفظ بها أو حوّلها إلى rgba().

خلط ترتيب القنوات

hex يبدأ بالأحمر. وبعض الأدوات تتوقع الأزرق أولاً.

اعتبار الشاشة هي الحقيقة

الأرقام دقيقة. والمظهر يتوقف على الشاشة.

ألوانك تبقى على جهازك

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

الخلاصة

لتحويل HEX إلى RGB هنا، اكتب رمز hex أو الصقه واقرأ قيمة rgb فوراً. يحتفظ التحويل باللون بدقة: فـhex وrgb() كتابتان للأرقام الثلاثة نفسها، من 0 إلى 255 للأحمر والأخضر والأزرق، فلا شيء يُقرّب والرحلة ذهاباً وإياباً تعيد ما بدأت به. وتُنقل أيضاً قيمة رابعة للشفافية، إذ يصير ‎#RRGGBBAA إلى rgba()، والعكس. وتصف الكتابتان sRGB، فلا تستطيعان وصف ألوان خارجه، ويُوسَّع الاختصار ولا يُحفظ: ‎#abc يعود ‎#AABBCC. ولا شيء يُرفع.