محول لون HEX إلى RGB

ما هو رمز لون HEX؟

رمز اللون HEX هو سلسلة من ستة أحرف ألفانوميرية تستخدم في تصميم الويب والرسومات الرقمية لتمثيل لون معين. يتبع الشكل النمط#RRGGBB، حيث يقوم كل زوج من حرفين بتشفير شدة أحد الألوان الأساسية الثلاثة الإضافية - الأحمر (RR) ، الأخضر (GG) ، والأزرق (BB) - باستخدام التدوين السداسي (القاعدة 16). يتراوح كل زوج من00(قوة الصفر) إلىFF(أقصى كثافة، تعادل 255 في العشرية).

نشأت رموز HEX من الحاجة إلى تعريف الألوان في HTML و CSS دون الاعتماد على الكلمات الرئيسية الملونة المسماة. بينما يدعم CSS الآن تنسيقات ألوان متعددة بما في ذلكrgb(), hsl()، وoklch()، لا يزال HEX هو التدوين الأكثر استخدامًا في تطوير الواجهة الأمامية وتسليم التصميم ومبادئ توجيهية العلامة التجارية. تقريبا كل اختيار لون في أدوات مثل Figma و Sketch و Adobe Photoshop و Canva يعرض قيمة HEX بشكل افتراضي.

العدد الإجمالي للألوان الفريدة التي يمكن تمثيلها بواسطة رموز HEX ذات الست خانات هو 16,777,216 (256 x 256 x 256). غالبًا ما يشار إلى هذا باسم "اللون الحقيقي" أو "اللون 24 بت"، والذي يطابق عمق اللون في معظم الشاشات الحديثة. تحصل كل قناة على 8 بت (بايت واحد) ، وتنتج ثلاث قنوات معًا 24 بت من بيانات اللون.

رموز HEX غير حساسة للقاعدة، لذلك#ff8000و#FF8000بعض أدلة الأسلوب تفضل الأحرف الكبيرة لسهولة القراءة، في حين أن CSS minifiers غالبًا ما تخرج الأحرف الصغيرة لتوفير البايتات - على الرغم من أن الفرق في الممارسة لا يذكر.

كيفية تحويل HEX إلى RGB خطوة بخطوة

تحويل رمز لون HEX إلى ما يعادله من RGB أمر بسيط. تتضمن العملية تقسيم السلسلة المكونة من ستة أحرف إلى ثلاثة أزواج وتحويل كل زوج من العشريات السداسية (قاعدة 16) إلى العشرية (قاعدة 10). إليك الطريقة خطوة بخطوة:

1. إزالة رمز التجزئة.إذا كان رمز HEX يبدأ ب#على سبيل المثال#1A2B3Cيصبح1A2B3C.
2. انقسموا إلى ثلاثة أزواجقم بتقسيم السلسلة المتبقية إلى ثلاث مجموعات من شخصيتين:1A, 2B, 3C.
3. تحويل كل زوج إلى عشري.استخدم نظام القيم الترتيبية السداسية حيث يتم ضرب الرقم الأول بـ 16 ويتم إضافة الرقم الثاني:
   • أحمر:1A-> (1 × 16) + 10 =26
   • أخضر:2B-> (2 × 16) + 11 =43
   • الأزرق:3C-> (3 × 16) + 12 =60
4. اكتب قيمة RGBالجمع بين القيم العشرية الثلاثة:rgb(26, 43, 60).

الأرقام السداسية العشرية ومعادلاتها العشرية هي: 0 = 0، 1 = 1، 2 = 2، 3 = 3، 4 = 4، 5 = 5، 6 = 6، 7 = 7، 8 = 8، 9 = 9، A = 10، B = 11، C = 12، D = 13، E = 14، F = 15. حفظ A من خلال F هو الجزء الوحيد الذي يختلف عن الحساب العشري القياسي.

للتحويل البرمجي، معظم اللغات تقدم وظائف مدمجة. في جافا سكريبت،parseInt("1A", 16)العوائد26في بايثونint("1A", 16)يقوم CSS نفسه بمعالجة كلا التنسيقين بشكل أصلي، لذا فإن التحويل مفيد بشكل أساسي عندما تحتاج إلى التلاعب بقنوات الألوان الفردية في الشفرة -- على سبيل المثال، تعديل السطوع، إنشاء التدرجات برمجيًا، أو مزج لونين.

