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

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

لماذا تبدو ألواني مختلفة عند الطباعة؟

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

كيف أحصل على رموز سداسية من الألوان التي أراها عبر الإنترنت؟

استخدم أدوات المطور في متصفحك. في Chrome أو Firefox، انقر بزر الماوس الأيمن على أي عنصر، واختر "افحص"، ثم انقر على المربع الصغير للون في لوحة الأنماط. سيفتح هذا منتقي الألوان الذي يعرض الرمز السداسي. توسعات المتصفح مثل ColorZilla تجعل هذا أسرع - فهي تسمح لك بالنقر في أي مكان على الصفحة للحصول على قيمة اللون.

ماذا يعني رمز # في الرموز السداسية؟

إنه مجرد بادئة تخبر المتصفح "هذا رمز لون سداسي". يأتي المعيار من مواصفات HTML و CSS المبكرة. تمثل الأحرف الستة بعد # قيم RGB في النظام السداسي: رقمان للأحمر، رقمان للأخضر، رقمان للأزرق. بدون #، لن يتعرف المتصفح عليه كلون.

لماذا تعمل رموز السداسي من 3 أرقام؟

إنها اختصار عندما يتكرر كل قناة لون. #F00 يتوسع إلى #FF0000 (أحمر)، #C9C تصبح #CC99CC (بنفسجي فاتح). تم إنشاء هذا الاختصار في التسعينيات لتقليل أحجام الملفات عندما كانت سعة النطاق مكلفة. إنه لا يزال مريحًا اليوم للألوان البسيطة.

هل التحويلات اللونية دقيقة؟

تحويلات RGB إلى سداسي رياضيًا دقيقة تمامًا - فهي نفس القيم بأنظمة أرقام مختلفة. تحويلات RGB إلى CMYK هي تقريبات لأنك تحول بين مساحات لونية مختلفة أساسيًا (الضوء مقابل الحبر). يستخدم الأداة معايير ملف التعريف اللوني ICC لهذه التحويلات، وهي نفس النهج الذي تستخدمه برامج التصميم المهنية.

كيف أنشئ مجموعات ألوان يسهل الوصول إليها؟

استخدم أداة التحقق من التباين مثل أداة WebAIM بعد اختيار ألوانك هنا. تحتاج إلى نسبة 4.5:1 للنص العادي، 3:1 للنص الكبير. تجنب مجموعات الألوان الأحمر-الأخضر (الأصعب للمستخدمين المصابين بعمى الألوان). عند الشك، استخدم نصًا داكنًا على خلفيات فاتحة أو العكس - الاختلاف الكافي في السطوع هو الأهم.

هل يمكنني اختيار ألوان من الصور؟

ليس مباشرة في هذه الأداة. استخدم توسعة متصفح مثل ColorZilla، أو التقط لقطة شاشة للصورة واستخدم منتقي الألوان في نظام التشغيل الخاص بك (Digital Color Meter على macOS، PowerToys Color Picker على Windows). بمجرد الحصول على قيمة اللون، أدخلها هنا للتحويل بين التنسيقات.

لماذا لا تتحول بعض ألوان RGB بشكل جيد إلى CMYK؟

لدى CMYK "نطاق" (نطاق الألوان القابلة للإعادة) أضيق من RGB. غالبًا ما تقع الأزرق الساطعة والخضراء الحيوية والبرتقالية الكهربائية خارج ما يمكن لحبر CMYK إنشاؤه فعليًا. عندما يحدث هذا، تستبدل الطابعة أقرب تطابق ممكن، والذي يبدو عادة أقل تشبعًا. غالبًا ما يبدأ مصممو الطباعة المحترفون بألوان آمنة لـ CMYK لتجنب هذه المشكلة.

أداة اختيار الألوان - تحويل أكواد الألوان RGB، Hex، CMYK و HSV

ما يمكنك فعله باختيار الألوان هذا

هل تحتاج إلى الدرجة المثالية للون في مشروعك؟ يتيح لك اختيار الألوان هذا اختيار ومعاينة وتحويل الألوان بين RGB، وHex، وCMYK، وHSV فوريًا. سواء كنت تقوم بترميز موقع ويب، أو تصميم شعار، أو تحضير ملفات للطباعة، ستجد قيم الألوان الدقيقة التي تحتاجها - بدون تخمين، وبدون التبديل بين الأدوات.

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

