تحويل HEX إلى RGB وفاحص تباين الألوان

كيف تحوّل HEX إلى RGB (والعكس)

يحوّل محوّل الألوان رمز HEX إلى RGB وHSL وHSV وCMYK وOKLCH أثناء الكتابة، ويعمل في الاتجاه المعاكس أيضًا: الصق rgb(255, 99, 71) في أي خانة فتحصل على #FF6347. كل خانة تقبل كل الصيغ، فلا تحتاج إلى البحث عن الحقل المناسب.

إذا أردت التحويل يدويًا، فرمز HEX ليس إلا ثلاثة أرقام مكتوبة بالنظام الست عشري. خذ #3B82F6، وقسّمه إلى أزواج، وحوّل كل زوج:

3B → 3×16 + 11 = 59
82 → 8×16 + 2 = 130
F6 → 15×16 + 6 = 246
#3B82F6 = rgb(59, 130, 246)

التحويل من RGB إلى HEX هو العكس. اقسم كل قناة على 16: العدد الصحيح هو الرقم الأول والباقي هو الرقم الثاني. 255 تساوي 15 والباقي 15، أي FF. و99 تساوي 6 والباقي 3، أي 63. لهذا يصبح الأحمر الطماطمي rgb(255, 99, 71) هو ‎#FF6347.

رموز ألوان شائعة بصيغ HEX وRGB وHSL

