أداة اختيار الألوان البسيطة وسهلة الاستخدام

المقدمة

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

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

قبل الغوص في كيفية استخدام أداة اختيار الألوان، من المفيد فهم نماذج الألوان المختلفة التي تدعمها:

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

RGB هو نموذج لون إضافي حيث يتم دمج الضوء الأحمر والأخضر والأزرق بطرق مختلفة لإعادة إنتاج مجموعة واسعة من الألوان. في التطبيقات الرقمية:

كل مكون (R، G، B) يتراوح من 0 إلى 255
RGB(255، 0، 0) يمثل الأحمر النقي
RGB(0، 255، 0) يمثل الأخضر النقي
RGB(0، 0، 255) يمثل الأزرق النقي
RGB(255، 255، 255) يمثل الأبيض
RGB(0، 0، 0) يمثل الأسود

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

Hexadecimal (Hex)

تعتبر رموز الألوان السداسية طريقة لتمثيل ألوان RGB باستخدام نظام عددي أساسي 16:

يبدأ لون Hex بعلامة باوند (#) تليها ستة أحرف
يمثل الزوج الأول الأحمر، والزوج الثاني الأخضر، والزوج الثالث الأزرق
يتراوح كل زوج من 00 إلى FF (0-255 في النظام العشري)
#FF0000 يمثل الأحمر النقي
#00FF00 يمثل الأخضر النقي
#0000FF يمثل الأزرق النقي
يتوفر اختصار لبعض الألوان (مثل #F00 للأحمر)

تستخدم رموز Hex على نطاق واسع في تطوير الويب (CSS، HTML) وتطبيقات التصميم الرقمي.

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

CMYK هو نموذج لون تنازلي يستخدم بشكل أساسي في الطباعة الملونة:

يتراوح كل مكون من 0% إلى 100%
CMYK(0، 100، 100، 0) يمثل الأحمر النقي
CMYK(100، 0، 100، 0) يمثل الأخضر النقي
CMYK(100، 100، 0، 0) يمثل الأزرق النقي
CMYK(0، 0، 0، 100) يمثل الأسود
CMYK(0، 0، 0، 0) يمثل الأبيض (لون الورق)

بينما يُستخدم بشكل أساسي للطباعة، فإن فهم قيم CMYK يمكن أن يكون مفيدًا عند تصميم محتوى سيتم طباعته في النهاية.

HSV (لون، تشبع، قيمة)

يمثل HSV الألوان من حيث:

اللون: نوع اللون (أحمر، أصفر، أخضر، إلخ)، يقاس بالدرجات (0-360°)
التشبع: كثافة أو نقاء اللون (0-100%)
القيمة: سطوع اللون (0-100%)

يعتبر 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.0
24    g_norm = g / 255.0
25    b_norm = b / 255.0
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

المراجع

أغوستون، م. ك. (2013). رسوم الكمبيوتر والنمذجة الهندسية: التنفيذ والخوارزميات. Springer Science & Business Media.
أنظمة أدوبي. (2000). ترميز صورة لون Adobe RGB (1998). Adobe Systems Incorporated.
فير تشايلد، م. د. (2013). نماذج مظهر اللون. John Wiley & Sons.
هنت، ر. و. ج.، وبوينتر، م. ر. (2011). قياس اللون. John Wiley & Sons.
بويتون، ك. (2012). الفيديو الرقمي وHD: الخوارزميات والواجهات. Elsevier.
W3C. (2018). وحدة لون CSS المستوى 4. مسودة عمل W3C. تم الاسترجاع من https://www.w3.org/TR/css-color-4/
إرشادات الوصول إلى محتوى الويب (WCAG) 2.1. (2018). تم الاسترجاع من https://www.w3.org/TR/WCAG21/
اللجنة الدولية للألوان. (2004). مواصفة ICC.1:2004-10 (إصدار الملف الشخصي 4.2.0.0). تم الاسترجاع من http://www.color.org/specification/ICC1v42_2006-05.pdf

جرب أداة اختيار الألوان لدينا اليوم!

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

ابدأ في تجربة الألوان الآن وارتق بتصاميمك إلى المستوى التالي!

Whiz Tools

منتقي الألوان البسيط: اختر ونسخ قيم الألوان RGB وHex وCMYK

اختيار اللون

RGB (0-255)

CMYK (0-100)