دليل تحويل الألوان في CSS و JAVASCRIPT

تحويل ألوان HEX إلى RGB و RGBA مع الشفافية في CSS و JavaScript

دليل شامل لتحويل نماذج الألوان: المعادلات الحسابية الدقيقة، دوال جافا سكريبت النقية لأكواد 3 و 6 و 8 خانات، واستخدام دوال CSS الحديثة.

يتطلب تصميم واجهات المستخدم الحديثة وأنظمة الثيمات تحويل رموز الألوان السداسية عشرية الثابتة (مثل #3b82f6) إلى قنوات RGB أو RGBA للتحكم ديناميكياً في درجة الشفافية (rgba(59, 130, 246, 0.5)) أو لحساب نسب التباين وفق معايير الوصول WCAG. يقدم هذا الدليل المعادلات الرياضية الحسابية الدقيقة، وأكواد JavaScript عالية الكفاءة دون أي مكتبات خارجية، ودعم أكواد HEX المكونة من 8 خانات.

أداة الحل التفاعلية

100% من جانب العميل • خالية من التتبع فتح الأداة الكاملة →

أدخل أي كود لوني HEX في الأداة التفاعلية أدناه لتوليد قيم RGB و RGBA مع الشفافية المخصصة و HSL ومتغيرات CSS فورياً:

تحويل ألوان محلي بالكامل 100% في المتصفح • متوافق مع معايير W3C CSS Color 4 • صفر اتصالات شبكية
أدوات التصميم و CSS
أنماط تصميم شائعة
مقابل الأبيض (#FFFFFF)
3.68:1
AA Large Only
مقابل الأسود (#000000)
5.71:1
AA Pass

صيغ الألوان المحولة

HEX (6-digit)
#3B82F6
HEX8 (Alpha)
#3B82F6FF
RGB
rgb(59, 130, 246)
RGBA
rgba(59, 130, 246, 1)
HSL
hsl(217, 91%, 60%)
HSLA
hsla(217, 91%, 60%, 1)
HSV / HSB
hsv(217, 76%, 96%)
CMYK (Print)
cmyk(76%, 47%, 0%, 4%)
CSS OKLCH
oklch(62% 0.19 255)

مقياس التدرجات والظلال (Tailwind 50 - 950)

Click any swatch to copy

التناغم والانسجام اللوني

تصدير أكواد CSS والمتغيرات البرمجية

:root {
  --color-primary: #3B82F6;
  --color-primary-rgb: 59, 130, 246;
  --color-primary-hsl: 217deg 91% 60%;
}

1. الأساس الرياضي: تحويل النظام السداسي عشري HEX إلى قنوات RGB

تمثل أكواد HEX شدة الضوء الأحمر والأخضر والأزرق بنظام العد الست عشري (من 0 إلى F). كل زوج من الرموز يمثل عدداً صحيحاً من 8 بت يقع بين 0 و 255 (16² - 1 = 255). لتحويل الزوج `3B` إلى النظام العشري: `R = (3 × 16¹) + (11 × 16⁰) = 48 + 11 = 59`. وبتطبيق المعادلة على القنوات الثلاث، يتحول الكود `#3B82F6` بدقة إلى `rgb(59, 130, 246)`.
javascript نموذج برمجي
// التحويل الحسابي اليدوي في جافا سكريبت:
const hex = "3B82F6";
const r = parseInt(hex.slice(0, 2), 16); // 59
const g = parseInt(hex.slice(2, 4), 16); // 130
const b = parseInt(hex.slice(4, 6), 16); // 246
console.log(`rgb(${r}, ${g}, ${b})`);

استخراج قنوات الألوان باستخدام parseInt بالأساس 16.

2. دالة جافا سكريبت متكاملة تدعم أكواد 3 و 6 و 8 خانات

تتطلب البيئات الإنتاجية التعامل مع الأكواد المختصرة المكونة من 3 خانات (`#fff`)، والأكواد القياسية من 6 خانات (`#3b82f6`)، والأكواد التي تدعم قناة الشفافية من 8 خانات (`#3b82f680`). في الأكواد المختصرة يتم تكرار كل حرف مرتين (`#abc` تصبح `#aabbcc`).
javascript نموذج برمجي
function hexToRgba(hex, overrideAlpha) {
  let clean = hex.replace(/^#/, "").trim();
  if (clean.length === 3) {
    clean = clean.split("").map(c => c + c).join("");
  }
  if (clean.length === 6) {
    const num = parseInt(clean, 16);
    const r = (num >> 16) & 255;
    const g = (num >> 8) & 255;
    const b = num & 255;
    const a = overrideAlpha !== undefined ? overrideAlpha : 1;
    return `rgba(${r}, ${g}, ${b}, ${a})`;
  }
  if (clean.length === 8) {
    const num = parseInt(clean, 16);
    const r = (num >> 24) & 255;
    const g = (num >> 16) & 255;
    const b = (num >> 8) & 255;
    const a = overrideAlpha !== undefined ? overrideAlpha : +(num & 255) / 255;
    return `rgba(${r}, ${g}, ${b}, ${Number(a.toFixed(2))})`;
  }
  throw new Error("تنسيق HEX غير صالح");
}

دالة معالجة بتية عالية الأداء تدعم كافة صيغ HEX.

3. فهم أكواد الألوان السداسية عشرية المكونة من 8 خانات (#RRGGBBAA)

اعتمدت مواصفات CSS Color Module Level 4 الأكواد المكونة من 8 خانات رسمياً. يمثل آخر حرفين قناة الشفافية (Alpha) من 00 (شفاف بالكامل 0%) إلى FF (معتم بالكامل 100%). أشهر قيم الشفافية المقابلة: - `100%` = `FF` (255) - `80%` = `CC` (204) - `50%` = `80` (128) - `25%` = `40` (64) - `10%` = `1A` (26) - `0%` = `00` (0)

4. صياغة CSS الحديثة واستخدام دالة color-mix() دون الحاجة لـ JS

في معايير CSS الحديثة، لم تعد الفواصل إلزامية، حيث يمكنك كتابة `rgb(59 130 246 / 50%)`. كما تتيح دالة `color-mix()` الأصلية في متصفحات الويب تطبيق الشفافية مباشرة على متغيرات HEX دون الحاجة لتحويلها مسبقاً عبر جافا سكريبت.
css نموذج برمجي
:root {
  --brand-color: #3b82f6;
}

.card {
  /* الصياغة الحديثة مع الفاصل المائل */
  background: rgb(59 130 246 / 0.5);

  /* تطبيق الشفافية المباشرة في CSS */
  border-color: color-mix(in srgb, var(--brand-color) 50%, transparent);
}

استخدام color-mix() لتطبيق الشفافية مباشرة في صفحات الأنماط.

5. التحويل من RGB إلى HSL (تدرج اللون، والتشبع، والإضاءة)

بينما يعبر نموذج RGB عن شدة انبعاث الضوء في الشاشات، يعبر HSL عن الإدراك البصري البشري للألوان: تدرج اللون (Hue من 0° إلى 360°)، والتشبع (Saturation)، والإضاءة (Lightness). يجعل ذلك إنشاء تدرجات التفاعل (Hover و Active) أسهل بكثير بمجرد تعديل قيمة الإضاءة.

6. معايير سهولة الوصول ونسب التباين WCAG 2.1

للتحقق من سهولة القراءة وتوافق الواجهات مع معايير الوصول، يتم تحويل قيم RGB إلى إضاءة نسبية (Relative Luminance). تشترط معايير WCAG 2.1 Level AA نسبة تباين لا تقل عن 4.5:1 للنصوص العادية و 3:1 للنصوص الكبيرة.

01. معمارية انعدام التتبع والتحقق المستقل عبر أدوات المطورين

تعمل أدوات DevOmniTools حصرياً داخل الذاكرة المؤقتة لمتصفح الإنترنت بجهازك. بخلاف المحولات التقليدية التي تنقل الرموز السرية ومفاتيح التشفير وقواعد البيانات إلى خوادم سحابية، فإن عملياتنا البرمجية تنفذ محلياً عبر JavaScript وWebAssembly وواجهة W3C Web Crypto الرسمية.

يمكن للمطورين والمهندسين التحقق الفوري من ذلك: افتح أدوات المطورين (F12)، وانتقل إلى تبويب 'الشبكة' (Network)، وقم بتشغيل أي أداة. ستلاحظ عدم إرسال أي طلبات شبكية خارجية تحتوي على مدخلاتك إطلاقاً.

يتم التخلص التام من البيانات فور مسح الحقول أو إغلاق الصفحة بواسطة دورات تنظيف الذاكرة التلقائية (Garbage Collection) دون أي تخزين في IndexedDB أو localStorage.

  • انعدام الرفع السحابي: لا تمر البيانات على أي خوادم وسيطة أو برمجيات تسجيل خارجية.
  • جاهزية العمل في الشبكات المعزولة (PWA): تشغيل كامل دون اتصال بالإنترنت عبر التخزين المؤقت للخدمة.
  • عشوائية تشفيرية حقيقية: تعتمد المفاتيح والرموز على دوال window.crypto.getRandomValues() الآمنة.

02. المطابقة الدقيقة لمعايير RFC وحفظ الأعداد الكبيرة

تتطلب بيئات الإنتاج الحساسة معالجة صارمة وموثوقة للبيانات وفق المواصفات الهندسية الدولية المعترف بها من IETF و W3C دون أي تشويه للأرقام أو النصوص.

عند معالجة ملفات JSON التي تحتوي على أعداد صحيحة كبيرة بدقة 64-بت (مثل معرفات Snowflake والمعاملات المالية)، تقوم دالة JSON.parse() القياسية بتقريب الأرقام التي تتجاوز 9,007,199,254,740,991. تطبق أدواتنا معالجة تحفظ الدقة الرقمية الكاملة عبر كائنات BigInt دون أي تقريب.

تتبع معالجة CSV بدقة معيار RFC 4180 العالمي لحفظ الأصفار البادئة والنصوص متعددة الأسطر والفواصل المتنوعة.

  • معيار RFC 8259: تدقيق صارم لصيغ JSON واكتشاف أخطاء الأقواس والفواصل الزائدة.
  • معيار RFC 7519: فك وتحليل حقول رموز JWT وفحص التواقيع وتواريخ الصلاحية بدقة.
  • معيار RFC 5280: تحليل شهادات X.509 ASN.1 وملفات CSR مع قراءة النطاقات البديلة (SAN).

03. معالجة الحالات المعقدة والحماية من هجمات ReDoS

تتضمن ملفات البيانات البرمجية في كثير من الأحيان علامات ترتيب البايتات غير المرئية (UTF-8 BOM) أو محارف غير مهربة. توفر محركاتنا تشخيصاً فورياً لموقع الخطأ برقم السطر والعمود.

بالنسبة لاختبار التعابير النمطية Regex، يتم عزل التنفيذ داخل Web Workers مع تحديد أقصى وقت للمعالجة لمنع تجميد المتصفح بفعل التراجع الكارثي (ReDoS).

تستخدم خاصية النسخ السريع واجهة navigator.clipboard المباشرة لضمان سهولة النقل لخطوط الإنتاج وأنظمة النشر الآلي CI/CD.

  • إزالة علامات BOM: استبعاد الرموز الخفية \uFEFF التي تسبب تعطل برمجيات التحليل القياسية.
  • حماية ضد هجمات ReDoS: تشغيل آمن ومعزول يمنع استهلاك موارد المعالج أثناء فحص الأنماط المعقدة.
  • مخرجات منسقة ومنظمة: مسافات بادئة موحدة وفواصل أسطر قياسية تضمن توافق الأكواد مع أنظمة التشغيل.

04. التنفيذ المتوازي المدعوم بالعتاد والحماية من هجمات القنوات الجانبية

تتطلب تدفقات العمل البرمجية أداءً حسابياً سريعاً دون تعطيل واجهة المتصفح. تستفيد المنصة من خيوط Web Worker المخصصة وتقنية الذاكرة المنقولة (Transferable Objects) لعزل العمليات الثقيلة عن واجهة المستخدم.

تعتمد الدوال التشفيرية (مثل AES-GCM و HMAC) على تسريع العتاد المباشر في معالج جهازك (Intel AES-NI و ARM Crypto). وتنفذ جميع عمليات مطابقة المفاتيح في زمن ثابت لحظر هجمات القنوات الجانبية المعتمدة على قياس الزمن.

تضمن حدود الذاكرة الصارمة استقرار المتصفح ومنع انهيار النوافذ أثناء معالجة ملفات البيانات الضخمة.

  • تنفيذ في زمن ثابت: حماية متقدمة ضد هجمات التوقيت أثناء التحقق من المفاتيح والتواقيع.
  • نقل الذاكرة بدون نسخ: أداء فائق السرعة عبر خيوط المعالجة المتعددة دون إبطاء الواجهة.
  • استقرار مضمون للنظام: سقف محكم لحجم البيانات لمنع استنزاف ذاكرة المتصفح.

05. الخصوصية والتوفر دون اتصال

تعالج الأدوات الأساسية المدخلات محلياً. يرسل الذكاء الاصطناعي الاختياري المقطع المحدد بعد موافقتك عبر Cloudflare إلى Cloudflare AI أو مزود Google Gemini الاحتياطي الاختياري؛ وتطبق سياسات احتفاظ المزود بالبيانات. يرسل نموذج التواصل بياناتك إلى مزود البريد. يتطلب الاستخدام دون اتصال اكتمال تخزين الصفحة ومواردها؛ ويتطلب الذكاء الاصطناعي الخارجي وإرسال الرسائل اتصالاً بالإنترنت.

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

كيف يمكنني تحويل كود HEX مكون من 3 خانات مثل #f00 إلى RGB؟ ▼

قم بمضاعفة كل حرف لتكوين كود من 6 خانات (#ff0000). الزوج الأول (ff) يمثل الأحمر (255)، والثاني (00) يمثل الأخضر (0)، والثالث (00) يمثل الأزرق (0)، مما ينتج rgb(255, 0, 0).

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

تمثل أول 6 خانات قنوات RGB الأساسية، بينما تمثل آخر خانتين درجة الشفافية Alpha من 00 (شفاف 0%) إلى FF (معتم 100%).

ما هي صياغة CSS الحديثة لقيم RGB مع الشفافية؟ ▼

وفق معيار CSS Color 4، يمكنك كتابة rgb(59 130 246 / 50%) أو rgb(59 130 246 / 0.5) دون استخدام الفواصل أو دالة rgba التقليدية.

هل يمكنني تطبيق الشفافية على متغير لون HEX في CSS دون جافا سكريبت؟ ▼

نعم، باستخدام دالة color-mix(): background: color-mix(in srgb, var(--my-color) 50%, transparent); فورياً في ملف التنسيق.

لماذا يفضل مطورو الواجهات استخدام HSL بدلاً من RGB؟ ▼

لأن نموذج HSL يتطابق مع الإدراك البشري، مما يتيح لك بناء أنظمة الألوان وظلال الوضع الليلي بمجرد تعديل قيمة الإضاءة L مع الحفاظ على درجة اللون ثنائياً.

ضمانات الخصوصية والبنية التقنية المحلية

انعدام تسريب البيانات بالتصميم — تتم كل عملية حسابية حصرياً داخل ذاكرة متصفحك المحلي.

🛡️

معالجة محلية 100% على جانب العميل

تتم كافة العمليات داخل متصفحك باستخدام JavaScript وWebAssembly. لا يتم نقل بياناتك السرية أو مفاتيحك لأي خادم خارجي.

📐

دقة تقنية مطابقة للمواصفات القياسية

مصممة بدقة وفقاً لمعايير IETF RFC وIEEE العالمية. يتم فحص النتائج مقابل متجهات اختبار معتمدة لضمان أقصى دقة.

⚡

جاهز للعمل دون اتصال وفي الشبكات المعزولة

تعمل دون اتصال بالإنترنت عبر التخزين المؤقت PWA. آمنة تماماً للاستخدام داخل الشبكات المصرفية والأنظمة المعزولة.

🔒

انعدام التتبع والبرمجيات التحليلية

خالية تماماً من أدوات التتبع الإعلانية وملفات تعريف الارتباط. بياناتك ومعاملاتك البرمجية محمية وسرية 100%.

عزز كفاءة سير عملك اليومي بمرافق برمجية مكملة تعمل محلياً بخصوصية تامة داخل متصفحك.

التصميم والوصول WCAG AAA

فاحص تباين الألوان (WCAG)

فحص نسب تباين الألوان وفق معايير سهولة الوصول العالمية WCAG 2.1 بمستوياتها AA و AAA لضمان تجربة مستخدم مثالية.

تشغيل الأداة
التصميم و CSS محرر مرئي تفاعلي

مُولّد ومحرر CSS Flexbox المرئي التفاعلي

أداة بصرية تفاعلية لتصميم تخطيطات Flexbox مع معاينة فورية، وضبط اتجاه العناصر والمحاذاة، وتوليد أكواد CSS و Tailwind جاهزة للنسخ.

تشغيل الأداة
التصميم و CSS أداء فائق

مُولّد الزجاج المصنفر CSS

تصميم وتخصيص تأثيرات الزجاج المصنفر والظلال العصرية مع تصدير كود CSS جاهز للاستخدام الفوري في مواقعك.

تشغيل الأداة
الفيكتور والتصميم تحويل فيكتور فائق الدقة

محول ملفات SVG إلى PNG وصور نقطية

تحويل رسومات الفيكتور SVG إلى صور عالية الدقة PNG و WebP و JPEG بمضاعفات حجم تصل إلى 8x مع دعم الشفافية وبشكل محلي 100%.

تشغيل الأداة
الخطوط والتصميم تحويل Vector إلى خط مجاناً

محول الرسومات المتجهة و SVG إلى خط ويب (TTF)

تحويل الرسومات المتجهة (SVG) ومشاريع IcoMoon إلى ملفات خط TrueType (.ttf) مجاناً داخل المتصفح. معاينة فورية وكود CSS @font-face بدون رفع ملفاتك.

تشغيل الأداة