‏HEX وRGB وHSL وCMYK: أي صيغة لونية تستخدم ومتى
===============================================

أربع صيغ لونية وأربع حالات استخدام مختلفة. يشرح هذا الدليل بدقة متى تستخدم HEX أو RGB أو HSL أو CMYK، مع أمثلة واقعية من تصميم الويب والطباعة ووسائل التواصل وتطوير التطبيقات.

Author: Lubor Šimůnek
Published: 2026-03-21
Category: التصميم

اللون نفسه بأربع لغات مختلفة

اختر أي لون — لنقل مثلاً لوناً مرجانياً دافئاً. والآن صِفه بأربع طرق:

- HEX: ‏#E8635A
- RGB: ‏rgb(232, 99, 90)
- HSL: ‏hsl(4, 75%, 63%)
- CMYK: ‏0, 57, 61, 9

الصيغ الأربع تصف اللون نفسه تماماً. إنها ليست معايير متنافسة، بل تمثيلات مختلفة للون، كل واحدة منها محسَّنة لسياق مختلف. ينشأ الالتباس من عدم معرفة أي سياق يستدعي أي صيغة.

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

‏HEX: معيار الويب

ما هي

‏HEX (النظام الست عشري) هي شفرة من ستة رموز يسبقها رمز المربّع: #E8635A. يمثّل كل زوج من الرموز قناة الأحمر والأخضر والأزرق بالترميز الست عشري (من 00 إلى FF).

وهي مطابقة وظيفياً لـ RGB تماماً، والفرق في طريقة الكتابة فقط. فـ #E8635A هو نفسه rgb(232, 99, 90). ‏HEX ببساطة طريقة أكثر اختصاراً لكتابة قيم RGB.

متى تستخدم HEX

- ‏CSS وتطوير الويب — ‏HEX هي الصيغة اللونية الافتراضية في CSS، وكل المتصفحات تفهمها. وcolor: #E8635A; هي الطريقة الأكثر شيوعاً لتحديد اللون على الويب.
- أدوات التصميم — تستخدم Figma وSketch وAdobe XD وCanva جميعها HEX كصيغة إدخال أساسية. وحين يقول المصمم «الأزرق هو ‎#3B82F6» يفهم الجميع ما يقصده.
- أدلة الهوية البصرية — تكاد أدلة العلامات التجارية الرقمية لا تخلو من قيم HEX لأنها قصيرة وواضحة وسهلة النسخ واللصق.
- التواصل السريع — كتابة «استخدم ‎#333» في رسالة على Slack أسرع من «استخدم ‎rgb(51, 51, 51)».

متى لا تستخدم HEX

- عندما تحتاج إلى الشفافية — لا تدعم صيغة HEX القياسية ذات الستة رموز قناة الشفافية. ستحتاج إلى HEX بثمانية رموز (#E8635A80) وهي أقل وضوحاً، أو الانتقال إلى RGBA.
- عندما تحتاج إلى تعديل الألوان برمجياً — حساب «اجعل هذا أفتح بنسبة 20%» ذهنياً بصيغة HEX شبه مستحيل. صيغة HSL أفضل بكثير لهذا الغرض.
- الإنتاج الطباعي — المطابع لا تستخدم HEX. أبداً.

مثال واقعي

لنفترض أنك تكتب CSS لصفحة هبوط. يسلّمك المصمم دليل أسلوب يتضمن ألوان العلامة التجارية، فتكتب:

:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }

‏HEX مثالية هنا: مختصرة وواضحة ومدعومة في كل مكان.

‏RGB: نموذج ألوان الشاشات

ما هي

يشير RGB إلى الأحمر والأخضر والأزرق — ألوان الضوء الثلاثة التي تمزجها الشاشات لإنتاج كل لون تراه. تتراوح قيمة كل قناة بين 0 و255. فـ rgb(232, 99, 90) تعني 232 وحدة من الأحمر و99 وحدة من الأخضر و90 وحدة من الأزرق.

‏RGB هي أساس كل لون رقمي. و HEX ليست سوى RGB بترميز مختلف، و HSL تحويل لـ RGB أقرب إلى إدراك الإنسان. وكل ما يظهر على شاشتك يتحوّل في النهاية إلى قيم RGB تُرسل إلى وحدات البكسل.

متى تستخدم RGB

- عندما تحتاج إلى الشفافية — تضيف RGBA قناة شفافية: rgba(232, 99, 90, 0.5) لعتامة بنسبة 50%. وهذا أوضح من HEX بثمانية رموز، ومدعوم على نطاق واسع في CSS وأدوات التصميم ولغات البرمجة.
- البرمجة وتطوير التطبيقات — تتعامل أطر عمل التطبيقات مثل Swift وKotlin وFlutter وReact Native مع قيم RGB/RGBA داخلياً في العادة.
- ‏LED والإضاءة — تستخدم المصابيح الذكية (Philips Hue وشرائط LED) قيم RGB. وإذا كنت تصمم تركيبات إضاءة فعلية، فإن RGB هي الصيغة الأصلية لها.
- حسابات الألوان — مزج الألوان أو استيفاء التدرجات أو توليد الألوان برمجياً كلها عمليات مباشرة في RGB.

