محوّل RGB إلى Hex

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

// Serialize {r, g, b, alpha} → canonical hex string
// Emits 6-digit #RRGGBB when alpha === 1, 8-digit #RRGGBBAA otherwise.
function formatHex({ r, g, b, alpha = 1 }) {
  const pair = (v) => Math.round(v).toString(16).padStart(2, '0').toUpperCase();
  const rgb = pair(r) + pair(g) + pair(b);
  if (alpha >= 1) return `#${rgb}`;
  const a = pair(alpha * 255);
  return `#${rgb}${a}`;
}

console.log(formatHex({ r: 255, g: 87, b: 51 }));              // '#FF5733'
console.log(formatHex({ r: 59, g: 130, b: 246 }));             // '#3B82F6'
console.log(formatHex({ r: 255, g: 87, b: 51, alpha: 0.5 })); // '#FF573380'
console.log(formatHex({ r: 5, g: 0, b: 0 }));                  // '#050000' — padStart matters

أبرز الميزات

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

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

rgb(255 87 51)

rgb(59 130 246)

rgb(255 87 51 / 0.5)

rgb(100% 50% 0%)

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

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

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

1. 1

   اكتب أو الصق ثلاثيّة RGB في حقل RGB

   أنزل أي قيمة `rgb()` في حقل إدخال RGB — مفصولة بمسافات حديثة `rgb(255 87 51)`، أو بفواصل إرثية `rgb(255, 87, 51)`، أو مع alpha عبر شَرطة مائلة `rgb(255 87 51 / 0.5)` أو عبر شكل `rgba(255, 87, 51, 0.5)`، أو بقنوات بنسب مئوية `rgb(100% 34% 20%)`. تطبّع الأداة كل أشكال الإدخال إلى ثلاثيّة RGB داخلية ذاتها قبل حساب hex. تنتج الأحرف غير الصالحة، أو الأعداد الصحيحة خارج المدى، أو الصياغة المشوّهة خطأً سطرياً صامتاً؛ ويُحدّث RGB الصالح كل حقل صيغة أخرى في الزمن الحقيقي.

2. 2

   اقرأ رمز hex من حقل HEX

   يعرض حقل HEX فوق حقل RGB قيمة hex المطابِقة: `#FF5733` للون معتم، و`#FF573380` للون ذي alpha (الشكل من ثمانية أرقام). يستخدم الإخراج أرقام hex بأحرف كبيرة افتراضياً للاتساق مع معظم إرشادات العلامات؛ والأحرف الصغيرة (`#ff5733`) تبعد استبدالاً ميكانيكياً واحداً وتظلّ CSS صالحاً بالقدر ذاته. التحويل دقيق على مستوى البِت — رحلة ذهاب وإياب RGB → HEX → RGB تستعيد الثلاثيّة الأصلية حرفياً دون انجراف فاصلة عائمة.

3. 3

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

   لكل بطاقة صيغة زرّ «نسخ» على اليمين. نقرة واحدة فتنزل القيمة على حافظتك — يومض نصّ الزرّ بسرعة بكلمة «نُسخت!» لإعلامك. السلسلة المنسوخة تتضمّن `#` الافتتاحية فتُلصَق مباشرةً في قاعدة CSS، أو حقل لون في Figma، أو امتداد hex في SwiftUI، أو `colors.xml` في Android. لصياغة خاصّة بمنصّة محدّدة (`Color(red:green:blue:)` في SwiftUI، و`Color(0xFF...)` في Compose، ورموز `@theme` في Tailwind v4)، استخدم قسم «نسخ كرمز» تحت المنتقي.

4. 4

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

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

5. 5

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

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

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

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.

Skip rounding:
(0.5 * 255).toString(16) → '7f.8'
Produces invalid hex with a decimal point.

Round to integer first:
Math.round(0.5 * 255).toString(16).padStart(2, '0') → '80'
Valid 2-digit hex pair; matches CSS Color 4 normalization.

Emit Android leading-alpha hex into CSS:
rgb(255 87 51 / 0.5) → #80FF5733 (Android format)
CSS parses as alpha=128, R=255, G=87, B=51 — wrong color entirely.

