محوّل HEX إلى RGB

ما محوّل HEX إلى RGB؟

// Parse any hex shape (3/4/6/8-digit) into an RGB tuple [r, g, b, a]
// All channels in 0-255 range; alpha in 0-1.
function parseHex(input) {
  let h = input.trim().replace(/^#/, '');
  // Expand 3-digit and 4-digit shorthand by duplicating each digit
  if (h.length === 3 || h.length === 4) {
    h = h.split('').map(c => c + c).join('');
  }
  if (!/^[0-9a-fA-F]+$/.test(h) || (h.length !== 6 && h.length !== 8)) {
    throw new Error(`Invalid hex: ${input}`);
  }
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
  return [r, g, b, a];
}

console.log(parseHex('#FF5733'));   // [255, 87, 51, 1]
console.log(parseHex('#F73'));       // [255, 119, 51, 1]
console.log(parseHex('#FF573380'));  // [255, 87, 51, 0.5019607843137255]

أبرز الميزات

بدائل محوّل HEX إلى RGB

أمثلة على HEX إلى RGB

#FF5733

#3b82f6

#FF573380

#F73

تحويلات HEX → RGB الشائعة

جدول مرجعي لأكثر 10 رموز HEX تحويلاً ومكافئاتها بـRGB — أوّليات صرفة، وثانويات صرفة، ولونَيْ علامة من لوحة Tailwind من العالم الحقيقي.

كيفية استخدام محوّل HEX إلى RGB

1. 1

   الصق رمز HEX في حقل HEX

   أنزل أي قيمة HEX في حقل HEX — مع `#` الافتتاحية أو بدونها، باختصار ثلاثة أرقام (`#F73`)، أو شكل كامل من ستة (`#FF5733`)، أو اختصار alpha من أربعة (`#F738`)، أو شكل كامل من ثمانية مع alpha (`#FF5733CC`). تُطبّع الأداة كل الأشكال الخمسة إلى اللون القانوني ذاته داخلياً. لا يهمّ حجم الأحرف (`#ff5733` و`#FF5733` يُحلَّلان بصورة متطابقة). تنتج الأحرف غير الصالحة أو الأعداد الخاطئة من الأرقام خطأً سطرياً صامتاً؛ ويُحدِّث HEX الصالح كل حقل صيغة أخرى في الزمن الحقيقي.

2. 2

   اقرأ ثلاثية RGB من حقل RGB

   يعرض حقل RGB أسفل حقل HEX قيمة `rgb()` المطابِقة بصياغة CSS Color 4 الحديثة المفصولة بمسافات: `rgb(255 87 51)` للون معتم، و`rgb(255 87 51 / 0.5)` للون ذي alpha. كل قناة عدد صحيح بين 0-255؛ ومُطبّع alpha إلى 0-1. القيم دقيقة على مستوى البِت — `parseInt('FF', 16)` يعيد 255، دون أي حساب فاصلة عائمة، فرحلة العودة إلى HEX تنتج الإدخال الأصلي حرفياً.

3. 3

   انقر «نسخ» لالتقاط سلسلة RGB

   لكل بطاقة صيغة زرّ «نسخ» على اليمين. نقرة واحدة فتنزل القيمة على حافظتك — يومض نصّ الزرّ بسرعة بكلمة «نُسخت!» لإعلامك. السلسلة المنسوخة هي صياغة CSS Color 4 القانونية (`rgb(255 87 51)`)؛ وإن احتاج هدفك الشكل القديم بفواصل، فالتحويل ميكانيكي (استبدل المسافات بـ`, `). لإخراج خاصّ بمنصّة محدّدة (SwiftUI، وCompose، وFlutter، وTailwind v4)، استخدم قسم «نسخ كرمز» تحت المنتقي.

4. 4

   ظاهرة أيضاً: HSL، وOKLCH، وOKLAB، وCMYK، واسم اللون

   يُضيء HEX ذاته الذي تلصقه بقيّة حقول الصيغ أيضاً — HSL لـCSS الإرثية، وOKLCH وOKLAB لأنظمة التصميم الموحّدة إدراكياً، وHSV وHWB لمسارات منتقي ألوان المصمّمين، وCMYK لتقديرات الطباعة، وأقرب لون CSS مُسمّى للتوثيق والنثر. أنت غير مُقيَّد بـHEX → RGB فقط؛ إن احتجت ثلاثية OKLCH لإسقاطها في كتلة `@theme` في Tailwind v4، فهي هناك في حقل OKLCH مع زرّ «نسخ» خاصّ بها.

5. 5

   استخدم المنتقي للتعديلات البصرية

   تحت شبكة الصيغ يوجد مربّع SL + منزلق درجة اللون + منزلق alpha للاستكشاف البصري. اسحب أي عنصر تحكّم فتتحدّث كل الحقول النصّية في الزمن الحقيقي، بما فيها HEX وRGB اللذان بدأت بهما. على متصفحات Chromium (Chrome، وEdge، وBrave) يُفعّل زرّ EyeDropper واجهة EyeDropper الأصلية لانتقاء أي بكسل على الشاشة، بما في ذلك خارج نافذة المتصفح — مفيد حين تريد التقاط HEX من واجهة تطبيق آخر دون أخذ لقطة شاشة أوّلاً.

أخطاء HEX / RGB الشائعة

Assume #F73 left-pads to #000F73:
expected: dark blue rgb(0, 15, 115)
actual:   bright orange rgb(255, 119, 51)

3-digit shorthand duplicates each digit:
#F73 → #FF7733 → rgb(255, 119, 51)
Verified by the tool's live expansion as you type.

Skip padStart:
[5, 87, 51].map(v => v.toString(16)).join('') → '55733'
Produces invalid 5-character hex.

Use padStart(2, '0'):
[5, 87, 51].map(v => v.toString(16).padStart(2, '0')).join('') → '055733'
Valid 6-character hex; works correctly for all channel values 0-255.

Paste CSS 8-digit hex into legacy Android Color.parseColor():
#FF573380 interpreted as #AARRGGBB
→ wrong color and wrong alpha entirely.

Use the target platform's documented format:
for Android Compose: Color(0xFFFF5733) with alpha as first byte
for CSS: #FF573380 with alpha as last byte
Don't cross-paste between the two without re-ordering.

Average gamma-encoded RGB directly:
(rgb(255,0,0) + rgb(0,255,0)) / 2 = rgb(128, 128, 0)
Looks like dark olive, not bright yellow.

Average in linear-RGB:
decode → linear-RGB → average → re-encode → rgb(188, 188, 0)
Visibly bright yellow, matching what physical light mixing produces.

من يستخدم HEX إلى RGB

مطوّرو الواجهة الأمامية يحوّلون HEX من Figma إلى استدعاءات RGB في canvas

تُصدِّر Figma HEX، لكن `CanvasRenderingContext2D.fillStyle` يقبل كليهما HEX و`rgb()` — وحين تجري حسابات على كل قناة (تدرّجات، ومزج، ومعالجة صور)، يكون امتلاك أعداد القنوات الصحيحة مباشرةً أسرع من إعادة تحليل HEX في كل مرّة. الصق HEX مرّة واحدة، وانسخ ثلاثية `rgb(255 87 51)`، وأسقِطها في استدعاء canvas. صفر رمز لتحليل HEX مطلوب من جانبك.

المصمّمون يترجمون HEX الويب إلى RGB في Photoshop / Illustrator

يأخذ منتقي ألوان Adobe أعداداً صحيحة من 0-255 عبر مربّعات القنوات الثلاث مدخلاً أصلياً. الصق HEX الويب في هذه الأداة، اقرأ أعداد R / G / B الصحيحة، اكتبها في Photoshop. تطابق اللون الأصلي للويب تماماً دون لفّ لقطة شاشة وقطّارة ألوان. مفيد حين يحتاج مصمّم نمذجة لون ويب في تطبيق تخطيط Adobe واعٍ بالطباعة.

مطوّرو الألعاب يحمّلون HEX العلامة إلى واجهات RGB في Unity / Unreal

يأخذ `Color` في Unity و`FLinearColor` في Unreal فواصل عائمة مطبّعة من 0-1. الصق HEX العلامة، اقرأ الأعداد الصحيحة من 0-255، اقسم على 255 (أو استخدم إخراج الفاصلة العائمة المطبَّع في الأداة عبر «نسخ كرمز»). التحويل ميكانيكي لكنه عرضة للخطأ يدوياً — كتابة `(255, 87, 51)` في مُنشئ يتوقّع `(1.0, 0.341, 0.2)` تنتج لوناً أبيض مقصوصاً وتغريدة محتارة. تُسطّح الأداة كلا الشكلَيْن.

مطوّرو العتاد يبرمجون شرائط LED القابلة للعنونة

تأخذ شرائط LED القابلة للعنونة WS2812، وAPA102، وغيرها قنوات أعداد صحيحة من 0-255 لكل LED. الصق HEX العلامة لعرض المنتج المثبّت على الجدار، اقرأ ثلاثية RGB، أسقطها في مصفوفة ألوان المتحكّم. مفيد حين يحدّد فريق التسويق HEX ويحتاج مهندس البرامج الثابتة قيم القنوات لاستدعاء `pixels.setPixelColor(i, r, g, b)`.

مهندسو الوصولية يدقّقون قراءة ألوان العلامة

يأخذ فحص تباين WCAG 2.1 مدخلات RGB داخلياً. الصق HEX العلامة، احصل على RGB المطابِق بالإضافة إلى نسبة WCAG مقابل الأبيض والأسود بالإضافة إلى درجة APCA Lc في شاشة واحدة. إن سقط لون العلامة دون عتبة 4.5:1 لنص المحتوى، فإن حقل OKLCH الموحّد إدراكياً بجانبه يجعل من السهل رفع L حتى يجتاز التباين دون فقدان هويّة العلامة.

المصمّمون يضمّنون قوالب البريد الإلكتروني بـRGB سطري

تحلّل بعض عملاء البريد الإلكتروني (Outlook على Windows، وGmail الجوّال الأقدم) HEX بصورة غير متّسقة في سمات HTML — قد يُعرَض `<font color="#FF5733">` كأسود على منصّات معيّنة. الاحتياط الموثوق هو شكل `rgb(255, 87, 51)` المكافئ سطرياً. الصق HEX العلامة، انسخ سلسلة RGB بصياغة الفواصل القديمة (استبدال يدوي من شكل المسافة الحديث)، أسقطها في سمة `style` لقالب البريد.

المطوّرون يوثّقون رموز العلامة بكلتا الصيغتَيْن

غالباً ما يعرض توثيق رموز التصميم اللون ذاته بكلتا الصيغتَيْن: HEX لكتلة رمز CSS، وRGB للتعليق النثري («أحمر العلامة `#FF5733`، يكافئ RGB ‏255 / 87 / 51»). يتيح وجودهما ظاهرَيْن جنباً إلى جنب لكاتب التوثيق نسخ كل منهما في تمرير واحد بدلاً من تشغيل أداتَيْن. تتيح أيضاً تجزئة URL القابلة للمشاركة للقرّاء النقر للوصول إلى اللون الدقيق المُناقَش.

مهندسو ضمان الجودة يتحقّقون من لقطات ألوان البكسلات

غالباً ما تؤكّد اختبارات الانحدار البصري قيم RGB محدّدة مقابل البكسلات المُرسَمة (`expect(pixel.r).toBe(255)`). حين تُعطى المواصفة كـHEX («يجب أن تُرسَم الأزرار كـ`#FF5733`»)، يحتاج مهندس ضمان الجودة أعداد RGB الصحيحة لكتابة التأكيد. الصق HEX، اقرأ R / G / B، أسقطها في الاختبار. تعني الدقّة على مستوى البِت للتحويل أن الاختبار لن يتذبذب بسبب فوارق انجراف الفاصلة العائمة.

رياضيات HEX إلى RGB والتحليل

`parseInt(hex, 16)` هو التنفيذ بسطر واحد

يلائم تحويل HEX إلى RGB بأكمله تعبيراً واحداً لكل قناة: `parseInt(hex.slice(1, 3), 16)` لـR، و`parseInt(hex.slice(3, 5), 16)` لـG، و`parseInt(hex.slice(5, 7), 16)` لـB. تقرأ `parseInt` في JavaScript بأساس 16 سلسلة HEX إلى عدد عشري صحيح في مدى 0-255 دون تورّط فاصلة عائمة. الاتجاه المعاكس (`value.toString(16).padStart(2, '0')`) سطر واحد بالقدر ذاته — `padStart(2, '0')` هي التفصيلة سهلة النسيان التي تلتقط قيم قناة من رقم واحد مثل 5 → `'05'` بدلاً من `'5'`.

تمدّد الاختصار: مضاعفة الرقم، لا حشو يساري

تعرّف مواصفة CSS الاختصار من ثلاثة أرقام كـ`#RGB` يتمدّد إلى `#RRGGBB` بمضاعفة كل رقم. `#F73` → `#FF7733`، *وليس* `#000F73`. تنطبق القاعدة ذاتها على اختصار alpha من أربعة أرقام `#RGBA` → `#RRGGBBAA`. هذا أحد أكثر زوايا صياغة ألوان CSS ضلالاً — كثيراً ما يفترض المبتدئون أن `#F73` يحشى يساراً إلى `#000F73`، وهو ما ينتج لوناً مختلفاً تماماً (أزرق داكن باهت بدلاً من البرتقالي الساطع المقصود). يُظهر سلوك التمدّد في الأداة القاعدة بلمحة.

alpha من ثمانية أرقام: الزوج الأخير، مقسوماً على 255

يُشفِّر HEX من ثمانية أرقام `#RRGGBBAA` alpha كزوج HEX من رقمين بعد ثلاثية RGB، يُحلَّل بالطريقة ذاتها ثم يُقسَم على 255 لإنتاج فاصلة عائمة بين 0-1. يُحلَّل `#FF573380` إلى alpha = `0x80 / 255 = 128 / 255 = 0.5019607843137255`. تستخدم مواصفة CSS Color 4 دقّة بأربعة منازل عشرية للإخراج (`/ 0.502`)؛ وتتّبع الأداة الاصطلاح ذاته. شُحن HEX من ثمانية أرقام في كل المتصفحات دائمة التحديث في عام 2018 (Chrome 62، وFirefox 49، وSafari 9.1، وEdge 79). الاحتياط لما قبل 2018 هو `rgba()`.

إخراج RGB: CSS Color 4 مفصول بمسافات افتراضياً

تُصدِر الأداة `rgb(255 87 51)` (مفصول بمسافات حديث) افتراضياً بدلاً من `rgb(255, 87, 51)` القديم (مفصول بفواصل CSS 1). كلا الشكلَيْن صالحان ومتبادلان في كل متصفح دائم التحديث منذ 2018. تتسق الصياغة الحديثة مع باقي تدوينات CSS Color 4 الدالّية (`hsl()`، و`lab()`، و`oklch()`، و`color()`) التي تستخدم جميعها فصلاً بمسافات وشَرطة مائلة لـalpha. الشكل القديم بالفواصل يبعد استبدالاً ميكانيكياً واحداً إن تطلّبت سلسلة أدواتك ذلك؛ ويبقى `rgba()` الاحتياط الصحيح لسياقات IE 9-11.

مرجع OKLCH الداخلي لاستقرار رحلة الذهاب والإياب

رغم أن هذا الذراع يستهدف HEX → RGB تحديداً، يحمل المحوّل الأساسي المشترك اللون القانوني كثلاثية OKLCH داخلياً. هذا يعني أن رحلة HEX → RGB → HSL → OKLAB → CMYK → HEX تجري دون انجراف فاصلة عائمة عند كل خطوة؛ تتراكم المحوّلات الإرثية التي تمرّ عبر HSL أو sRGB محوراً خطأ تقريب عند كل تحويل. اختيار OKLCH (على OKLAB) يحفظ درجة اللون محوراً مستقرّاً فلا يعبر سحب منزلق درجة اللون فجأة الرماديّ. وفقاً لورقة OKLAB لـBjörn Ottosson عام 2020.

ترميز القناة: 8-بِت غير موقّعة، مُرمّزة بـgamma sRGB

كل قناة RGB عدد صحيح غير موقّع من 8 بِت (0-255)، مُرمّزة في فضاء ألوان sRGB المُعرَّف في IEC 61966-2-1 (1996). القيم *مُرمّزة بـgamma* — أي أن العلاقة بين قيمة القناة والسطوع المُدرَك غير خطّية، تتبع دالّة نقل sRGB القطاعية (تقريباً أس 2.4 مع مقطع خطّي صغير قرب الصفر). يهمّ هذا حين تجري رياضيات ألوان: متوسّط قيمتَيْن RGB في شكلهما المُرمَّز بـgamma يعطي نقطة منتصف إدراكية خطأ. للمزج الصحيح للألوان، فكّ الترميز إلى linear-RGB أوّلاً (CSS Color 4 §11.2)، ثم متوسّط، ثم أعد الترميز. يجعل النموذج الداخلي OKLCH في الأداة هذا شفّافاً.

أفضل الممارسات لسير عمل HEX / RGB

استخدم صياغة RGB الحديثة المفصولة بمسافات في الرمز الجديد

`rgb(255 87 51)` (مفصول بمسافات) و`rgb(255 87 51 / 0.5)` (شَرطة مائلة لـalpha) في CSS Color 4 هما الصياغتان القانونيّتان للرمز الذي يُشحَن في 2025 وما بعد. الشكلان القديمان بالفواصل `rgb(255, 87, 51)` و`rgba(255, 87, 51, 0.5)` ما زالا مدعومَيْن في كل مكان لكنهما مُهمَلان أسلوبياً في CSS Color 4. استخدم الصياغة الحديثة في أوراق الأنماط الجديدة؛ احتفظ بـ`rgba()` فقط لسياقات احتياط IE 9-11 حيث تحتاج فعلاً دعماً إرثياً.

تحقّق من دعم HEX الثمانية الأرقام قبل شحن رموز ذات alpha

شُحن HEX من ثمانية أرقام مع alpha (`#FF573380`) في كل المتصفحات دائمة التحديث في 2018، لكن معالجات CSS الإرثية وبعض أدوات التصميم الأقدم تقطع زوج alpha بصمت إلى HEX من ستة أرقام. النتيجة: لون توقّعت أن يكون شفافاً بنسبة 50% يُرسَم معتماً تماماً. قبل شحن HEX من ثمانية أرقام في الإنتاج، تحقّق من أن المحلّل الهدف يتعامل معه؛ للأهداف الإرثية، عُد إلى صياغة `rgba(255, 87, 51, 0.5)` الصريحة المدعومة منذ IE 9.

لا تأخذ متوسّط قنوات RGB مباشرةً لرياضيات الألوان

قنوات RGB مُرمّزة بـgamma — متوسّط قيمتَيْن RGB يعطي نقطة منتصف إدراكية خطأ. متوسّط `(255, 0, 0)` مع `(0, 255, 0)` ينتج `(127, 127, 0)`، زيتوني داكن موحل، وليس الأصفر الساطع البصري المتوقَّع. للمزج الصحيح للألوان، فكّ الترميز إلى linear-RGB أوّلاً (CSS Color 4 §11.2)، ثم متوسّط، ثم أعد الترميز. أو، الأفضل، اعمل في OKLAB أو OKLCH حيث المسافة الإدراكية موحّدة — هذا تماماً ما تفعله مولّدات لوحات نظام التصميم.

فضّل HEX لمصدر رمز التصميم، وRGB للعتاد

حين تكتب مواصفة رمز تصميم، فضّل HEX (أو OKLCH) صيغةً قانونية — كلاهما أقصر ويلائم JSON أو YAML بنظافة. حين يجري الرمز المستهلِك حسابات على كل قناة (استدعاءات canvas، ومعالجة صور، ومُشغّلات LED العتادية، وسمات ألوان OpenGL)، يكون شكل RGB الصحيح أسرع للاستهلاك. تصف الصيغتان اللون ذاته؛ والاختيار يخصّ من يقرأ ويكتب، لا الصحّة. يجعل عرض الحقول المتزامن في هذه الأداة كلتيهما رخيصتَيْن بالقدر ذاته.

وثّق alpha صراحةً في أسماء الرموز

حين يتضمّن رمز تصميم alpha (مثل طبقة تراكب بإعتام 50%)، لا تدفن alpha في HEX من ثمانية أرقام مثل `#000000CC` — قسّم الرمز إلى `--color-overlay-base: #000000` و`--color-overlay-alpha: 0.8`، أو استخدم شكل RGBA الصريح. دفن alpha في HEX يجعل الرمز غير قابل للقراءة لمن يسحب الملفّ ويجعل تعديلات alpha لكل رمز مستحيلة دون إعادة تحليل HEX أوّلاً. وضوح نظام الرموز يفوق الاختصار حين تكون التكلفة متغيّراً إضافياً واحداً.

استخدم تجزئة URL لمشاركة قرارات الألوان حيّة

يُحدِّث كل تغيير لون تجزئة URL بصيغة `#hex=ff5733` تلقائياً. انسخ URL إلى محادثة Slack أو قضيّة GitHub فمن يفتحه ينزل على اللون ذاته بثلاثية RGB ذاتها. هذا أوثق من لصق سلسلة HEX في الدردشة — أحياناً يخطئ المستلمون في كتابة الأحرف يدوياً — ويتيح لمحادثة مراجعة تصميم الإشارة إلى لون دقيق بدلاً من «البرتقالي الذي ناقشناه الثلاثاء». لا تُنقَل التجزئة أبداً إلى الخادم.

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