رموز 3 خانات مقابل 6 خانات HEX

يدعم CSS شكل HEX المختصر من 3 أرقام (#RGB) من أجل الراحة عندما يتكون كل زوج من الأزواج الثلاثة من أرقام متطابقة. في هذا الاختصار ، يتم توسيع كل رقم واحد عن طريق مضاعفته. على سبيل المثال:

• #F80تتوسع إلى#FF8800-> rgb ((255, 136, 0)
• #FFFتتوسع إلى#FFFFFF-- rgb ((255، 255، 255)
• #000تتوسع إلى#000000-> rgb ((0, 0, 0)
• #09Cتتوسع إلى#0099CC-> rgb{0, 153, 204)
• #A3Fتتوسع إلى#AA33FF-> rgb{170, 51, 255)

يقلل التدوين المكون من 3 أرقام من عدد الألوان المتاحة من 16.7 مليون إلى 4096 فقط (16 x 16 x 16) ، لذلك لا يمكن أن يمثل كل لون. يستخدم بشكل شائع للألوان البسيطة أو المعروفة في ملفات CSS حيث يتم تقييم الاختصار.

يدعم CSS أيضًا أربعة أرقام (#RGBA) و 8 خانات (#RRGGBBAA) رموز HEX التي تتضمن قناة ألفا (الشفافية) قيمة ألفا تتبع نفس المنطق السداسي العشري:FFغير شفافة بالكامل و00هو شفاف تماما. على سبيل المثال،#FF880080يمثل اللونrgb(255, 136, 0)مع 50% من الشفافية. يركز محولنا على التنسيقات القياسية من 3 إلى 6 أرقام؛ إذا قمت بإدخال رمز مع قناة ألفا، فسوف يعالج الجزء RGB فقط.

HEX إلى الجدول المرجعي RGB

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

يحدد CSS 147 لونًا مسميًا في المجموع ، كل منهما مع قيمة HEX المقابلة. في حين أن الألوان المسماة مريحة للنموذج الأولي ، فإن المشاريع المهنية تعتمد عادةً على قيم HEX أو RGB للحصول على الدقة والاتساق عبر المتصفحات وأدوات التصميم.

ألوان العلامات التجارية الشائعة - قيم HEX و RGB

غالبًا ما يحتاج المطورون والمصممون إلى قيم HEX و RGB الدقيقة لألوان العلامات التجارية الشائعة للنماذج التجريبية والتكاملات ودلائل الأسلوب. فيما يلي مرجع سريع لبعض ألوان العلامات التجارية الأكثر طلبًا:

غالبًا ما تحدد إرشادات العلامات التجارية الألوان في تنسيقات متعددة (HEX ، RGB ، CMYK ، Pantone). عند تنفيذ ألوان العلامة التجارية في CSS ، تأكد دائمًا من القيم مقابل صفحة موارد العلامة التجارية الرسمية لضمان الدقة. يمكن أن تتحول الألوان قليلاً بين الشاشات ، لذلك من الضروري الاتساق في الشفرة.

مقارنة نماذج الألوان: HEX و RGB و HSL و CMYK

إن فهم متى تستخدم كل نموذج لون يساعدك على العمل بكفاءة أكبر عبر أدوات ووسائل إعلام مختلفة:

HEX و RGB متطابقين رياضياً- تمثل نفس مساحة اللون باستخدام تدوين مختلف. التحويل بينها هو ترجمة بسيطة من قاعدة 16 إلى قاعدة 10 دون فقدان الدقة أو الاختلافات في النطاق. من ناحية أخرى ، HSL هو تحويل RGB إلى نظام إحداثيات أسطواني يجعل من الأسهل التفكير في اللون والشبع والخفيفة بشكل مستقل. CMYK هو نموذج لون تقليدي يستخدم في الطباعة ولا يمكن أن يمثل جميع ألوان RGB (والعكس بالعكس) ، لذلك فإن التحويلات بين RGB و CMYK تقريبية.

في CSS الحديث (المستوى 4) ،color()وظيفة وفراغات الألوان الجديدة مثلoklch()وdisplay-p3يتم اعتمادها بشكل متزايد ، خاصةً للعروض ذات النطاق العريض. ومع ذلك ، لا تزال HEX و RGB هي الخط الأساسي لتوافق الويب وتدعمها كل متصفح قيد الاستخدام اليوم.

استخدام HEX و RGB في CSS و JavaScript

كل من قيم HEX و RGB صالحة في CSS وتنتج نتائج متطابقة. فيما يلي أمثلة عملية لكيفية استخدام كل تنسيق:

إعلانات CSS:

/* HEX notation */
body { background-color: #1A2B3C; }

/* RGB notation */
body { background-color: rgb(26, 43, 60); }

/* RGB with alpha (transparency) */
.overlay { background-color: rgba(26, 43, 60, 0.5); }

/* Modern CSS — space-separated syntax */
.card { color: rgb(26 43 60 / 80%); }

وظائف تحويل جافا سكريبت:

// HEX to RGB
function hexToRgb(hex) {
  const h = hex.replace('#', '');
  return {
    r: parseInt(h.substring(0, 2), 16),
    g: parseInt(h.substring(2, 4), 16),
    b: parseInt(h.substring(4, 6), 16)
  };
}

// RGB to HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('').toUpperCase();
}

عند العمل مع واجهة برمجة تطبيقات HTML Canvas، غالباً ما يجب تعيين الألوان كسلسلة."#FF8000"و"rgb(255, 128, 0)"العمل لfillStyleوstrokeStyleومع ذلك، فإنgetImageData()الطريقة تعيد بيانات البكسل كمصفوفة من 0 - 255 عددًا صحيحًا (RGBA) ، مما يجعل RGB الشكل الطبيعي للتلاعب بمستوى البكسل.

في خصائص CSS المخصصة (متغيرات) ، يتم تخزين قيم HEX عادةً من أجل البساطة:

:root {
  --primary: #4A90E2;
  --primary-rgb: 74, 144, 226; /* for use with rgba() */
}
.element {
  background: rgba(var(--primary-rgb), 0.3);
}

هذا النمط من تخزين قيم قناة RGB الخام كمتغير CSS هو تقنية شائعة تسمح لك بتطبيق الشفافية بشكل ديناميكي دون التحويل بين التنسيقات في وقت التشغيل.

إمكانية الوصول وتباين الألوان

غالبًا ما تكون تحويل HEX إلى RGB هي الخطوة الأولى في حساب نسب تباين الألوان للامتثال للوصول. تتطلب مبادئ توجيهية إمكانية الوصول إلى محتوى الويب (WCAG) الحد الأدنى من نسبة التباين من4.5:1للنص العادي3: 1للنص الكبير (18px+ جاف أو 24px+ عادي).

معادلة نسبة التباين تتطلبالإضاءة النسبيةمن كل لون ، والتي يتم حسابها من قيم RGB الخطية. الخطوات هي:

1. تحويل HEX إلى RGB (0 - 255 لكل قناة).
2. قم بتطبيع كل قناة إلى 0 - 1 من خلال تقسيمها على 255.
3. قم بتطبيق صيغة خطية sRGB: إذا كانت القيمة <= 0.04045 ، قم بالقسمة على 12.92 ؛ خلاف ذلك قم بحساب ((القيمة + 0.055) / 1.055) ^ 2.4.
4. حساب الإضاءة: L = 0.2126 × R + 0.7152 × G + 0.0722 × B.
5. احسب نسبة التباين بين لونين: (L1 + 0.05) / (L2 + 0.05) ، حيث L1 هو اللون الأخف.

كما ترون ، فإن قيم RGB هي المدخلات الأساسية لكل حساب التباين في إمكانية الوصول. أدوات مثل WebAIM Contrast Checker ، Chrome DevTools color picker ، و Axe accessibility scanner جميعها تقوم بهذا التحويل داخليًا.

بالنسبة للمصممين ، قاعدة سريعة من الإبهام: النص الداكن على خلفية فاتحة (أو العكس) مع فرق إضاءة لا يقل عن 125 وفرق لون لا يقل عن 500 (باستخدام مجموع الاختلافات المطلقة عبر قنوات R و G و B) سوف يمر بشكل عام بمعايير WCAG AA.