Use the target platform's documented format:
for CSS: #FF573380 (alpha as last byte)
for Android Compose: Color(0x80FF5733) (alpha as first 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.

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

مطوّرو الواجهة الأمامية يحوّلون RGB من canvas إلى hex في CSS

تُفيد دوالّ الرسم في Canvas API عن الألوان وتقبلها ثلاثيّات RGB (`ctx.fillStyle = 'rgb(255 87 51)'`)، لكن ورقة أنماط CSS المحيطة تريد متغيّرات hex (`--color-fill: #FF5733`). لصق RGB مرّة واحدة يُنتج hex المطابِق، جاهزاً لإسقاطه في خاصّية CSS مخصّصة. مفيد عند استخراج ألوان علامة من رسم بياني مُرسَم على canvas أو تصوّر بيانات لإعادة الاستخدام في واجهة ساكنة.

المصمّمون يحوّلون RGB من Photoshop إلى hex في Figma

يُفيد منتقي ألوان Adobe (في Photoshop، وIllustrator، وInDesign) عن RGB بثلاثة أعداد صحيحة من 0-255 عبر ثلاث مربّعات قنوات. تعرض Figma، بالمقابل، قيم الألوان بـhex افتراضياً في لوحات التصميم. الصق الأعداد الصحيحة الثلاثة من Photoshop كـ`rgb(...)` هنا، انسخ إخراج hex، أسقطه في حقل لون Figma. تطابق لون Photoshop الأصلي تماماً دون لفّ لقطة شاشة وقطّارة ألوان.

مطوّرو العتاد يحوّلون RGB من حسّاس LED إلى hex للويب

تُفيد شرائط LED القابلة للعنونة، وحسّاسات الألوان، وكاميرات RGB العتادية عن قيم القنوات أعداداً صحيحة من 0-255. حين تحتاج القراءات أن تقود لوحة تحكّم ويب («المصباح يتوهّج حالياً بهذا اللون»)، يكون رمز hex المطابِق هو ما تتوقّعه سمة `style="background: ..."` في CSS. الصق ثلاثيّة RGB من الحسّاس، انسخ hex، أوصله بترميز لوحة التحكّم.

مطوّرو الألعاب يصدّرون لون Unity إلى نموذج الويب

تأخذ مُنشئات `Color` في Unity و`FLinearColor` في Unreal فواصل عائمة مطبّعة من 0-1؛ ضرب كل منها في 255 يعطي أعداد RGB الصحيحة المطابِقة. الصق `rgb(...)` الناتج هنا، انسخ hex، أسقطه في نموذج الويب أو موقع التسويق الذي يحتاج إلى مطابقة لون التمييز داخل اللعبة تماماً. يُسطِّح عرض OKLCH المتزامن أيضاً السطوع الإدراكي ليُضبَط نمط لوحة النموذج يدوياً ليطابق مستويات سطوع اللعبة.

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

حين يُفيد دليل أسلوب العلامة عن الألوان كثلاثيّات RGB صحيحة («برتقالي العلامة هو RGB ‏255 / 87 / 51») لكن أداة تدقيق WCAG تريد رموز hex، يكون هذا المحوّل الجسر. الصق ثلاثيّة RGB، انسخ hex، شغّله عبر التدقيق. تُسطِّح شارات تباين WCAG وAPCA في هذه الأداة أيضاً الحكم في خطوة واحدة، فلا تحتاج إلى التنقّل بين ثلاث أدوات منفصلة.

مطوّرو البريد يرحّلون `rgba()` إلى hex من ثمانية أرقام

يدعم HTML عميل البريد الإلكتروني الحديث hex من ثمانية أرقام (`#FF573380`) للألوان ذات alpha، لكن القوالب الإرثية كثيراً ما تخزّن القيمة ذاتها كـ`rgba(255, 87, 51, 0.5)`. لصق `rgba()` هنا وقراءة إخراج hex من ثمانية أرقام يجعل الترحيل ميكانيكياً. يعرض حقل HEX `#FF573380` لحالة alpha ‏50%؛ ويبقى الشكل الإرثي `rgba()` في حقل RGB لسياقات احتياط ما زالت تحتاجه.

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

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

مهندسو ضمان الجودة يؤكّدون ألوان البكسلات مقابل مواصفات hex

تلتقط اختبارات الانحدار البصري أحياناً ألوان البكسلات أعداد RGB صحيحة (`expect(pixel).toMatchRgb([255, 87, 51])`)، بينما تُعطى المواصفة الأساسية بـhex («يجب أن تُرسَم الأزرار كـ`#FF5733`»). لصق RGB الملتقَط هنا يُنتج hex المطابِق، الذي يستطيع مهندس ضمان الجودة مقارنته مباشرةً بالمواصفة. تعني الدقّة على مستوى البِت للتحويل أن المقارنة لن تتذبذب بسبب فوارق انجراف الفاصلة العائمة.

رياضيات RGB إلى Hex والتسلسل

`toString(16).padStart(2, '0')` هو التنفيذ بسطر واحد

يلائم تحويل RGB إلى hex بأكمله تعبيراً واحداً لكل قناة: `value.toString(16).padStart(2, '0')`. تحوّل `toString(16)` في JavaScript العدد العشري الصحيح إلى تمثيله بأساس 16 سلسلة. `padStart(2, '0')` هي التفصيلة سهلة النسيان — بدونها، تتسلسل قيمة القناة 5 كـ`'5'` بدلاً من `'05'`، فينتج hex من 5 أحرف غير صالح مثل `#55733` حين يُدمَج مع القنوات الأخرى. الاصطلاح القياسي هو `[r, g, b].map(v => v.toString(16).padStart(2, '0')).join('')` متبوعاً ببادئة `'#'`.

تطبيع النسب المئوية: × 255 / 100، ثم دوّر

تسمح CSS Color 4 بقنوات بنسب مئوية في `rgb()`: ‏`rgb(100% 34% 20%)` يكافئ `rgb(255 87 51)`. قاعدة التطبيع هي `Math.round(percent × 255 / 100)`. `50% × 255 / 100 = 127.5` يُدوَّر إلى 128 (تدوير مصرفي بعيداً عن .5). تنطبق القاعدة ذاتها على alpha حين تُعبَّر كنسبة مئوية (`rgb(255 87 51 / 50%)` ↔ `rgb(255 87 51 / 0.5)`). يُنتج شكلا الأعداد الصحيحة والنسب المئوية إخراج hex متطابقاً بعد التطبيع؛ تُسطّح الأداة الشكل القانوني للأعداد الصحيحة في حقل RGB بعد إعادة التطبيع.

alpha إلى hex: اضرب في 255، دوّر، رمّز كزوج لاحق

RGB ذو alpha (`rgb(255 87 51 / 0.5)`) يُصدِر hex من ثمانية أرقام بضرب alpha في 255، والتدوير إلى أقرب عدد صحيح، والترميز كزوج hex رابع مُلحَق بعد RGB. `0.5 × 255 = 127.5`، مدوّرة إلى 128 = `0x80`، فالإخراج `#FF573380`. تستخدم مواصفة CSS Color 4 التدوير المصرفي (تدوير نصف إلى زوجي) لهذا التحويل، وهو ما تتبعه الأداة. يعود الشكل من ثمانية أرقام إلى ستة أرقام حين تكون alpha تساوي 1 بالضبط لتجنّب تسرّب أزواج `FF` لاحقة إلى أوراق الأنماط.

إدخال RGB: CSS Color 4 المفصول بمسافات والإرثي بالفواصل كلاهما مقبول

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

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

رغم أن هذا الذراع يستهدف RGB → HEX تحديداً، يحمل المحوّل الأساسي المشترك اللون القانوني كثلاثيّة OKLCH داخلياً. هذا يعني أن رحلة RGB → HEX → HSL → OKLAB → CMYK → RGB تجري دون انجراف فاصلة عائمة عند كل خطوة؛ تتراكم المحوّلات الإرثية التي تمرّ عبر 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 في الأداة هذا شفّافاً.

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

فضّل hex بأحرف كبيرة في إرشادات العلامة، وأحرف صغيرة في الرمز

إرشادات العلامة، وملفّات PDF التسويقية، وتوثيق المصمّمين تستخدم عادةً hex بأحرف كبيرة (`#FF5733`) للاتساق البصري — تُقرَأ الأحرف الكاملة كمعرّف علامة. الرمز (CSS، وJSON، ومصدر JavaScript) يستخدم عادةً الأحرف الصغيرة (`#ff5733`) اصطلاحاً لأنها أسرع كتابة وأكثر شيوعاً في إخراج المُدقّقات الآلي. كلاهما CSS صالح ويُحلَّل بصورة متطابقة؛ اختر واحداً لكل سياق وثابت عليه. تُصدِر الأداة أحرفاً كبيرة افتراضياً؛ استبدال ميكانيكي واحد يقلبها إلى صغيرة.

أصدر hex من ثمانية أرقام فقط حين تكون alpha < 1

حين تساوي alpha ‏1 (معتم بالكامل)، ارجع إلى الشكل من ستة أرقام. زوج `FF` لاحق (`#FF5733FF`) CSS قانوني لكنه يزدحم بصرياً في أوراق الأنماط ويربك بعض المحلّلات الإرثية في عرضه خطأً. ينبغي أن يظهر الشكل من ثمانية أرقام فقط حين تكون alpha شفافة بمعنى ذي دلالة. تتبع هذه الأداة تلك القاعدة تلقائياً — الألوان المعتمة تُصدِر hex من ستة أرقام، والألوان ذات alpha تُصدِر hex من ثمانية أرقام، والقطع دقيق (alpha = 1.0 تُصدِر 6 أرقام؛ alpha = 0.9999 تُصدِر 8 أرقام لحفظ البيانات).

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

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

فضّل hex لمتغيّرات CSS، وRGB للعتاد

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

تحقّق من مدى alpha قبل الضرب في 255

عند تنفيذ محوّلك الخاصّ RGB → hex من ثمانية أرقام، تحقّق من أن فاصلة alpha العائمة تقع داخل `[0, 1]` قبل خطوة `× 255`. alpha خارج المدى (سالبة، أو > 1) تُنتج بصمت أزواج hex غير صالحة تقبلها بعض المحلّلات وترفضها أخرى — وضع فشل هشّ. ثبّت أوّلاً (`Math.max(0, Math.min(1, alpha))`)، ثم اضرب، ثم دوّر، ثم رمّز بـhex. تُسطِّح الأداة خطأً سطرياً صامتاً لـalpha خارج المدى بدلاً من إصدار سلسلة hex مكسورة.

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

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

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