فهم نماذج الألوان

تحتاج المشاريع المختلفة إلى تنسيقات ألوان مختلفة. إليك ما يفعله كل نموذج ومتى يستخدم:

RGB (الأحمر، الأخضر، الأزرق)

يعمل RGB عن طريق مزج الضوء الأحمر والأخضر والأزرق - بنفس الطريقة التي تعرض بها الشاشة الألوان الآن. يتراوح كل مكون من 0 إلى 255:

RGB(255, 0, 0) = أحمر نقي
RGB(0, 255, 0) = أخضر نقي
RGB(0, 0, 255) = أزرق نقي
RGB(255, 255, 255) = أبيض
RGB(0, 0, 0) = أسود

متى يستخدم RGB: أي عمل رقمي - مواقع الويب، تطبيقات الهاتف المحمول، تحرير الفيديو، أو الرسومات المعتمدة على الشاشة. إنه اللغة الأصلية للشاشات، وهذا هو السبب في دعم أدوات مثل CSS لوظائف rgb() و rgba() مباشرة. وفقًا لمواصفات وحدة ألوان W3C CSS، يعتبر RGB نموذج اللون الأساسي لمعايير الويب.

السداسي عشري (Hex)

رموز Hex هي مجرد قيم RGB مكتوبة بالنظام السداسي عشري بدلاً من النظام العشري. يبدو لون Hex مثل #FF5733، حيث:

رمز # يشير إلى أنه رمز سداسي عشري
أول حرفين = الأحمر (00-FF)
الوسطيان = الأخضر (00-FF)
الأخيران = الأزرق (00-FF)
#FF0000 = أحمر، #00FF00 = أخضر، #0000FF = أزرق

ستجد أحيانًا اختصارًا من 3 أحرف مثل #F00 بدلاً من #FF0000 - هذا يعمل عندما يتكرر كل قناة لون نفس الرقم.

متى يستخدم Hex: تطوير الويب هو الحالة الرئيسية. دعمت CSS دائمًا التدوين السداسي عشري، ويجد معظم المطورين كتابته أسرع من rgb(). خطأ شائع: نسيان رمز # سيكسر أنماطك بصمت، لأن المتصفحات لن تتعرف عليه كلون صالح.

CMYK (سماوي، أرجواني، أصفر، مفتاح/أسود)

CMYK هو نموذج اللون المستخدم بواسطة الطابعات. على عكس RGB (الذي يضيف الضوء)، يطرح CMYK الضوء - بمزج الأحبار على الورق الأبيض لإنشاء الألوان:

يتراوح كل مكون من 0٪ إلى 100٪
CMYK(0, 100, 100, 0) = أحمر
CMYK(100, 0, 100, 0) = أخضر
CMYK(0, 0, 0, 100) = حبر أسود نقي
CMYK(0, 0, 0, 0) = لا يوجد حبر (يظهر الورق الأبيض)

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

HSV (التدرج، التشبع، القيمة)

يقسم HSV اللون إلى ثلاثة مكونات بديهية:

التدرج: عائلة اللون (0-360°) - 0° هو الأحمر، 120° هو الأخضر، 240° هو الأزرق
التشبع: مدى الحيوية أو الرمادي (0-100٪) - 0٪ هو رمادي، 100٪ هو التشبع الكامل
القيمة: مدى السطوع أو الظلام (0-100٪) - 0٪ هو أسود، 100٪ هو السطوع الكامل

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

تحويلات الألوان

يقوم منتقي الألوان تلقائيًا بالتحويل بين نماذج الألوان المختلفة باستخدام هذه الصيغ الرياضية:

تحويل RGB إلى Hex

لتحويل RGB إلى سداسي عشري:

حول كل مكون RGB (0-255) إلى رقم سداسي عشري من رقمين
اجمع القيم السداسية العشرية الثلاث مع بادئة #

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

حيث toHex() يحول الرقم العشري إلى تمثيله السداسي العشري.

تحويل RGB إلى CMYK

يتضمن التحويل من RGB إلى CMYK هذه الخطوات:

