HEX vs RGB vs HSL vs CMYK: أي تنسيق لون تستخدم ومتى

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

انظر إلى هذا اللون المرجاني. إنه نفس اللون تمامًا، لكن يمكن كتابته بأربع طرق مختلفة:

لكل تنسيق غرضه. اختيار التنسيق الخاطئ لن يكسر مشروعك، لكن اختيار الصحيح سيوفر الوقت ويتجنب أخطاء التحويل ويحافظ على اتساق العلامة التجارية عبر جميع المنصات.

يشرح هذا الدليل بالضبط متى تستخدم كل تنسيق، مع أمثلة حقيقية ومراجع سريعة.

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

ما هو: رمز ستعشري من 6 أرقام يمثل قيم الأحمر والأخضر والأزرق. يبدأ دائمًا بـ #. مثال: #FF6F61 يعني أحمر 255، أخضر 111، أزرق 97.

متى تستخدم HEX

• أوراق أنماط CSS — التنسيق الافتراضي الذي يستخدمه ويتوقعه معظم مطوري الويب.
• أدوات التصميم — Figma وSketch وCanva تعرض HEX بشكل بارز في منتقيات الألوان.
• إرشادات العلامة التجارية — معظم إرشادات العلامة تسرد الألوان بـ HEX لأنه قصير وسهل النسخ.
• التواصل — عندما تحتاج لمشاركة لون دقيق عبر Slack أو البريد الإلكتروني، HEX مفهوم عالميًا.

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

• عند الحاجة للشفافية — HEX لا يدعم الشفافية أصليًا. يمكنك استخدام HEX من 8 أرقام (#FF6F6180) لكن الدعم غير متسق بين الأدوات.
• التعديل البرمجي للألوان — تفتيح أو تغميق لون HEX يتطلب تحويلًا أولًا.
• التصميم للطباعة — الطباعة تستخدم CMYK. إرسال HEX إلى المطبعة يضمن عدم تطابق الألوان.

مثال حقيقي: متغيرات CSS

:root {
  --brand-primary: #FF6F61;
  --brand-dark: #CC5850;
  --brand-light: #FF9A91;
  --text-on-primary: #FFFFFF;
}

.button-primary {
  background-color: var(--brand-primary);
  color: var(--text-on-primary);
}

RGB: نموذج ألوان الشاشة

ما هو: ثلاثة أرقام (0–255) تمثل الأحمر والأخضر والأزرق — ألوان الضوء الحقيقية التي تبثها شاشتك. مثال: rgb(255, 111, 97).

متى تستخدم RGB

• الشفافية (RGBA) — rgba(255, 111, 97, 0.5) يمنحك تحكمًا دقيقًا في العتامة. الطريقة الأكثر دعمًا للألوان شبه الشفافة في CSS.
• تطوير التطبيقات — Swift وKotlin وFlutter تستخدم قيم RGB داخليًا. العمل بـ RGB يتجنب التحويلات غير الضرورية.
• إضاءة LED وIoT — شرائط LED والمصابيح الذكية تتوقع قيم RGB.
• رياضيات الألوان — خلط لونين أو التدرج بينهما هو حساب بسيط في RGB.

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

• التصميم للطباعة — قيم RGB لا توافق مباشرة خلط الأحبار. حوّل دائمًا إلى CMYK قبل الإرسال للمطبعة.
• ضبط التشبع أو السطوع — تغيير التشبع في RGB يتطلب صيغًا معقدة. HSL أسهل بكثير.

مثال حقيقي: React Native

const Colors = {
  coral: 'rgba(255, 111, 97, 1.0)',
  coralFaded: 'rgba(255, 111, 97, 0.5)',
  coralOverlay: 'rgba(255, 111, 97, 0.15)',
};

<View style={{ backgroundColor: Colors.coralOverlay }}>
  <Text style={{ color: Colors.coral }}>Hello</Text>
</View>

HSL: تنسيق المصمم

ما هو: ثلاث قيم — درجة اللون (0–360°) والتشبع (0–100%%%%) والإضاءة (0–100%%%%). مثال: hsl(5, 100%%%%, 69%%%%).

متى تستخدم HSL

• أنظمة التصميم — أنشئ سلم ألوان كامل بتثبيت درجة اللون والتشبع وتغيير الإضاءة فقط.
• الوضع الداكن — إنشاء متغيرات داكنة بسيط كتقليل الإضاءة. بدون تخمين، بدون صيغ.
• توليد الألوان برمجيًا — تحتاج 12 لونًا متساوي التباعد؟ زد درجة اللون 30° مع الحفاظ على التشبع والإضاءة.
• إمكانية الوصول — التحقق من التباين أكثر سهولة عندما يمكنك قراءة قيمة الإضاءة مباشرة.

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

• التواصل بين الفرق — معظم الناس لا يفكرون بدرجة اللون/التشبع/الإضاءة. HEX أو RGB أوضح في المحادثات.
• سير عمل الطباعة — HSL ليس له مكافئ مباشر في الطباعة. حوّل إلى CMYK أولًا.

مثال حقيقي: سلم ألوان مع Tailwind CSS

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        coral: {
          50:  'hsl(5, 100%%, 95%%)',
          100: 'hsl(5, 100%%, 90%%)',
          200: 'hsl(5, 100%%, 82%%)',
          300: 'hsl(5, 100%%, 75%%)',
          400: 'hsl(5, 100%%, 69%%)', /* base */
          500: 'hsl(5, 85%%, 58%%)',
          600: 'hsl(5, 70%%, 48%%)',
          700: 'hsl(5, 65%%, 38%%)',
          800: 'hsl(5, 60%%, 28%%)',
          900: 'hsl(5, 55%%, 18%%)',
        }
      }
    }
  }
}

