تحويل RGB إلى HEX Red Green Blue ↔ Hexadecimal مجاناً عبر الإنترنت آمن
اكتب قيمةً بـRGB فتقرأها في الحال بـHEX. يجري الحساب داخل متصفحك، ولا يُرسَل شيء إلى أي مكان، وما يتوقف عليه الجواب مكتوبٌ أدناه لا مفترَض.
لا رفع لأي ملف
من أين جاءت هذه الكتابات
الست عشري وRGB شيءٌ واحد كُتب مرتين. فلون الشاشة ثلاثة أعداد — كم يُبَثّ من الضوء الأحمر والأخضر والأزرق — كلٌّ منها من 0 إلى 255، أي بايت واحد؛ والست عشري يكتب تلك البايتات بالأساس ستة عشر لا غير، فـ#FF8800 وrgb(255, 136, 0) أمرٌ واحد لبكسلٍ واحد. وقد ابتُكر HSL لأن أياً منهما غير مقروءٍ لإنسان: فهو يعطي الصبغة زاويةً على عجلة الألوان، والإشباع والإضاءة نسبتين مئويتين، فيستطيع المصمم أن يُفتِّح لوناً دون أن يعيد حساب ثلاثة أرقام. أما CMYK فمن عالمٍ آخر بالكلية — عالم الحبر لا الضوء. وهو طرحي، مبنيٌّ على أربع ألواح طباعة، ولا يبلغ كل لونٍ تستطيعه الشاشة، لأن الشاشة تبعث الضوء والورق لا يردّه إلا رداً.
أين تصادفها
الست عشري هو ما تكتبه في صحيفة الأنماط وما تناولك إياه أداةُ التصميم. وRGB يظهر حيثما احتاج اللون إلى حساب: التدرجات، والشفافية، وشيفرةٌ تحسب درجةً. وإلى HSL تمتد اليد حين تضبط لوحة ألوانٍ يدوياً، لأن التغييرات المرادة عادةً تغييرٌ في واحدٍ من أعداده الثلاثة. وCMYK هو ما تطلبه المطبعة، والتحويل إليه هو اللحظة التي يكفّ فيها التصميم عن أن يكون ضوءاً ويصير حبراً.
أسئلة متكررة
لماذا تختلف نتيجة CMYK عندي عما تعطيني إياه المطبعة؟
لأنه ليس ثمة تحويلٌ واحد صحيح. فالحساب في هذه الصفحة هو الحساب البسيط المستقل عن الجهاز، وهو الجواب الصحيح حين تحتاج نقطة بدايةٍ أو مكافئاً تقريبياً. أما المطبعة فتحوّل عبر ملفٍّ لونيّ يراعي الحبر والورق والآلة بأعيانها، واللون RGB نفسه يعطي قيم CMYK على الورق اللامع غير ما يعطيه على غير المطليّ. فلكل ما يجب أن يتطابق، اطلب من المطبعة ملفَّها بدل الثقة بمعادلة.
لماذا يتعذّر طبع بعض ألوان الشاشة؟
لأن الاثنين لا يبلغان الألوان نفسها. فالشاشة تصنع اللون بجمع الضوء، وتستطيع سماويّاً أو أخضر زاهياً مشبعاً لا يجاريه الحبر؛ والورق يصنع اللون بامتصاص الضوء، وأسطع ما يبلغه هو بياض الصفحة. وتُسمّى مجموعةُ الألوان التي يبلغها كلٌّ منهما «المدى»، وحيث لا يتداخلان يضطر التحويل إلى اختيار أقرب لونٍ متاح. ولهذا كثيراً ما يبدو اللون الزاهي على الشاشة أبهتَ قليلاً في الطباعة.
هل الجواب دقيق؟
حيث تُعرَّف الوحدتان إحداهما بالأخرى بأعداد صحيحة، نعم — وتقول الصفحة ذلك فوق الرقم، والتقريب الوحيد في عدد المنازل المعروضة. وحيث لا تكون النسبة عشرية منتهية، تعرض الصفحة اثنتي عشرة رقماً معنوياً وتقول إن العلاقة تقريبية، بدل أن تدّعي غير ذلك.
هل يغادر جهازي شيءٌ مما أكتبه؟
لا. الحساب يجري في متصفحك؛ لا يُرفَع شيء، ولا خادم أصلاً ليُرفَع إليه. حمِّل الصفحة مرة واحدة وتبقى تعمل والشبكة مطفأة.
لماذا تحوّل RGB إلى HEX
يعطيك محرر الصور أو منتقي الألوان في نظام التشغيل أو سطر من الشيفرة لوناً على شكل ثلاثة أرقام: 90, 70, 50. أما ورقة الأنماط أو ملف رموز التصميم أو رسالة إلى زميل فتريده رمزاً قصيراً واحداً: #5A4632. والخطوة بينهما هي ما تفعله هذه الصفحة. فتحويل RGB إلى HEX هو كتابة الأرقام الثلاثة نفسها في الأساس ستة عشر، بخانتين لكل رقم، ووضع علامة الهاش في المقدمة. وهو سهل للون واحد ومرهق لعشرين لوناً، وسهل الخطأ حين يحتاج رقم إلى صفر بادئ أو تكون الخانة حرفاً.
التحويل دقيق، وهذا ليس صحيحاً في كل تحويل لوني. فـ hex وrgb() كتابتان لثلاثة الأرقام نفسها، مقادير الضوء الأحمر والأخضر والأزرق التي ينبغي للشاشة أن تبعثها، كل منها من 0 إلى 255. لا شيء يُقرَّب، والذهاب والعودة يعيدان ما بدأ به. تجري الصفحة ذلك في متصفحك ولا يُرفع شيء. ستجد في الأسفل كيف يصبح كل رقم خانتي hex، وكيف تُنقل الشفافية، وحدود sRGB، والأماكن التي يحتاج فيها الناس إلى تحويل RGB إلى HEX، وبضع عادات تُبقي الألوان متسقة في مشروع.
كيف يعمل التحويل
كل رقم يصبح خانتي hex
خذ rgb(90, 70, 50). اقسم كل رقم على ستة عشر: 90 هي 5 في 16 زائد 10، و10 هي الخانة A، فتصبح 90 هي 5A. و70 هي 4 في 16 زائد 6، أي 46. و50 هي 3 في 16 زائد 2، أي 32. اجمع الأزواج الثلاثة معاً وأضف علامة الهاش: #5A4632. تفعل الصفحة ذلك لك أثناء الكتابة، وتعرض الجملة rgb(90, 70, 50) = #5A4632 لتتحقق منها.
الأصفار البادئة
يجب أن يكون لكل زوج خانتان. والرقم الأقل من 16 يحتاج إلى صفر في المقدمة: فـ 7 تصبح 07، و0 تصبح 00. وعليه فإن rgb(0, 7, 255) هو #0007FF، لا #07FF الذي يعني شيئاً مختلفاً تماماً. ونسيان الصفر هو الخطأ الأكثر شيوعاً عند التحويل يدوياً.
المدى
يجب أن يقع كل رقم بين 0 و255. فالقيمة فوق 255 لا يمكن كتابتها في خانتي hex، والقيمة السالبة لا معنى لها. وإذا أنتج حساب في شيفرتك 270 أو −5، فقيّده بالمدى أولاً. والمحوّل يفعل الشيء نفسه، حتى لا ينتج رمزاً غير صالح.
ما يحفظه التحويل وما لا يستطيعه
يحفظ اللون تماماً
hex وrgb() كتابتان لثلاثة الأرقام نفسها، من 0 إلى 255 للأحمر والأخضر والأزرق، فلا شيء يُقرَّب والذهاب والعودة يعيدان ما بدأ به. حوّل RGB إلى HEX وارجع وستحصل على الأرقام التي بدأت بها.
ينقل الشفافية
وتُنقل أيضاً قيمة رابعة للشفافية: فـ #RRGGBBAA يصبح rgba() والعكس. وشفافية 0.5 تصبح الزوج 80، لأن نصف 255 نحو 128، وهو 80 بنظام hex. فـ rgba(90, 70, 50, 0.5) هو #5A463280. وتقبل جميع المتصفحات الحالية hex المؤلف من ثماني خانات.
لا يستطيع وصف ألوان خارج sRGB
تصف الكتابتان sRGB، الفضاء اللوني الذي تستخدمه الشاشة منذ ثلاثين عاماً. ولا تستطيعان وصف لون خارجه، وهذا ما وُجدت لأجله صيغ CSS الأحدث، lab() وoklch() وcolor(). فإذا بدأت من لون في أداة ذات نطاق واسع، فإن الأرقام الثلاثة التي تنسخها هي بالفعل نسخة sRGB، وhex أمين لها.
لا يحافظ على الاختصار
حيث يمكن كتابة رمز بثلاث خانات، مثل #AABBCC على أنه #ABC، يعطي المحوّل الصيغة الطويلة. والصيغة الطويلة صالحة دائماً وتمثل اللون نفسه؛ أما القصيرة فمجرد راحة للقارئ.
ألوان شائعة ورموزها
بعضها يستحق التذكر
rgb(255, 255, 255) هو #FFFFFF، الأبيض: الأضواء الثلاثة بكامل قوتها. وrgb(0, 0, 0) هو #000000، الأسود: لا ضوء على الإطلاق. وrgb(255, 0, 0) هو #FF0000، الأحمر الخالص؛ وrgb(0, 255, 0) هو #00FF00 وrgb(0, 0, 255) هو #0000FF. وأي لون فيه ثلاثة أرقام متساوية هو رمادي، ورمزه ثلاثة أزواج متساوية: rgb(128, 128, 128) هو #808080.
عادة الألوان الآمنة للويب
تحدثت الأدلة الأقدم عن ألوان آمنة للويب، لا تكون أزواجها إلا 00 أو 33 أو 66 أو 99 أو CC أو FF. وهي تنتمي إلى أيام شاشات الـ 256 لوناً، ولا سبب لبقائها. استخدم أي قيمة تشاء؛ فالشاشة تستطيع عرضها كلها.
كيف تحوّل RGB إلى HEX هنا
اكتب الأرقام الثلاثة
أدخل اللون في الحقل الأول بالصيغة rgb(90, 70, 50)، أو بأرقام مفصولة بفواصل أو مسافات. لا حاجة إلى النسب المئوية؛ استخدم أرقاماً من 0 إلى 255.
اقرأ رمز hex
يظهر الجواب فوراً في الحقل الآخر، يبدأ بعلامة هاش، بأحرف كبيرة. وإذا أعطيت قيمة رابعة للشفافية فإن الرمز يكون من ثماني خانات.
انسخه إلى عملك
الصق الرمز في ورقة الأنماط أو ملف الرموز أو الرسالة. وأضفه إلى ملاحظة لوحتك ليصبح التحويل التالي بحثاً.
من أين تأتي هذه الصيغ
Hex وRGB شيء واحد مكتوب مرتين
لون الشاشة ثلاثة أرقام، كم من الضوء الأحمر والأخضر والأزرق يُبعث، كل منها من 0 إلى 255، وهذا بايت واحد. وhex يكتب تلك البايتات ببساطة في الأساس ستة عشر، ولذلك فإن #FF8800 وrgb(255, 136, 0) هما التعليمة نفسها إلى البكسل نفسه.
HSL وCMYK
اخترع HSL لأن أياً منهما لا يقرؤه الإنسان بسهولة: فهو يعطي الصبغة زاوية حول عجلة ألوان، والتشبع والإضاءة نسباً مئوية، ليتمكن المصمم من جعل شيء أفتح دون إعادة حساب ثلاثة أرقام. أما CMYK فينتمي إلى عالم مختلف تماماً، الحبر بدلاً من الضوء. إنه طرحي، مبني من أربعة ألواح طباعة، ولا يستطيع بلوغ كل لون تبلغه الشاشة، لأن الشاشة تبعث الضوء بينما الورق يعكسه فقط. انظر من HEX إلى HSL ومن RGB إلى CMYK.
أين تصادفها
في تسليم التصميم
يعمل المصمم في محرر يعرض قيم rgb أو في منتقٍ؛ ويحتاج المطور إلى hex لورقة الأنماط. وتحويل RGB إلى HEX هو الخطوة في الوسط، ويُجرى لكل لون في لوحة.
في السكربتات التي تحسب الألوان
السكربت الذي يمزج لونين أو يغمّق لوناً يعمل بالأرقام وينتهي بثلاثة منها. ولاستخدام النتيجة في ورقة أنماط أو لعرضها، يجب كتابتها رمز hex. وتنفيذ ذلك يدوياً في الشيفرة بضعة أسطر؛ والتحقق من النتيجة بمحوّل أسرع.
في تصور البيانات
تقبل مكتبات المخططات الألوان نصوص hex. والألوان التي تولّدها طرق عددية تخرج ثلاثيات rgb. وخطوة التحويل تحوّل أحدهما إلى الآخر.
في المستندات والعروض
تعرض برامج المكتب الألوان أرقام RGB؛ ومحررات الويب تريد hex. وحين يجب أن يظهر لون علامة تجارية في الاثنين، يُبقيهما التحويل متطابقين.
أفخاخ حين تحوّل RGB إلى HEX
نسيان الصفر البادئ
كتابة 7 على أنها 7 لا 07 تزيح كل خانة بعدها. استخدم دائماً خانتين لكل زوج.
الخلط بين النسبة المئوية و0 إلى 255
rgb(35%, 27%, 20%) كتابة مختلفة للأرقام، حيث 100 في المئة هي 255. فإذا كان مصدرك يستخدم نسباً مئوية، فحوّلها إلى 0 إلى 255 أولاً: اضرب في 2.55.
أخطاء التقريب في الألوان المحسوبة
السكربت الذي ينتج 127.5 يجب أن يقرر هل هي 127 أم 128. والفرق غير مرئي، لكنه ينتج رمزين لما ظننته لوناً واحداً. قرّب بالطريقة نفسها في كل مكان.
أخذ اللون من لقطة شاشة
اللون المقروء من لقطة شاشة مرّ بإدارة ألوان الشاشة وربما بالضغط. وقد يختلف بخطوة أو اثنتين عن المصدر. استخدم ملف التصميم حين تستطيع.
أسئلة يطرحها الناس قبل التحويل
كم يساوي rgb(255, 0, 0) بنظام hex؟
#FF0000، الأحمر الخالص.
كم يساوي rgb(0, 0, 0) بنظام hex؟
#000000، الأسود.
هل أستطيع استخدام الأحرف الصغيرة في رمز hex؟
نعم. #5a4632 و#5A4632 هما اللون نفسه. وتكتب الصفحة بأحرف كبيرة.
هل التحويل دقيق؟
نعم. إنه كتابتان لثلاثة الأرقام نفسها.
هل يُرفع لوني؟
لا. تجري العملية الحسابية في متصفحك ولا يُرسَل شيء إلى أي مكان.
كيف أعود؟
باستخدام من HEX إلى RGB، التي تقرأ الأزواج الثلاثة أرقاماً.
عادات تُبقي الألوان متسقة في مشروع
عرّف كل لون مرة واحدة
ضع لوحتك في خصائص مخصصة، مثل --brand: #5A4632، وأشر إلى الألوان بالاسم. وحين تحوّل RGB إلى HEX للون جديد تضيف سطراً واحداً، ويتبعه كل استخدام.
اختر حالة واحدة للأحرف
اختر الأحرف الكبيرة أو الصغيرة لرموز hex والتزم بها. فيصبح البحث عن لون في الشيفرة موثوقاً.
سجّل المصدر
بجانب كل لون دوّن من أين جاء: دليل العلامة التجارية، أو شعار، أو صورة مأخوذة منها عينة. وحين يُطرح سؤال هل اللون صحيح، تعرف أين تتحقق.
اختبر التباين
للنص على خلفية ملونة، افحص نسبة التباين بأداة. فالأرقام من صيغة rgb تدخل مباشرة في المعادلة، وصيغة hex هي ما تكتبه في معظم أدوات الفحص.
لماذا 256 خطوة، وما الذي وراء الأرقام
ثماني خانات ثنائية لكل ضوء
يُخزَّن كل من الأرقام الثلاثة في ثماني خانات ثنائية، ما يتيح 256 قيمة من 0 إلى 255. وثلاثة منها معاً تعطي 256 × 256 × 256، أي نحو 16.7 مليون تركيبة، وهو أكثر مما تستطيع العين التمييز بينه في معظم الظروف. وهذا هو سبب كون رموز hex من ست خانات بالضبط: اثنتان لكل ضوء، لا أكثر ولا أقل. وحين تحوّل RGB إلى HEX فأنت تكتب ثلاثة بايتات بأكثر الصيغ إيجازاً التي اتفق عليها الناس.
لماذا لا تبدو الخطوات المتساوية متساوية
الأرقام ليست متناسبة مع الضوء الذي يصل إلى عينك. فالشاشات تطبق منحنى، قريباً من القوة 2.2، بحيث تنال الدرجات الداكنة من الخطوات الـ 256 أكثر مما تناله الساطعة، وهذا يناسب العين. والخطوة من 10 إلى 20 تبدو تغيراً أكبر من الخطوة من 240 إلى 250. ويعني هذا لك أن متوسط لونين بأخذ متوسط أرقامهما لا يعطي اللون الذي سترى لو مزجت الأضواء، وهي حقيقة تهم حين تحسب التدرجات والمزج في الشيفرة.
الرماديات والقطر
تقع كل الرماديات على الخط الذي تتساوى فيه الأرقام الثلاثة. وعددها 256، من الأسود عند 0 إلى الأبيض عند 255. وإذا حوّلت RGB إلى HEX وتطابقت الأزواج الثلاثة، فأنت تعرف فوراً أن اللون بلا صبغة. وشبه الرمادي الذي تختلف أزواجه بخطوة أو اثنتين له صبغة خافتة، يستخدمها المصممون غالباً لإعطاء لون محايد لمسة دفء أو برودة.
بناء لوحة وفحصها
من حفنة ألوان منتقاة إلى لوحة
تضم اللوحة المعتادة لوناً أساسياً ولوناً مميِّزاً ولوناً محايداً للنص ومحايداً أفتح للأسطح ولوناً أو لونين للإشارة، للنجاح والخطأ. اختر كلاً منها في أداة التصميم، واقرأ أرقام rgb الخاصة به، وحوّل RGB إلى HEX لورقة الأنماط. واكتبها خصائص مخصصة بأسماء تصف الدور، فتصبح اللوحة جاهزة للاستخدام في كل مكوّن.
التباين بين النص والخلفية
يحتاج النص المقروء إلى فرق كافٍ في السطوع بين الحروف وخلفيتها. وتحدد إرشادات إمكانية الوصول نسبة تباين تُحسب من قيم الأحمر والأخضر والأزرق للونين، وتطلب 4.5 إلى 1 على الأقل للنص العادي. وتقبل أدوات الفحص رموز hex، فيمكن للرموز التي تنتجها هنا أن تذهب إليها مباشرة. افحص كل اقتران تخطط لاستخدامه، لا اللون الأساسي على الأبيض فحسب.
تحويل قائمة
حين يكون عندك ألوان كثيرة للتحويل، اعمل عليها واحداً واحداً والصق كل نتيجة في جدول باسمها واستخدامها. يستغرق ذلك دقيقة لكل لون، ويصبح الجدول المرجع للمشروع كله. وإذا عُدّل لون لاحقاً فلا يتغير إلا صفه.
إبقاء hex وrgb متوافقين
إذا كان مشروعك يخزّن بعض الألوان بـ hex وبعضها بـ rgb، فمن السهل أن تتباعد حين يعدّل أحدهم أحدهما وينسى الآخر. اختر أحدهما مرجعاً، وعادة يكون hex، واشتق الآخر بالمحوّل كلما احتجت.
محوّلات ذات صلة
تغطي عائلة الأدوات نفسها التحويلات المجاورة. وللعودة استخدم من HEX إلى RGB. وللألوان الموصوفة بالصبغة تجد من HEX إلى HSL ومن HSL إلى HEX في المتناول، وللطباعة من RGB إلى CMYK ومن CMYK إلى RGB ومن CMYK إلى HEX. وللمقاسات في ورقة الأنماط نفسها تفعل من px إلى rem للأطوال ما تفعله هذه الصفحة للألوان.
مثال محلول
لنفترض أن منتقي ألوان في محرر صور يخبرك بأن لون التمييز في صورة فوتوغرافية هو rgb(214, 98, 56). تكتب الأرقام الثلاثة وتقرأ #D66238. وفي ورقة الأنماط تكتب --accent: #D66238 وتستخدمه للأزرار والروابط. ويسألك زميل عن اللون في دليل العلامة التجارية، فترسل له الرمز. وفي وقت لاحق تحتاج إلى نسخة شبه شفافة للافتة، فتعود إلى RGB بالمحوّل “من HEX إلى RGB” لتبني rgba(214, 98, 56, 0.15). والتحويلان دقيقان، فتكون اللافتة بالصبغة نفسها التي للزر.
قائمة تحقق قصيرة
قبل التحويل
تأكد من أن كل رقم بين 0 و255. وقرّر هل تحتاج إلى شفافية.
أثناء التحويل
اكتب الأرقام الثلاثة، واقرأ الرمز وانسخه مع علامة الهاش.
بعد التحويل
اختبر اللون في سياقه، على الخلفية الحقيقية، وافحص تباين أي نص يقع عليه.
أخطاء شائعة
إسقاط صفر بادئ
لكل زوج خانتان. 7 هي 07.
كتابة أرقام فوق 255
لا يمكن كتابتها في خانتين. قيّدها أولاً.
معاملة الشاشة على أنها الحقيقة
الأرقام دقيقة. والمظهر يعتمد على الشاشة.
ألوانك تبقى على جهازك
تجري العملية الحسابية محلياً. يستخدم متصفحك قيمك ولا يُرسَل شيء إلى أي مكان. ولا شيء يُحذف بعد ذلك ولا حساب يُنشأ. هذه هي الطريقة البسيطة لتحويل RGB إلى HEX.
الخلاصة
لتحويل RGB إلى HEX هنا، اكتب الأرقام الثلاثة واقرأ رمز hex فوراً. يحفظ التحويل اللون تماماً: فـ hex وrgb() كتابتان لثلاثة الأرقام نفسها، من 0 إلى 255 للأحمر والأخضر والأزرق، فلا شيء يُقرَّب والذهاب والعودة يعيدان ما بدأ به. وتُنقل أيضاً قيمة رابعة للشفافية، إذ يصبح rgba() هو #RRGGBBAA والعكس. وتصف الكتابتان sRGB، فلا تستطيعان وصف ألوان خارجه. ولكل زوج خانتان، فالرقم الأقل من 16 يأخذ صفراً بادئاً. ولا يُرفع شيء.