متى لا تستخدم RGB

- الطباعة — الشاشات تبعث الضوء (مزج جمعي)، أما الورق فيعكسه (مزج طرحي). ولذلك لا تستطيع RGB أن تمثّل بدقة ما سيخرج من المطبعة.
- ضبط الإضاءة أو التشبّع — «قلّل تشبّع هذا اللون بنسبة 30%» ليست عملية بديهية في RGB، إذ ستحتاج إلى التحويل إلى HSL أولاً.

مثال واقعي

لنفترض أنك تبني تطبيقاً بـ React Native وتحتاج إلى طبقة تغطية شبه شفافة:

backgroundColor: 'rgba(0, 0, 0, 0.6)'

‏RGB مع قناة الشفافية هي الخيار الطبيعي هنا — مباشرة وواضحة وأصلية بالنسبة لمحرك العرض.

‏HSL: صيغة المصممين

ما هي

يشير HSL إلى درجة اللون (Hue) والتشبّع (Saturation) والإضاءة (Lightness):

- درجة اللون (0°–360°) — اللون نفسه بوصفه موضعاً على عجلة الألوان. فـ 0° أحمر و120° أخضر و240° أزرق.
- التشبّع (0%–100%) — مدى حيوية اللون. فـ 0% رمادي و100% هو أنقى صورة لدرجة اللون.
- الإضاءة (0%–100%) — مدى فتاحة اللون أو قتامته. فـ 0% أسود و100% أبيض و50% هو اللون «الحقيقي».

‏hsl(4, 75%, 63%) تعني: درجة لون مائلة إلى الأحمر (4°)، وحيوية عالية جداً (تشبّع 75%)، وفاتحة قليلاً (63%).

متى تستخدم HSL

- أنظمة التصميم والسمات — ‏HSL هي أفضل صيغة لبناء سلالم لونية متسقة. أتريد عشر درجات من لونك الأساسي؟ أبقِ درجة اللون ثابتة وغيّر الإضاءة من 10% إلى 95%. أتريد نسخة هادئة؟ اخفض التشبّع. هذا شبه مستحيل بديهياً في HEX أو RGB.
- الوضع الداكن والوضع الفاتح — تبديل السمات يعني ضبط الإضاءة والتشبّع، وهو ما ينعكس مباشرة على معاملات HSL. وقد بُنيت Tailwind CSS وRadix Colors وكثير من أنظمة التصميم الحديثة على HSL.
- توليد الألوان برمجياً — توليد حالات التمرير والتعطيل والخلفيات والحدود من لون أساسي واحد أمر بالغ البساطة في HSL: hsl(4, 75%, 73%) لنسخة أفتح، وhsl(4, 75%, 43%) لنسخة أدكن.
- سهولة الوصول — يصبح فحص نسب التباين أكثر بداهة حين يمكنك رؤية الإضاءة وضبطها مباشرة.

متى لا تستخدم HSL

- التواصل بين الفرق — معظم الناس لا يفكرون بالدرجات والنسب المئوية. فقول «الزر هو ‎hsl(4, 75%, 63%)» أقل وضوحاً من «الزر هو ‎#E8635A» عند تسليم التصميم.
- الطباعة — مثل RGB تماماً، فـ HSL نموذج ألوان مخصص للشاشات.

مثال واقعي

لنفترض أنك تبني نظام تصميم بـ Tailwind CSS وتحتاج إلى سلّم لوني متسق:

--brand-50: hsl(4, 75%, 95%);
--brand-100: hsl(4, 75%, 90%);
--brand-200: hsl(4, 75%, 80%);
--brand-500: hsl(4, 75%, 63%);
--brand-700: hsl(4, 75%, 43%);
--brand-900: hsl(4, 75%, 25%);

درجة اللون نفسها والتشبّع نفسه وإضاءة مختلفة. سلّم مثالي في ثلاثين ثانية. جرّب فعل ذلك بصيغة HEX.

‏CMYK: صيغة الطباعة

ما هي

يشير CMYK إلى السماوي والأرجواني والأصفر والأسود (Key). وهي تصف اللون بوصفه مزيجاً من الحبر يوضع على ورق أبيض. وتتراوح كل قيمة بين 0% و100%: فـ 0, 57, 61, 9 تعني 0% سماوي و57% أرجواني و61% أصفر و9% أسود.