CMYK: تنسيق الطباعة

ما هو: أربع قيم — سيان وماجنتا وأصفر وأسود (Key). عكس RGB (الذي يضيف الضوء)، CMYK طرحي — يصف كمية الحبر التي تمتص الضوء من الورق الأبيض. مثال: 0, 56, 62, 0.

متى تستخدم CMYK

• كل شيء مطبوع — بطاقات العمل، الملصقات، التغليف، المجلات. إذا مر عبر مطبعة، يجب أن يكون CMYK.
• InDesign وسير عمل الطباعة — صمّم بـ CMYK من البداية لتجنب مفاجآت الألوان خارج النطاق.
• البروفات — بروفات الشاشة تحاكي مخرجات الطابعة — وهذا يعمل فقط عندما تكون ألوانك المصدرية بالفعل CMYK.

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

• الشاشات — الشاشات تستخدم الضوء (RGB). قيم CMYK يجب تحويلها والتحويل دائمًا تقريبي.
• تحرير الصور — اعمل بـ RGB أثناء التحرير. حوّل إلى CMYK فقط كخطوة أخيرة للطباعة.

مثال حقيقي: التصدير من Illustrator

/* Illustrator: File > Document Color Mode > CMYK */
/* Export settings for print-ready PDF: */

Color mode:      CMYK
Profile:         U.S. Web Coated (SWOP) v2  /* or your printer's ICC */
Bleed:           3 mm (all sides)
Marks:           Trim marks ON
Flatten:         Transparent objects

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

ورقة مرجعية: نوع المشروع → تنسيق اللون

التحويلات: ما تحتاج معرفته

• HEX ↔ RGB — تحويل بدون خسارة. هما تمثيلان مختلفان لنفس النموذج. #FF6F61 = rgb(255, 111, 97).
• RGB ↔ HSL — تحويل بدون خسارة. هما تعبيران رياضيان مختلفان لنفس مجموعة الألوان.
• RGB → CMYK — تحويل مع خسارة. نطاق CMYK أصغر من RGB. الألوان الزاهية على الشاشة غالبًا تبدو باهتة في الطباعة.
• CMYK → RGB — النتيجة تعتمد على ملف ICC المستخدم. نفس قيمة CMYK قد تبدو مختلفة مع ملفات تعريف مختلفة.

تطبيق Color Picker Camera يعرض التنسيقات الأربعة في وقت واحد — وجّه هاتفك نحو أي لون في العالم الحقيقي واحصل على HEX وRGB وHSL وCMYK فورًا. بدون تحويل يدوي.

أخطاء شائعة (وكيف تتجنبها)

1. إرسال RGB إلى المطبعة

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

2. استخدام HEX للشفافية

HEX من 8 أرقام (#FF6F6180) موجود لكن الكثير من الأدوات لا تتعرف عليه. استخدم rgba() أو hsla() لشفافية موثوقة.

3. بناء نظام تصميم بـ HEX فقط

توليد درجات فاتحة وداكنة من كود HEX يتطلب التجربة والخطأ. HSL يسمح بتغيير الإضاءة مباشرة، مما يجعل سلالم الألوان قابلة للتنبؤ ومتسقة.

4. تحويل CMYK → HEX وتوقع نفس اللون

CMYK له نطاق أصغر من RGB/HEX. عند التحويل العكسي، يتم تقريب اللون وقد يبدو باهتًا أو متغيرًا قليلًا. تحقق دائمًا بصريًا.

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

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

لا فرق من حيث الألوان المتاحة. كلاهما يغطي نفس 16.7 مليون لون. HEX هو طريقة أقصر لكتابة قيم RGB بالنظام الستعشري. #FF6F61 = rgb(255, 111, 97). الفرق العملي الوحيد هو دعم الشفافية: RGB لديه RGBA مدمج، بينما HEX من 8 أرقام لديه دعم محدود.

متى يجب استخدام CMYK؟

كلما كان تصميمك سيُطبع فعليًا: بطاقات عمل، كتيبات، ملصقات، تغليف. إذا كان سيُعرض على شاشة فقط، استخدم HEX أو RGB أو HSL.

هل HSL أفضل من RGB؟

ليس أفضل، بل أسهل للفهم بالنسبة للمصممين. إذا كنت بحاجة لإنشاء مخطط ألوان أو إنشاء سمات الوضع الداكن أو التحقق من تباين إمكانية الوصول، فـ HSL أكثر سهولة. لتطوير التطبيقات حيث تتوقع الأطر قيم RGB، استخدم RGB.

هل يوجد تطبيق يعرض التنسيقات الأربعة في نفس الوقت؟

نعم. Color Picker Camera يتيح لك توجيه هاتفك نحو أي لون في العالم الحقيقي ورؤية قيم HEX وRGB وHSL وCMYK فورًا على شاشة واحدة. متاح لـ iOS وAndroid.

الخلاصة

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

إذا كنت تعمل مع ألوان العالم الحقيقي — جدار مطلي، عينة قماش، شعار على لافتة — Color Picker Camera تعمل كآلة حاسبة للألوان. وجّه والتقط واحصل على التنسيقات الأربعة فورًا.

تحميل لـ iOS تحميل لـ Android