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

ما هي أداة اختيار الألوان؟

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

كيفية استخدام أداة اختيار الألوان

توجد ثلاث طرق لاختيار لون.

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

يمكن أيضًا إدخال القيم الدقيقة. يقبل حقل hex رموزًا مثل #2ECC71، مع # أو بدونه. يقبل كل حقل من حقول RGB عددًا صحيحًا من 0 إلى 255. ويقبل كل حقل من حقول CMYK عددًا صحيحًا من 0 إلى 100. تُحدَّد القيمة المدخلة التي تتجاوز النطاق المسموح به عند الحد الأقصى.

يحتوي كل تنسيق ألوان على زر نسخ بجواره. يؤدي النقر عليه إلى نسخ تلك القيمة إلى الحافظة وإظهار رسالة قصيرة هي «تم النسخ!».

شرح نماذج الألوان

RGB

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

السداسي عشري

يكتب الرمز السداسي العشري لون RGB بالأساس 16 بدلًا من الأساس 10. ويتكون #2ECC71 من ثلاثة أزواج من المحارف: 2E للأحمر، وCC للأخضر، و71 للأزرق. يتراوح كل زوج من 00 إلى FF. وتشيع الرموز السداسية العشرية في تصميم الويب، لأن CSS يقبلها مباشرة ولأن كتابتها أقصر من كتابة rgb(). ويوجد أيضًا اختصار من ثلاثة محارف: #0F0 يعني القيمة نفسها التي يعنيها #00FF00.

CMYK

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

HSV

يصف HSV درجة اللون والتشبّع والقيمة كلًّا على حدة. ودرجة اللون هي عائلة اللون، وتُعطى بالدرجات من 0° إلى 360°، حيث تمثل 0° اللون الأحمر، وتمثل 120° اللون الأخضر، وتمثل 240° اللون الأزرق. والتشبّع هو مدى زهو اللون، من 0% (الرمادي) إلى 100% (لون كامل التشبّع). أما القيمة فهي مدى سطوع اللون، من 0% (الأسود) إلى 100% (السطوع الكامل). ويقارب HSV الطريقة الطبيعية التي يصف بها الناس الألوان، ولذلك يعتمد طيف الألوان وشريط تمرير السطوع في هذه الأداة عليه.

معادلة التحويل من RGB إلى hex

تُحوَّل كل قناة RGB، وهي عدد من 0 إلى 255، إلى عدد سداسي عشري من محرفين، ثم تُضم الأزواج الثلاثة مع وضع # في البداية.

