الأسئلة الشائعة عن محول الألوان (HEX، RGB، HSL)

كيف أقوم بتحويل HEX إلى RGB؟

لتحويل كود اللون السداسي العشري (hex) إلى RGB، قم بتقسيم السلسلة السداسية المكونة من ستة أرقام #RRGGBB إلى ثلاثة أزواج، ثم قم بتحويل كل زوج من النظام السداسي العشري (أساس 16) إلى النظام العشري (أساس 10).

مثال: #FF5733

FF = 255 (أحمر)
57 = 87 (أخضر)
33 = 51 (أزرق)
النتيجة: rgb(255, 87, 51)

بالنسبة للصيغة المختصرة (#F53)، قم بتوسيع كل رقم إلى زوج أولاً: #F53 يصبح #FF5533. يتم مضاعفة الأرقام: F يتوسع إلى FF، و 5 يتوسع إلى 55، و 3 يتوسع إلى 33.

الصيغة السداسية المكونة من ثمانية أرقام (#RRGGBBAA) تعمل بنفس الطريقة ولكن مع زوج إضافي لقناة ألفا (الشفافية). #FF573380 تضيف 80 (128، أو حوالي 50% شفافية) لقناة ألفا.

للحصول على تحويلات فورية، استخدم محول الألوان. يدعم جميع الصيغ، بما في ذلك الصيغ السداسية القصيرة والطويلة، مع وبدون ألفا.

ما الفرق بين RGB و RGBA؟

يُعرّف RGB اللون باستخدام قنوات الأحمر والأخضر والأزرق. أما RGBA فهو RGB مع قناة ألفا إضافية تتحكم في الشفافية. تتراوح قيمة ألفا من 0.0 (شفاف تماماً) إلى 1.0 (معتم تماماً).

rgb(255, 0, 0)         /* أحمر معتم تماماً */
rgba(255, 0, 0, 0.5)  /* أحمر بشفافية 50% */

في CSS الحديث (CSS Color Level 4)، لم تعد هناك حاجة لاستخدام الاسم المستعار rgba(). دالة rgb() تقبل الآن قناة ألفا اختيارية:

rgb(255 0 0 / 0.5)  /* الصيغة الحديثة، أحمر بشفافية 50% */

جميع المتصفحات الحديثة تدعم هذه الصيغة. دالة rgba() القديمة تعمل في كل مكان ولن يتم إزالتها، لكن استخدام rgb() مع صيغة الشرطة المائلة هو الأسلوب الموصى به للكود الجديد.

كيف أقوم بتحويل RGB إلى HSL؟

تحويل RGB إلى HSL يتضمن ثلاث خطوات:

تطبيع قيم RGB إلى النطاق 0-1 (القسمة على 255)
إيجاد القيمة الصغرى والعظمى من القيم الثلاث المطبعة — متوسط القيمة الصغرى والعظمى هو الإضاءة (L)
حساب درجة اللون والتشبع بناءً على القناة الأكثر هيمنة والفرق بين القيمة العظمى والصغرى

تختلف الصيغة اعتماداً على القناة اللونية السائدة:

إذا كان الأحمر هو القيمة العظمى: درجة اللون = (أخضر - أزرق) / (العظمى - الصغرى)
إذا كان الأخضر هو القيمة العظمى: درجة اللون = 2 + (أزرق - أحمر) / (العظمى - الصغرى)
إذا كان الأزرق هو القيمة العظمى: درجة اللون = 4 + (أحمر - أخضر) / (العظمى - الصغرى)
التشبع يعتمد على الإضاءة: إذا كانت L > 0.5، التشبع = (العظمى - الصغرى) / (2 - العظمى - الصغرى)، وإلا التشبع = (العظمى - الصغرى) / (العظمى + الصغرى)

الحسابات الرياضية غير بسيطة ومن السهل الوقوع في الخطأ، لذا يُنصح باستخدام أداة تحويل الألوان للحصول على نتائج فورية.

لماذا تبدو الألوان مختلفة على الشاشات المختلفة؟

يختلف مظهر الألوان بين الشاشات لعدة أسباب:

معايرة الشاشة — معظم شاشات المستهلكين غير معايرة للألوان. إعدادات المصنع الافتراضية تختلف بشكل كبير في السطوع والتباين ودرجة حرارة اللون.

اختلافات النطاق اللوني — الشاشات المختلفة تدعم نطاقات لونية مختلفة. sRGB هو معيار الويب، لكن العديد من الهواتف والحواسيب المحمولة الحديثة تدعم DCI-P3 (أوسع بنسبة 25%). اللون خارج نطاق sRGB يبدو صحيحاً على شاشة واسعة النطاق لكنه يُقص أو يُزاح على شاشة قياسية.

تقنية العرض — شاشات OLED تنتج درجات أسود أعمق وألواناً أكثر تشبعاً من شاشات LCD. لوحات IPS تتمتع بدقة ألوان أفضل من لوحات TN.

زاوية المشاهدة — الألوان تتغير عند المشاهدة من زاوية، خاصة على الشاشات الأقل جودة.

السطوع والإضاءة المحيطة — شاشة بسطوع 50% في غرفة مظلمة تبدو مختلفة عن نفس الشاشة بسطوع 100% تحت أشعة الشمس المباشرة.

لتقليل الاختلافات: اعمل في فضاء الألوان sRGB، وقم بمعايرة شاشتك باستخدام جهاز معايرة، واختبر تصاميمك على أجهزة متعددة قبل النشر.

فيمَ يُستخدم نموذج الألوان HSL؟

نموذج HSL (درجة اللون، التشبع، الإضاءة) مثالي للتلاعب البرمجي بالألوان. ميزته الرئيسية هي أن قناة واحدة تحمل معلومات "اللون" (درجة اللون)، بينما تتحكم القناتان الأخريان في المظهر بشكل مستقل عن قيمة درجة اللون.

ما يسهّله HSL:

لوحات الألوان — حافظ على نفس درجة اللون، وغيّر الإضاءة والتشبع لإنشاء مقياس لوني كامل
حالات التحويم والتفعيل — غيّر الإضاءة بنسبة مئوية ثابتة: hsl(220, 80%, 50%) -> hsl(220, 80%, 60%)
الوضع الداكن — قلل الإضاءة عبر جميع الألوان: اطرح 30% من إضاءة كل لون
السمات — استبدل قيم درجة اللون لإنشاء مخططات لونية جديدة بالكامل من نفس هيكل التشبع/الإضاءة
حالات التعطيل — قلل التشبع لإزالة حيوية العناصر: hsl(220, 80%, 50%) -> hsl(220, 30%, 70%)

ما لا يصلح له HSL:

HSL ليس متجانساً إدراكياً. لونان لهما نفس قيمة الإضاءة (مثلاً، hsl(60, 100%, 50%) — أصفر ساطع و hsl(240, 100%, 50%) — أزرق نقي) لهما سطوع مُدرَك مختلف جداً. للتلاعب اللوني المتجانس إدراكياً، استخدم OKLCH بدلاً من ذلك.

ماذا تعني علامة # في الألوان السداسية؟

بادئة # (علامة الهاش أو الجنيه) تخبر محلل CSS أن الأحرف التالية تمثل قيمة لون سداسي عشري. وهي الترميز القياسي في CSS و HTML لأكواد الألوان السداسية.

الصيغة الكاملة هي #RRGGBB أو #RRGGBBAA:

| المكون | المعنى | مثال (#FF5733) | |-----------|---------|---------------------| | # | بادئة النظام السداسي | مؤشر مطلوب | | RR | قناة الأحمر | FF (255) | | GG | قناة الأخضر | 57 (87) | | BB | قناة الأزرق | 33 (51) |

في HTML، تُستخدم # أيضاً لروابط الارتساء (<a href="#section">)، لكن في سياق CSS أو وسم style، تشير دائماً إلى لون سداسي. HTML تدعم أيضاً "الألوان المسماة" القديمة (140 اسماً معرفاً مسبقاً مثل red و blue و rebeccapurple) التي لا تتطلب #.

ما هو النطاق اللوني ولماذا هو مهم؟

النطاق اللوني هو مدى الألوان التي يمكن لجهاز عرضها أو لفضاء لوني تمثيلها. فكّر فيه على أنه "مفردات" الألوان المتاحة لشاشة أو صيغة ملف.

النطاقات اللونية الشائعة، من الأصغر إلى الأوسع:

| فضاء الألوان | الحجم النسبي | أماكن الاستخدام | |-------------|--------------|------------| | sRGB | الأساس | معيار الويب، معظم الشاشات، جميع المتصفحات | | Adobe RGB | أوسع بنسبة ~50% | التصوير الاحترافي، الطباعة | | DCI-P3 | أوسع بنسبة ~25% | الهواتف الحديثة، أجهزة Mac، العديد من الحواسيب المحمولة | | Rec. 2020 | أوسع بنسبة ~75% | تلفزيون HDR، الشاشات المتطورة |

لماذا هو مهم: اللون خارج نطاق الشاشة لا يمكن عرضه بدقة. سيقوم الجهاز بقص اللون إلى أقرب قيمة داخل النطاق، أو تقريبه. لهذا السبب قد يبدو اللون الأحمر العميق النابض بالحياة في ملف التصميم باهتاً أو طينياً على شاشة حاسوب محمول قياسية.

لتصميم الويب: صمم دائماً في sRGB أو تحقق من أن ألوانك آمنة لـ sRGB. OKLCH وفضاء الألوان display-p3 يتيحان لك استهداف نطاقات أوسع، لكن يجب عليك توفير بديل sRGB للشاشات القياسية.

ما الفرق بين hex و hex مع ألفا؟

الصيغة السداسية القياسية (#FF5733) تستخدم ستة أرقام ولا تحتوي على قناة ألفا — اللون دائماً معتم بالكامل. الصيغة السداسية مع ألفا (#FF573380) تستخدم ثمانية أرقام، بإضافة رقمين سداسيين إضافيين في النهاية لقناة ألفا (الشفافية).

قيم ألفا في النظام السداسي:

| الزوج السداسي | العشري | الشفافية | |----------|---------|---------| | 00 | 0 | شفاف تماماً | | 80 | 128 | شفافية ~50% | | FF | 255 | معتم تماماً |

أمثلة:

#FF5733     — برتقالي محمر صلب، بدون شفافية
#FF5733FF   — نفس اللون، معتم بالكامل (FF زائدة)
#FF573380   — نفس اللون، شفافية 50%
#FF573300   — نفس اللون، غير مرئي تماماً

هناك أيضاً الصيغة السداسية المختصرة المكونة من أربعة أرقام مع ألفا: #F538 تتوسع إلى #FF553388 (شفافية 50%).

دعم المتصفحات: الصيغة السداسية ذات الثمانية أرقام مدعومة في جميع المتصفحات الحديثة. لدعم المتصفحات القديمة (Internet Explorer)، استخدم rgba() بدلاً من ذلك.

كيف أختار ألواناً قابلة للوصول لموقعي الإلكتروني؟

اتبع هذه العملية خطوة بخطوة لبناء نظام ألوان قابل للوصول:

1. ابدأ بلون العلامة التجارية الأساسي. اختر درجة لون تمثل علامتك التجارية، ثم استخدم HSL أو OKLCH لإنشاء مقياس كامل من الفاتح جداً (الخلفيات) إلى الداكن جداً (النص).

2. اجعل النص قريباً من الأسود. النص الأساسي على خلفيات بيضاء يجب أن يكون #1A1A1A إلى #333333. لا تستخدم الأسود النقي (#000000) على الأبيض النقي أبداً — يسبب إجهاد العين لبعض القراء. الرمادي الداكن على الأبيض يوفر قابلية قراءة أفضل.

3. تحقق من كل زوج من المقدمة والخلفية. كل تركيبة من النص والخلفية يجب أن تلبي معايير WCAG:

النص العادي: 4.5:1 كحد أدنى (WCAG AA)
النص الكبير: 3:1 كحد أدنى (WCAG AA)
استهدف 7:1 للنص الأساسي (WCAG AAA)

4. لا تستخدم اللون أبداً كوسيلة التمييز الوحيدة. الروابط يجب أن تحتوي على تسطير (وليس لوناً مختلفاً فقط). حالات الخطأ يجب أن تتضمن أيقونات أو نصوصاً. المخططات البيانية يجب أن تستخدم أنماطاً أو تسميات.

5. اختبر باستخدام محاكيات عمى الألوان. deuteranopia (أحمر-أخضر) هو النوع الأكثر شيوعاً. تأكد من أن تصميمك يعمل بدون إدراك الألوان.

6. تحقق بالتدرج الرمادي. إذا فقد تصميمك معناه عند تحويله إلى التدرج الرمادي، فأنت تعتمد بشكل كبير على اللون لنقل المعلومات.

استخدم محول الألوان للتحقق الفوري من نسب التباين بين أي لونين.