محول HEX / RGB / HSL
حوّل رموز الألوان فوراً بين جميع الصيغ التي يستخدمها المصممون والمطورون فعلياً.
#6366F1
rgb(99, 102, 241)
صيغ الألوان
اللون المكمل
الهيكس وRGB هما نفس اللون بملابس مختلفة. `#FF5733` و`rgb(255, 87, 51)` يصفان بكسلًا متطابقًا — أحدهما مكتوب بالأساس 16 للإيجاز، والآخر بالعشري للقراءة. فهم أنهما تدوينان لا صيغتان هو ما يجعل العمل باللون في CSS يستقر. يتنقّل هذا المحوّل بين الهيكس وRGB وHSL فورًا، والثالث هو حيث يصير مفيدًا حقًا: يفصل HSL اللون إلى صبغة وتشبّع وإضاءة، ما يعني أنك تستطيع بناء لوحة متماسكة بتعديل رقم واحد بدل تخمين أكواد هيكس حتى يبدو شيء صحيحًا.
كيف يعمل المحوّل
أدخل لونًا بأي تدوين مدعوم — هيكس بعلامة المربّع أو دونها، أو قيم RGB، أو HSL — ويُنتج المحوّل الآخرَين فورًا مع معاينة حيّة. الهيكس إلى RGB تحويل أساس: كل زوج من أرقام الهيكس يصير قيمة عشرية من 0 إلى 255. أما HSL فيتطلّب عملًا أكثر، إذ يُسقط اللون في فضاء أسطواني حيث الصبغة زاوية حول عجلة، ولهذا هو أكثر بداهةً للتعديل يدويًا.
التحويلات
هيكس → RGB
R = parseInt(hex.slice(0,2), 16)
G = parseInt(hex.slice(2,4), 16)
B = parseInt(hex.slice(4,6), 16)
RGB → هيكس
hex = '#' + كل قيمة.toString(16).padStart(2,'0')
مثال:
#FF5733 → FF = 255، 57 = 87، 33 = 51
→ rgb(255, 87, 51)كل زوج هيكس يغطّي 00 إلى FF، وهو 0 إلى 255 عشريًا — 256 قيمة ممكنة لكل قناة، و256³ ≈ 16.7 مليون لون إجمالًا. هذا أصل «16.7 مليون لون» في مواصفات الشاشات. الاختصار الثلاثي `#F53` يتمدّد بمضاعفة كل رقم إلى `#FF5533`، ولهذا لا يستطيع التعبير إلا عن 4,096 لونًا ولهذا يفشل لمعظم قيم اللوحات الحقيقية. الهيكس بالأحرف الكبيرة والصغيرة متطابق؛ الاختيار أسلوبي بحت.
ما يجب معرفته عن تدوين الألوان
- 1HSL هو التدوين الذي تلجأ إليه عند التصميم لا النسخ. الصبغة زاوية من 0 إلى 360 على عجلة الألوان، فاللون المكمّل هو ببساطة الصبغة زائد 180. بناء لوحة بـHSL يعني تغيير رقم واحد؛ وبناؤها بالهيكس يعني التخمين. تقبل المتصفحات HSL مباشرةً في CSS، فلا حاجة لخطوة تحويل.
- 2استخدم الهيكس الثماني للشفافية. `#FF5733CC` يُلحق قناة ألفا حيث CC نحو 80% عتامة. هذا مدعوم في كل متصفح حديث وغالبًا أنظف من التبديل إلى تدوين `rgba()` في منتصف ورقة أنماط.
- 3الهيكس ليس موحّدًا إدراكيًا، ولهذا تبدو اللوحات المبنية بدفع قيم الهيكس غير متسقة. `#808080` ليس نصف سطوع `#FFFFFF` إدراكيًا — الرؤية البشرية تستجيب للضوء لا خطيًا. لهذا قد يبدو لونان بنفس «المسافة» الهيكسية مختلفَين بشدة في التباين.
- 4تحقّق دائمًا من التباين لا الجماليات فقط. تتطلّب WCAG نسبة 4.5:1 بين النص والخلفية للنص العادي. الرمادي الفاتح على الأبيض فشل إمكانية وصول متكرّر يجتاز الفحص البصري ويفشل مع المستخدمين الحقيقيين، خصوصًا على شاشات أقل جودة أو في ضوء النهار.
- 5يدعم CSS الحديث فضاءات لونية تتجاوز RGB. `oklch()` موحّد إدراكيًا، أي أن تغييرات رقمية متساوية تُنتج تغييرات مُدرَكة متساوية — ما يجعل توليد مجموعة ظلال تبدو متباعدة بالتساوي فعلًا ممكنًا لأول مرة. دعم المتصفحات الآن واسع بما يكفي لاستخدامه في الإنتاج.
الأسئلة الشائعة
ما الفرق بين الهيكس وRGB؟
لا شيء، من حيث اللون المُنتَج — إنهما تدوينان لنفس القيم. يكتب الهيكس كل قناة كرقمين بالأساس 16، ويكتبها RGB كأرقام عشرية من 0 إلى 255. `#FF5733` و`rgb(255, 87, 51)` يُعرضان بشكل متطابق. الهيكس أوجز ويسود أدوات التصميم؛ وRGB أسهل للتلاعب برمجيًا لأن القيم أرقام أصلًا.
ماذا يعني اختصار الهيكس الثلاثي؟
يتمدّد بمضاعفة كل رقم: `#F53` تصير `#FF5533`. هذا يجعله اختصارًا مريحًا لمجموعة صغيرة من الألوان، لكنه لا يستطيع التعبير إلا عن 4,096 تركيبة بدل 16.7 مليون، فمعظم ألوان اللوحات الحقيقية ليس لها صيغة ثلاثية. مقبول للنماذج السريعة وغير مناسب للوحة مُصمَّمة.
كيف أضيف شفافية للون هيكس؟
ألحق رقمين إضافيين لقناة ألفا: `#FF5733CC` حيث CC نحو 80% عتامة. تمتد ألفا من 00 (شفاف كليًا) إلى FF (معتم كليًا). كل متصفح حديث يدعم هذا. البديل هو `rgba(255, 87, 51, 0.8)`، الأكثر قابلية للقراءة لكنه يتطلّب تبديل التدوين وسط ورقة الأنماط.
لماذا أستخدم HSL بدل الهيكس؟
لأن HSL مُصمّم ليعدّله البشر. الصبغة موضع على عجلة الألوان، والتشبّع شدّة، والإضاءة سطوع — فجعل لون أغمق يعني خفض رقم واحد بدل إعادة حساب ثلاثة. توليد لوحة متماسكة، أو إيجاد ألوان مكمّلة، أو إنتاج مجموعة درجات — كلها تصير عمليات مباشرة بدل تجربة وخطأ.
لماذا تبدو ألواني مختلفة على شاشات أخرى؟
لأن نفس قيمة الهيكس تُفسَّر بشكل مختلف من شاشات مختلفة. تتباين الشاشات في نطاق الألوان والمعايرة والملف الافتراضي، فـ`#FF5733` على حاسوب محمول غير معاير ليس فعلًا اللون الذي هو عليه على شاشة معايرة. لهذا يستخدم عمل الطباعة CMYK بملفات ألوان، ولهذا تحدّد إرشادات العلامات التجارية الألوان في أنظمة متعددة بدل الثقة بكود هيكس واحد.