قم بتطبيع قيم RGB إلى النطاق 0-1
احسب المكون الأسود الرئيسي (K)
احسب C، M، و Y بناءً على K

$R' = R/255, G' = G/255, B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{(1-R'-K)}{(1-K)} \times 100\%$ $M = \frac{(1-G'-K)}{(1-K)} \times 100\%$ $Y = \frac{(1-B'-K)}{(1-K)} \times 100\%$

تحويل RGB إلى HSV

تحويل RGB إلى HSV:

$R' = R/255, G' = G/255, B' = B/255$ $C_{max} = \max(R', G', B')$ $C_{min} = \min(R', G', B')$ $\Delta = C_{max} - C_{min}$

للتدرج اللوني (H):

1// تحويل RGB إلى Hex
2function rgbToHex(r, g, b) {
3  const toHex = (c) => {
4    const hex = Math.round(c).toString(16);
5    return hex.length === 1 ? '0' + hex : hex;
6  };
7  
8  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
9}
10
11// تحويل Hex إلى RGB
12function hexToRgb(hex) {
13  // إزالة # إذا كان موجودًا
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // التعامل مع Hex ذي 3 أو 6 خانات
17  const expandedHex = cleanHex.length === 3 
18    ? cleanHex.split('').map(char => char + char).join('')
19    : cleanHex;
20    
21  const r = parseInt(expandedHex.substring(0, 2), 16);
22  const g = parseInt(expandedHex.substring(2, 4), 16);
23  const b = parseInt(expandedHex.substring(4, 6), 16);
24  
25  return { r, g, b };
26}
27
28// تحويل RGB إلى CMYK
29function rgbToCmyk(r, g, b) {
30  // تطبيع قيم RGB
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // حساب K (الأسود)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // التعامل مع الأسود الخالص
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // حساب C, M, Y
44  const c = ((1 - normalizedR - k) / (1 - k)) * 100;
45  const m = ((1 - normalizedG - k) / (1 - k)) * 100;
46  const y = ((1 - normalizedB - k) / (1 - k)) * 100;
47  
48  return {
49    c: Math.round(c),
50    m: Math.round(m),
51    y: Math.round(y),
52    k: Math.round(k * 100)
53  };
54}
55
56// مثال على الاستخدام
57const rgb = { r: 255, g: 0, b: 0 }; // أحمر خالص
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# تحويل RGB إلى Hex
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# تحويل Hex إلى RGB
6def hex_to_rgb(hex_color):
7    # إزالة # إذا كان موجودًا
8    hex_color = hex_color.lstrip('#')
9    
10    # التعامل مع Hex ذي 3 أو 6 خانات
11    if len(hex_color) == 3:
12        hex_color = ''.join([c*2 for c in hex_color])
13    
14    return {
15        'r': int(hex_color[0:2], 16),
16        'g': int(hex_color[2:4], 16),
17        'b': int(hex_color[4:6], 16)
18    }
19
20# تحويل RGB إلى CMYK
21def rgb_to_cmyk(r, g, b):
22    # تطبيع قيم RGB
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # حساب K (الأسود)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # التعامل مع الأسود الخالص
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # حساب C, M, Y
35    c = ((1 - r_norm - k) / (1 - k)) * 100
36    m = ((1 - g_norm - k) / (1 - k)) * 100
37    y = ((1 - b_norm - k) / (1 - k)) * 100
38    
39    return {
40        'c': round(c),
41        'm': round(m),
42        'y': round(y),
43        'k': round(k * 100)
44    }
45
46# مثال على الاستخدام
47rgb = {'r': 0, 'g': 128, 'b': 255}  # أزرق سماوي
48hex_color = rgb_to_hex(rgb['r'], rgb['g'], rgb['b'])
49cmyk = rgb_to_cmyk(rgb['r'], rgb['g'], rgb['b'])
50
51print(f"Hex: {hex_color}")
52print(f"CMYK: C={cmyk['c']}%, M={cmyk['m']}%, Y={cmyk['y']}%, K={cmyk['k']}%")
53

1public class ColorConverter {
2    // تحويل RGB إلى Hex
3    public static String rgbToHex(int r, int g, int b) {
4        return String.format("#%02x%02x%02x", r, g, b);
5    }
6    
7    // تحويل Hex إلى RGB
8    public static int[] hexToRgb(String hexColor) {
9        // إزالة # إذا كان موجودًا
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // التعامل مع Hex ذي 3 أو 6 خانات
15        if (hexColor.length() == 3) {
16            String expandedHex = "";
17            for (char c : hexColor.toCharArray()) {
18                expandedHex += c + String.valueOf(c);
19            }
20            hexColor = expandedHex;
21        }
22        
23        int r = Integer.parseInt(hexColor.substring(0, 2), 16);
24        int g = Integer.parseInt(hexColor.substring(2, 4), 16);
25        int b = Integer.parseInt(hexColor.substring(4, 6), 16);
26        
27        return new int[]{r, g, b};
28    }
29    
30    // تحويل RGB إلى CMYK
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // تطبيع قيم RGB
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // حساب K (الأسود)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // التعامل مع الأسود الخالص
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // حساب C, M, Y
46        double c = ((1 - normalizedR - k) / (1 - k)) * 100;
47        double m = ((1 - normalizedG - k) / (1 - k)) * 100;
48        double y = ((1 - normalizedB - k) / (1 - k)) * 100;
49        
50        return new double[]{
51            Math.round(c),
52            Math.round(m),
53            Math.round(y),
54            Math.round(k * 100)
55        };
56    }
57    
58    public static void main(String[] args) {
59        // مثال على الاستخدام
60        int r = 75, g = 0, b = 130;  // بنفسجي
61        String hexColor = rgbToHex(r, g, b);
62        double[] cmyk = rgbToCmyk(r, g, b);
63        
64        System.out.println("Hex: " + hexColor);
65        System.out.printf("CMYK: C=%.0f%%, M=%.0f%%, Y=%.0f%%, K=%.0f%%\n", 
66                          cmyk[0], cmyk[1], cmyk[2], cmyk[3]);
67    }
68}
69

المراجع والقراءة المتعمقة

معيار W3C للألوان في CSS المستوى 4 - المواصفة الرسمية للألوان على الويب
إرشادات WCAG 2.1 للتباين - معايير إتاحة الوصول للتباين اللوني
أداة WebAIM للتحقق من التباين - اختبار نسب التباين اللوني
معايير ICC للملفات اللونية - مواصفات تقنية لتحويلات الألوان
توثيق MDN للويب: قيم الألوان في CSS - دليل شامل لتنسيقات الألوان على الويب

أداة اختيار الألوان - تحويل أكواد الألوان RGB، Hex، CMYK و HSV

اختيار اللون

RGB (0-255)

CMYK (0-100)

اختيار اللون

التوثيق

ما يمكنك فعله باختيار الألوان هذا

فهم نماذج الألوان

RGB (الأحمر، الأخضر، الأزرق)

السداسي عشري (Hex)

CMYK (سماوي، أرجواني، أصفر، مفتاح/أسود)

HSV (التدرج، التشبع، القيمة)

تحويلات الألوان

تحويل RGB إلى Hex

تحويل RGB إلى CMYK

تحويل RGB إلى HSV

المراجع والقراءة المتعمقة

مولد لوحة الألوان - إنشاء مخططات ألوان متناغمة

مولد خصائص CSS - التدرجات والظلال والحدود

مولد رموز QR المجاني - إنشاء رموز QR قابلة للمسح فوريًا

محول القواعد الرقمية: ثنائي، سداسي عشري، عشري وثماني

مُحدد لون الأرانب - احسب ألوان فراء الأرانب الصغيرة

محول ثنائي إلى عشري | أداة مجانية عبر الإنترنت

محول بيكسل إلى REM إلى EM - آلة حاسبة وحدات CSS مجانية

فك تشفير الصور Base64 | فك التشفير ومعاينة الصور عبر الإنترنت

حاسبة تخفيف المبيض: نسب دقيقة للتنظيف الآمن

محول بكسل إلى بوصة - آلة حاسبة DPI مجانية (2025)

حاسبة طول البت والبايت - أداة مجانية لحجم البيانات

منسق التعليمات البرمجية المجاني: تنسيق جافاسكريبت وبايثون وHTML والمزيد