وعلى خلاف RGB التي تضيف الضوء لتكوين الألوان، تطرح CMYK من بياض الورق. فكلما زاد الحبر أصبح اللون أدكن. ولهذا يسمّى نموذجاً لونياً طرحياً.

متى تستخدم CMYK

- تصميم المطبوعات — بطاقات العمل والكتيبات والتغليف والملصقات والمجلات. أي ملف يُرسل إلى مطبعة تجارية ينبغي أن يكون بنمط ألوان CMYK.
- تجهيز الملفات للطباعة في InDesign وIllustrator — تتيح لك هذه الأدوات العمل بنمط CMYK لمعاينة كيف ستبدو الألوان على الورق (وهي دائماً أقل حيوية مما تظهر على الشاشة).
- تدقيق الألوان — التحقق من إمكانية إعادة إنتاج ألوان تصميمك بـ CMYK. فبعض ألوان RGB الزاهية (خصوصاً الأخضر النيوني والأزرق الكهربائي) يستحيل طبعها فيزيائياً بـ CMYK، إذ تقع «خارج نطاق الألوان».

متى لا تستخدم CMYK

- أي شيء يظهر على شاشة — المواقع والتطبيقات ووسائل التواصل الاجتماعي والعروض التقديمية والبريد الإلكتروني. الشاشات تستخدم RGB. وتحديد CMYK لموقع إلكتروني أشبه بإعطاء إرشادات الطريق بالأميال البحرية — إنها وحدة مسافة بالفعل، لكنها عديمة الفائدة في هذه الرحلة.
- تحرير الصور — حرّر بصيغة RGB، ولا تحوّل إلى CMYK إلا في مرحلة التصدير النهائي للطباعة.

مثال واقعي

صمّمت ملصقاً في Illustrator. وقبل إرساله إلى المطبعة تحوّل المستند إلى نمط ألوان CMYK (File → Document Color Mode → CMYK Color)، وتتحقق من تحذيرات خروج الألوان عن النطاق، وتعدّل الأزرق الكهربائي الذي انزلق إلى أخضر مزرق باهت. ثم يُحفظ ملف PDF النهائي بصيغة CMYK مع ملف تعريف ICC الخاص بالمطبعة.

جدول مرجعي سريع

الصيغة | الأفضل لـ | النطاق | تدعم الشفافية | سهولة القراءة | ملائمة للطباعة
HEX | الويب و CSS وأدلة الهوية | ‏#000000 – #FFFFFF | بثمانية رموز فقط (#RRGGBBAA) | متوسطة | لا
RGB | الشاشات والتطبيقات والتدرجات | 0–255 لكل قناة | نعم (RGBA) | متوسطة | لا
HSL | أنظمة التصميم والسمات | 0°–360°، 0%–100%، 0%–100% | نعم (HSLA) | عالية | لا
CMYK | الطباعة والتغليف | 0%–100% لكل قناة | لا | منخفضة | نعم

دليل مختصر: أي صيغة لأي مهمة

مشروعك | استخدم هذه الصيغة | السبب
‏CSS لموقع إلكتروني | ‏HEX أو HSL | ‏HEX للبساطة، و HSL لأنظمة التصميم ذات السمات
تطبيق جوال (iOS/Android) | ‏RGB/RGBA | الأطر الأصلية تستخدم RGB داخلياً
ملف تصميم في Figma / Sketch | ‏HEX | صيغة الإدخال القياسية في أدوات التصميم
نظام تصميم / رموز التصميم | ‏HSL | السلالم والنسخ المشتقة بالغة السهولة في HSL
تصاميم وسائل التواصل الاجتماعي | ‏HEX أو RGB | رقمية بحتة، وتقبلها Canva وPhotoshop معاً
بطاقة عمل / كتيّب | ‏CMYK | لأنها ذاهبة إلى مطبعة فعلية
تغليف المنتجات | ‏CMYK + Pantone | الطباعة مع اتساق لون العلامة التجارية
قالب بريد إلكتروني | ‏HEX | عملاء البريد يدعمون HEX بشكل موثوق
المصابيح الذكية / LED | ‏RGB | عتاد LED يستخدم RGB أصلاً
وثيقة الهوية البصرية | الصيغ الأربع جميعها | كل فريق يحتاج إلى صيغة مختلفة

هل يمكن التحويل بينها؟

نعم — مع بعض التحفظات.

- HEX ↔ RGB — تحويل بلا فقدان، فهما البيانات نفسها بترميزين مختلفين.
- RGB ↔ HSL — تحويل بلا فقدان، إذ إنه تحويل رياضي بحت.
- RGB → CMYK — تحويل مع فقدان. فبعض ألوان RGB (الأزرق الزاهي والنيون والأخضر الفاقع) لا يمكن إعادة إنتاجها بـ CMYK. وسيحوّلها التحويل إلى أقرب مكافئ قابل للطباعة، وهو غالباً أبهت.
- CMYK → RGB — ممكن تقنياً، لكن النتيجة تعتمد على ملف تعريف ICC المستخدم. وقد يعطي محوّلان مختلفان قيم RGB متباينة قليلاً للمدخل نفسه.