$\text{Hex} = \text{\#} + \text{إلى Hex}(R) + \text{إلى Hex}(G) + \text{إلى Hex}(B)$

معادلة التحويل من RGB إلى CMYK

أولًا، تُحوَّل كل قناة RGB إلى كسر بين 0 و1. تُحدَّد قيمة الأسود (K) انطلاقًا من القناة ذات القيمة الأكبر. ثم تُحسب قيم السماوي والأرجواني والأصفر من القنوات المتبقية ومن K.

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

عندما تساوي K القيمة 1، أي عندما يكون اللون أسود نقيًا، تُضبط قيم C وM وY كلها على 0 لتجنب القسمة على صفر.

معادلة التحويل من RGB إلى HSV

يُحوَّل RGB أولًا إلى كسور بين 0 و1. لتكن $C_{max}$ أكبر القيم الثلاث، ولتكن $C_{min}$ أصغرها، ولتكن $\Delta$ الفرق بينهما.

$V = C_{max}\times 100\%$ $S = 0 \text{ if } C_{max}=0,\text{ خلاف ذلك } \frac{\Delta}{C_{max}}\times 100\%$

تعتمد درجة اللون على القناة ذات القيمة الأكبر:

0° & \Delta = 0 \\ 60°\times\left(\dfrac{G'-B'}{\Delta}\bmod 6\right) & C_{max}=R' \\ 60°\times\left(\dfrac{B'-R'}{\Delta}+2\right) & C_{max}=G' \\ 60°\times\left(\dfrac{R'-G'}{\Delta}+4\right) & C_{max}=B' \end{cases}$$ ## مثال تطبيقي لنبدأ باللون RGB(46, 204, 113)، وهو أحد ظلال الأخضر. **Hex:** القيمة 46 بالنظام السداسي عشري هي `2E`، والقيمة 204 هي `CC`، والقيمة 113 هي `71`، فتكون النتيجة `#2ECC71`. **CMYK:** بعد التحجيم، تكون R′ = 0.180، وG′ = 0.800، وB′ = 0.443. والقيمة الأكبر هي G′، ولذلك تكون K = 1 − 0.800 = 0.20، أي إن نسبة الأسود هي 20%. ثم C = (1 − 0.180 − 0.20) / 0.800 × 100 ≈ 77%، وM = (1 − 0.800 − 0.20) / 0.800 × 100 = 0%، وY = (1 − 0.443 − 0.20) / 0.800 × 100 ≈ 45%. والنتيجة هي CMYK(77, 0, 45, 20). **HSV:** $C_{max}$ = 0.800 (الأخضر)، و$C_{min}$ = 0.180، ولذلك Δ = 0.620. والقيمة = 80%. والتشبّع = 0.620 / 0.800 × 100 ≈ 77%. وبما أن الأخضر هو الأكبر، فإن H = 60 × ((B′ − R′) / Δ + 2) = 60 × ((0.443 − 0.180) / 0.620 + 2) ≈ 145°. والنتيجة هي HSV(145°، 77%، 80%). ## إتاحة اختيار الألوان للجميع يعاني نحو 1 من كل (2.5 سم) 12 رجلًا ونحو 1 من كل (2.5 سم) 200 امرأة من شكل من أشكال قصور رؤية الألوان، وأكثرها شيوعًا ضعف القدرة على التمييز بين الأحمر والأخضر. ولن ينجح تصميم يعتمد على اللون وحده لنقل المعنى، مثل رسالة خطأ حمراء بلا أيقونة أو تسمية، مع هؤلاء المستخدمين. وتساعد إضافة تسمية نصية أو أيقونة أو نمط إلى جانب اللون على حل المشكلة. يحتاج النص أيضًا إلى تباين كافٍ مع خلفيته. وتوصي إرشادات إتاحة محتوى الويب (WCAG) بنسبة تباين لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير. ويلزم استخدام أداة مخصصة لفحص التباين لقياس ذلك، لأن هذه الأداة لا تحسب نسب التباين بنفسها. ## الأسئلة الشائعة **ما الفرق بين RGB وCMYK؟** يُستخدم RGB للشاشات، وينشئ اللون بإضافة الضوء الأحمر والأخضر والأزرق. أما CMYK فيُستخدم للطباعة، وينشئ اللون بوضع طبقات من الحبر على الورق، وهو ما يطرح الضوء بدلًا من إضافته. ويمكن لـRGB إنتاج ألوان أكثر سطوعًا من CMYK، لأن الحبر لا يستطيع مطابقة نطاق الألوان الذي يمكن للشاشة إصداره. **لماذا تبدو الألوان المطبوعة مختلفة عن ألوان الشاشة؟** تبعث الشاشة الضوء مباشرة، بينما تعكس الصفحة المطبوعة الضوء الذي يسقط عليها فقط. كما يغطي حبر CMYK نطاقًا أصغر من الألوان مقارنة بضوء RGB، ولذلك لا يمكن مطابقة بعض ألوان الشاشة الزاهية بدقة على الورق. **ماذا يعني الرمز # في رمز hex؟** يشير إلى أن المحارف التالية هي رمز لون بالنظام السداسي عشري، وهو اصطلاح يعود إلى بدايات HTML وCSS. ومن دونه لن يتعرف المتصفح على القيمة باعتبارها لونًا. **لماذا لا تحتوي بعض رموز hex إلا على ثلاثة محارف؟** الرمز المؤلف من ثلاثة محارف هو اختصار لرمز مؤلف من ستة محارف، حيث يكرر كل زوج الرقم نفسه. ويتم توسيع `#0F0` إلى `#00FF00`. **هل التحويلات بين التنسيقات دقيقة؟** التحويل من RGB إلى hex دقيق، لأنه يستخدم الأرقام نفسها مكتوبة بأساس مختلف. أما التحويل من RGB إلى CMYK فهو تقريبي، لأنه يحوّل بين الضوء والحبر، وهما عمليتان فيزيائيتان مختلفتان لهما نطاقا ألوان مختلفان. **هل تستطيع هذه الأداة اختيار لون مباشرة من صورة أو صفحة ويب؟** لا. يمكن لإضافة متصفح أو لأداة اختيار الألوان المدمجة في نظام التشغيل، مثل Digital Color Meter في macOS، قراءة لون من الشاشة؛ ثم يمكن إدخال القيمة الناتجة في هذه الأداة لتحويلها.