لتحويل HEX إلى RGB، اقسم الكود إلى ثلاثة أزواج تمثل الأحمر والأخضر والأزرق، ثم حوّل كل زوج من النظام السداسي عشري إلى رقم من 0 إلى 255. مثلًا: #3498DB تساوي rgb(52, 152, 219).
تحققت من المثال داخل محوّل الألوان من NasrTech. بمجرد كتابة #3498DB ظهرت القيم الأخرى لحظيًا:
- RGB:
rgb(52, 152, 219) - HSL:
hsl(204, 70%, 53%) - HSV:
hsv(204, 76%, 86%) - CMYK:
cmyk(76%, 31%, 0%, 14%) - OKLCH:
oklch(65.3% 0.135 242.7)
هذه نتيجة قابلة لإعادة الاختبار، وهي أفضل من وصف عام يقول إن الأداة "دقيقة" دون مثال.
كيف يتحول #3498DB إلى RGB يدويًا؟
احذف علامة # أولًا، ثم قسّم القيمة:
- الأحمر:
34 - الأخضر:
98 - الأزرق:
DB
في النظام السداسي عشري نستخدم الأرقام من 0 إلى 9 ثم الحروف A إلى F. لحساب 34:
3 × 16 + 4 = 52
ولحساب 98:
9 × 16 + 8 = 152
أما DB فالحرف D يساوي 13 والحرف B يساوي 11:
13 × 16 + 11 = 219
إذًا النتيجة النهائية هي:
color: rgb(52, 152, 219);يمكنك إجراء الحساب يدويًا للتعلم، لكن الأداة أسرع عندما تعمل على لوحة ألوان كاملة أو قيم كثيرة.
استخدام محول HEX إلى RGB خطوة بخطوة
- افتح محوّل الألوان.
- اكتب قيمة HEX في الحقل، مع
#أو بدونها. - راقب تحديث RGB وHSL وHSV وCMYK وOKLCH.
- انسخ الصيغة التي يحتاجها مشروعك.
- ارجع إلى منتقي اللون لتتأكد بصريًا من النتيجة.
لا يوجد زر تحويل لأن كل الحقول قابلة للتعديل. يمكنك البدء من RGB والعودة إلى HEX، أو كتابة OKLCH والحصول على قيمة قريبة في sRGB.
للتأكد من أن التحويل يعمل في الاتجاهين، اكتب rgb(52, 152, 219) في حقل RGB. يجب أن تعود قيمة HEX إلى #3498DB. هذا الفحص مفيد عندما تنقل ألوانًا من أدوات تطوير المتصفح إلى ملف تصميم أو العكس، ويكشف فورًا أي خطأ في ترتيب القنوات.
متى تستخدم RGB ومتى تستخدم HEX؟
HEX وRGB طريقتان لتمثيل اللون نفسه على الشاشة. اختر بينهما حسب سهولة القراءة والعمل:
- HEX مختصر ومناسب للمتغيرات ولوحات التصميم، مثل
#3498DB. - RGB أوضح عندما تعدل قناة واحدة أو تضيف شفافية، مثل
rgb(52 152 219 / 70%). - HSL مريح عند تغيير درجة اللون أو الإضاءة مع الحفاظ على منطق بصري.
- OKLCH مفيد لبناء تدرجات ولوحات تبدو متقاربة في السطوع للعين.
في CSS الحديث لا توجد ضرورة للالتزام بشكل واحد في كل المشروع، لكن الاتساق يساعد فريقك على القراءة والصيانة.
لماذا تظهر قيم HSL وHSV مختلفة؟
كلاهما يصف اللون من خلال درجة اللون والتشبع، لكن المكوّن الثالث مختلف. HSL يستخدم الإضاءة، بينما HSV يستخدم القيمة أو السطوع. لذلك لا تتوقع أن تتطابق النسب حتى لو كان اللون المرئي واحدًا.
برامج التصميم قد تستخدم HSV في منتقي الألوان، بينما CSS يدعم HSL مباشرة. المحوّل يختصر النقل بينهما بدل تخمين النسب.
ماذا يعني OKLCH في الاستخدام العملي؟
OKLCH يتكون من الإضاءة، والتشبع اللوني، ودرجة اللون. ميزته أن تغيير الإضاءة فيه أقرب إلى إدراك العين من تغيير القيم في RGB. هذا مفيد عند إنشاء درجات فاتحة وداكنة لزر أو خلفية.
لكن ليس كل لون في OKLCH يمكن عرضه داخل نطاق sRGB. عندما تكتب لونًا شديد التشبع، قد يحتاج المتصفح أو الأداة إلى تقريبه إلى لون قابل للعرض. احتفظ بمعاينة بصرية واختبر التباين بدل الاعتماد على الأرقام فقط.
لشرح أعمق، اقرأ دليل ما هو OKLCH؟.
لماذا CMYK في الأداة تقديري؟
CMYK مخصص للطباعة، والنتيجة النهائية تعتمد على الطابعة والحبر والورق وملف تعريف اللون. الأداة تعطي تحويلًا رياضيًا عامًا من sRGB، لكنه ليس بروفة طباعة معايرة.
في اختبار #3498DB ظهرت القيمة cmyk(76%, 31%, 0%, 14%). استخدمها كنقطة بداية عند التواصل مع المطبعة، ثم اطلب بروفة فعلية إذا كان اللون جزءًا حساسًا من الهوية التجارية.
هذا التفريق مهم: محوّل المتصفح ممتاز للويب والواجهات، لكنه لا يحل محل نظام إدارة ألوان احترافي للطباعة.
حالات عملية توفر فيها الأداة وقتًا
عند استلام شعار بقيم HEX وتحتاج إلى إدخاله في برنامج يعرض RGB، يمكنك النسخ مباشرة. وعند فحص صفحة قديمة تستخدم RGB، تستطيع استخراج HEX موحد لمتغيرات CSS.
كذلك تفيد الأداة عند مقارنة لونين متقاربين. بدل النظر إلى مربعين فقط، ترى الفروق في الإضاءة والتشبع. وإذا كنت تنشئ زرًا وحالة hover، تستطيع تعديل HSL أو OKLCH ثم نسخ الناتج.
المعالجة كلها حسابات نصية داخل المتصفح؛ لا توجد ملفات أو صور تُرفع. وهذا يجعل الأداة مناسبة حتى عندما تكون ألوان العلامة لم تُعلن بعد.
أخطاء شائعة في أكواد الألوان
تأكد من كتابة ست خانات في HEX الكامل. الصيغة المختصرة #39D تعادل #3399DD، وليست #03900D. كذلك لا تخلط بين ترتيب RGB وBGR الذي قد يظهر في بعض الأنظمة.
لا تعتبر اللون ناجحًا لأنه جميل منفردًا. افحص التباين بين النص والخلفية، وحالات التركيز، والوضع الداكن. التحويل يحافظ على اللون لكنه لا يحكم على إمكانية القراءة.
إذا احتجت شفافية، لا تبحث عن كود HEX جديد يصف اللون الشفاف نفسه؛ استخدم قناة alpha. مثال rgb(52 152 219 / 50%) يعرض اللون بنصف شفافية فوق الخلفية. المظهر النهائي سيتغير حسب الخلفية، لذلك لا تقارن قيمة شفافة بمربع أبيض فقط ثم تعتمدها على الوضع الداكن.
اختبر اللون كذلك على شاشة هاتف وشاشة حاسوب، لأن المعايرة والسطوع قد يغيران الانطباع حتى عندما تبقى القيمة الرقمية نفسها.
أسئلة شائعة
ما نتيجة تحويل #FFFFFF إلى RGB؟
النتيجة rgb(255, 255, 255) لأن كل زوج FF يساوي 255.
وما نتيجة #000000؟
النتيجة rgb(0, 0, 0).
هل يمكن التحويل من RGB إلى HEX؟
نعم. اكتب RGB في حقله وستتحدث قيمة HEX وباقي الصيغ تلقائيًا.
هل CMYK الناتج جاهز للطباعة؟
هو تقريب عام، وليس ملف ألوان معايرًا لطابعة وورق محددين. اطلب بروفة للطباعة المهمة.
هل تُرسل القيم إلى خادم؟
لا؛ التحويل الرياضي يتم داخل الصفحة. لا تحتاج إلى حساب أو رفع ملف.
الخلاصة
المعادلة اليدوية مفيدة لفهم النظام، لكن المحوّل أسرع في العمل اليومي. اختبار #3498DB أعطى rgb(52, 152, 219) مع HSL وHSV وCMYK وOKLCH في اللحظة نفسها. استخدم محوّل الألوان لقيم الشاشة، وتعامل مع CMYK كمرجع أولي لا كضمان للطباعة.