وللتحويلات السريعة أثناء التنقل، يظل تطبيق منتقي ألوان على الهاتف يعرض الصيغ الأربع في آنٍ واحد هو أسرع سير عمل ممكن. وColor Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) يفعل ذلك بالضبط — وجّه الكاميرا نحو أي لون لترى HEX وRGB وHSL وCMYK جنباً إلى جنب. ونقرة واحدة تنسخ أي قيمة. التطبيق متاح على iPhone (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) وAndroid (https://play.google.com/store/apps/details?id=com.tomas.color_picker).

أخطاء شائعة

1. التصميم للطباعة بصيغة RGB

هذا هو خطأ المبتدئين الكلاسيكي. تصمّم ملصقاً زاهياً في Photoshop بنمط RGB، ثم ترسله إلى المطبعة فتخرج النتيجة باهتة — خصوصاً في الأخضر والأزرق. حوّل دائماً إلى CMYK قبل التصدير للطباعة، وتحقق من تحذيرات النطاق اللوني.

2. استخدام HEX عند الحاجة إلى الشفافية

إذا كان تصميمك يتطلب طبقات شبه شفافة أو ظلالاً أو تأثيرات زجاجية، فانتقل إلى RGBA أو HSLA. فصيغة HEX القياسية ذات الستة رموز لا تحمل معلومات العتامة، وصيغة الثمانية رموز نادرة الاستخدام لصعوبة قراءتها.

3. بناء نظام تصميم بصيغة HEX

عبارة «‎#3B82F6 لكن أفتح بنسبة 20%» تتطلب تحويلاً وحساباً ثم تحويلاً عكسياً. أما في HSL فتكفي زيادة الإضاءة بنسبة 20%. ورموز التصميم ومولّدات السمات وخصائص CSS المخصصة الحديثة تعمل بكفاءة أعلى بكثير مع HSL.

4. تحويل CMYK إلى HEX للويب وتوقّع اللون نفسه

العلامة التجارية التي عُرّفت ألوانها بـ CMYK للطباعة ستبدو مختلفة عند تحويلها ببساطة إلى HEX للويب. والنهج الصحيح هو مطابقة اللون بصرياً على الشاشة مع النسخة المطبوعة، ثم تعريف قيم HEX منفصلة للاستخدام الرقمي. وينبغي أن يتضمن دليل الهوية البصرية كليهما.

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

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

لا فرق في اللون، بل في الترميز فقط. فـ HEX تكتب قيم الأحمر والأخضر والأزرق نفسها بالنظام الست عشري. و#FF0000 مطابق تماماً لـ rgb(255, 0, 0). ‏HEX أقصر في الكتابة، أما RGB فأسهل في التعديل برمجياً وتدعم قناة الشفافية (RGBA).

متى ينبغي أن أستخدم CMYK بدلاً من RGB؟

كلما كان الناتج النهائي مطبوعاً على مادة فعلية — ورق أو كرتون أو قماش أو بلاستيك. أما إذا بقي على الشاشة فاستخدم RGB (أو HEX/HSL). وإذا كان سيُطبع، فانتقل إلى CMYK في مرحلة التصدير.

هل HSL أفضل من HEX؟

بالنسبة إلى أنظمة التصميم والسمات ومعالجة الألوان — نعم. أما للتواصل السريع والنسخ واللصق في الأدوات فـ HEX أكثر عملية. كلتاهما تصف الألوان نفسها، لكن HSL تنظّم المعلومات بطريقة تطابق كيفية تفكير البشر في اللون (درجة اللون ← الحيوية ← السطوع).

هل يمكن لهاتفي عرض الصيغ الأربع دفعة واحدة؟

نعم. يلتقط Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) اللون من الكاميرا أو من صورة ويعرض HEX وRGB وHSL وCMYK في آنٍ واحد. وانقر على أي قيمة لنسخها. إنه يعمل بوصفه حاسبة لصيغ الألوان في العالم الواقعي — التقاطة واحدة وأربع صيغ.

الخلاصة

HEX للويب والتواصل السريع. وRGB لتطوير التطبيقات والشفافية. وHSL لأنظمة التصميم ومعالجة الألوان. وCMYK للطباعة.

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

حمّل Color Picker Camera لـ iPhone (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) | حمّله لـ Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker)

--
Source: https://appstoryo.com/ar/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use
License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
Cite as: Lubor Šimůnek (2026). ‏HEX وRGB وHSL وCMYK: أي صيغة لونية تستخدم ومتى. AppStoryo, lapnito.cz s.r.o. https://appstoryo.com/ar/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use