هذه الرموز تستحق أن تعرفها من النظرة الأولى. كلها أيضًا أسماء ألوان صالحة في CSS، وتعرض الأداة أقرب اسم لأي لون تدخله (‎#3B82F6 أقرب إلى dodgerblue، لكنه ليس مطابقًا له).

الاسم	HEX	RGB	HSL
white	#FFFFFF	255, 255, 255	0, 0%, 100%
black	#000000	0, 0, 0	0, 0%, 0%
red	#FF0000	255, 0, 0	0, 100%, 50%
tomato	#FF6347	255, 99, 71	9, 100%, 64%
gold	#FFD700	255, 215, 0	51, 100%, 50%
teal	#008080	0, 128, 128	180, 100%, 25%
navy	#000080	0, 0, 128	240, 100%, 25%
rebeccapurple	#663399	102, 51, 153	270, 50%, 40%

رموز HEX القصيرة والطويلة والشفافة

يأتي HEX بأربعة أطوال. ثلاثة أرقام هي صيغة مختصرة يُضاعف فيها كل رقم، فيعني #F60 اللون #FF6600. ستة أرقام هي الصيغة العادية. ثمانية أرقام تضيف قناة ألفا في النهاية: #3B82F680 هو الأزرق نفسه بقيمة 128 من 255، أي شفافية تقارب 50%. وأربعة أرقام هي الصيغة المختصرة لذلك. المتصفحات تفهم الصيغ الأربع منذ سنوات، لكن بعض تطبيقات التصميم وبرامج البريد الإلكتروني لا تقبل إلا ستة أرقام، فإذا كنت غير متأكد فالصق الرمز المكوّن من ستة أرقام واضبط الشفافية منفصلة.

أي صيغة تستخدم؟

HEX لكل ما تلصقه في أداة تصميم أو دليل هوية بصرية أو نظام إدارة محتوى. قصير ولا يخطئ أحد في قراءته.
RGB / RGBA عندما تحتاج إلى الشفافية في CSS القديم أو في كود canvas بلغة JavaScript.
HSL عندما تريد تعديل اللون بالتفكير فيه. خفض الرقم الأخير يجعله أغمق، وخفض الرقم الأوسط يجعله أكثر رمادية. كتابة حالات التمرير (hover) أسهل بكثير بهذه الطريقة.
OKLCH لأنظمة التصميم الجديدة في CSS. قيمة الإضاءة فيها تطابق ما تراه العين، فلونان بالقيمة L نفسها يبدوان فعلًا بالسطوع نفسه، وهذا ما لا يحققه HSL (الأصفر بإضاءة 50% يبدو أسطع بكثير من الأزرق بإضاءة 50%).
CMYK كدليل تقريبي للطباعة فقط. الأرقام هنا ناتجة عن المعادلة البسيطة، لا عن ملف تعريف الطابعة، لذلك لن يطابق الكتيّب المطبوع شاشتك تمامًا. اسأل المطبعة عن ملف التعريف الذي تستخدمه.
HSV / HSB غالبًا لمطابقة منتقي الألوان في Photoshop أو Figma اللذين يستخدمانه.

مدقق تباين الألوان: ما الذي يجتاز WCAG؟

يقارن WCAG 2 السطوع النسبي للنص والخلفية ويعبّر عنه بنسبة من 1:1 (متطابقان) إلى 21:1 (أسود على أبيض). العتبات ثابتة:

المستوى	نص عادي	نص كبير (24px، أو 18.66px عريض)
AA	4.5:1	3:1
AAA	7:1	4.5:1

الأيقونات وحدود حقول الإدخال وحلقات التركيز تحتاج إلى 3:1 حسب WCAG 2.1. هذه نتائج بعض الألوان الحقيقية كنص على خلفية بيضاء:

لون النص على ‎#FFFFFF	النسبة	النتيجة
#949494	3.03:1	للنص الكبير فقط
#777777	4.48:1	يرسب في AA لنص المحتوى، بفارق ضئيل
#767676	4.54:1	يجتاز AA
#595959	7.00:1	يجتاز AAA
#3B82F6	3.68:1	للنص الكبير والأزرار فقط
#008080	4.77:1	يجتاز AA

صف ‎#777777 هو الفخ الكلاسيكي. يبدو مطابقًا لـ ‎#767676، والمدقق الذي يعرض خانة عشرية واحدة سيُظهر 4.5، لكن القاعدة "4.5 على الأقل" و4.48 ليست كذلك. هذه الأداة لا تقرّب أبدًا نسبة راسبة إلى العتبة.

عندما يرسب لون، يبحث المدقق عن أقرب درجة من التدرّج اللوني نفسه تجتاز الاختبار. لـ ‎#3B82F6 على الأبيض يقترح ‎#1E6FF5 لمستوى AA ‏(4.52:1) و‎#0950C5 لمستوى AAA ‏(7.08:1). اضغط استخدام لتحميله، أو انسخه مباشرة إلى ملف الأنماط. الأصفر والبرتقالي الساطعان يحتاجان عادةً إلى درجة أغمق بكثير قبل أن يصلحا كنص على الأبيض؛ في هذه الحالة احتفظ باللون الساطع للخلفيات وضع فوقه نصًا داكنًا.

أنشئ لوحة ألوان والتقط الألوان من صورة

تبني لوحة الألوان سلّمًا من الدرجات الفاتحة والغامقة من 50 إلى 950 (التسمية التي يستخدمها Tailwind)، إضافة إلى مجموعات متكاملة ومتجاورة وثلاثية ومتكاملة منقسمة ومربعة وأحادية اللون. انقر على أي عيّنة لنسخها، ثم صدّر المجموعة كاملة كمتغيرات CSS مخصصة أو متغيرات SCSS أو JSON أو كتلة ألوان Tailwind، أو نزّل شريطًا بصيغة PNG لتضعه في شريحة عرض أو ترسله إلى عميل.

لمطابقة لون من شعار أو صورة، حمّل الصورة واضغط على المكان المطلوب. البكسل الواحد في صورة JPG قد يختلف ببضع درجات عمّا تراه بسبب تشويش الضغط، لذلك اختر متوسط 3×3 أو 5×5 للصور الفوتوغرافية. في Chrome وEdge يستطيع زر الالتقاط من الشاشة أخذ لون من أي مكان على شاشتك، بما في ذلك النوافذ الأخرى. لا يُرفع أي شيء؛ تُقرأ الصورة داخل متصفحك.

الأسئلة الشائعة

كيف أحوّل HEX إلى RGB؟

قسّم الأرقام الستة إلى ثلاثة أزواج، وحوّل كل زوج من النظام الست عشري إلى رقم من 0 إلى 255. ‎#3B82F6 يصبح 3B = 59، و82 = 130، وF6 = 246، فتكون قيمة RGB هي rgb(59, 130, 246).

كيف أحوّل RGB إلى HEX؟

اكتب كل قناة كرقم ست عشري من خانتين واجمعها بعد علامة #. ‏rgb(255, 99, 71) تعطي FF و63 و47، فيكون كود HEX هو ‎#FF6347، وهو لون tomato في CSS.

ما نسبة التباين المطلوبة لاجتياز WCAG AA؟

النص العادي يحتاج 4.5:1 على الأقل، والنص الكبير (24px، أو 18.66px عريض) يحتاج 3:1. الرمادي ‎#767676 على الأبيض نسبته 4.54:1، وهو أفتح رمادي لا يزال يجتاز المعيار لنص الفقرات.

ماذا يعني كود لون HEX من 8 خانات؟

الخانتان الأخيرتان هما قناة ألفا (الشفافية). ‎#3B82F680 هو الأزرق نفسه بشفافية 128/255، أي نحو 50%، وهو rgba(59, 130, 246, 0.5) في CSS.

ماذا يعني كود HEX من 3 خانات مثل ‎#F60؟

تتضاعف كل خانة، فيكون ‎#F60 هو ‎#FF6600. الصيغة المختصرة لا تصلح إلا عندما تتطابق خانتا كل زوج، ولهذا لا توجد صيغة من 3 خانات لـ ‎#3B82F6.

هل قيمة CMYK دقيقة بما يكفي للطباعة؟

هي نقطة بداية وليست بروفة طباعة. تستخدم الأداة المعادلة القياسية، فيصبح ‎#3B82F6 هو cmyk(76%, 47%, 0%, 4%)، لكن مزيج الحبر الحقيقي يعتمد على ملف ألوان الطابعة والورق، فاطلب القيم من المطبعة.

كيف أحصل على كود HEX للون في صورة؟

حمّل الصورة في اللوحة أعلاه واضغط على النقطة التي تريدها؛ تقرأ الأداة تلك البكسلة. مع الصور الفوتوغرافية اختر متوسط 3×3 أو 5×5، لأن البكسلة الواحدة غالبًا أكثر تشويشًا من اللون الذي تراه.

ما الفرق بين HSL وHSV؟

كلاهما يبدأ بدرجة اللون نفسها، لكن الإضاءة 100% في HSL تعني الأبيض دائمًا، بينما القيمة 100% في HSV تعني أسطع نسخة من اللون. الأحمر الصافي هو hsl(0, 100%, 50%) وhsv(0, 100%, 100%).