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 Code Example
// التحويل الحسابي اليدوي في جافا سكريبت:
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 Code Example
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 Code Example
: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 للنصوص الكبيرة.