منتقي الألوان ومحول HEX وRGB وHSL

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

لا يُرفع أي شيء تختاره أو تكتبه ولا يُخزَّن. يعمل التحويل بالكامل على جهازك، فيمكنك العمل على ألوان علامات تجارية خاصة ولوحات ألوان للعملاء وتصاميم غير منشورة دون إرسالها إلى خادم.

ما هو منتقي الألوان والمحول؟

منتقي الألوان أداة تتيح لك اختيار لون بصريًا وقراءة رمزه. والمحول يحوّل صيغة رمز إلى الصيغ الأخرى. وهذه الأداة تفعل الأمرين معًا: فيها منتقي بصري، وحقل HEX، وحقل RGB، وحقل HSL، وكل تحويل يحدّث الصيغ الثلاث دفعة واحدة، مع عينة تعرض اللون نفسه.

وتصف الصيغ الثلاث اللون نفسه بطرق مختلفة. فـHEX رمز من ستة أرقام يبدأ بـ#، مثل #B76E79. وRGB يعطي مقادير الضوء الأحمر والأخضر والأزرق، كل منها من 0 إلى 255. وHSL يعطي درجة اللون كزاوية على عجلة الألوان، مع التشبع والإضاءة كنسب مئوية. ولون ذهبي وردي مثل #B76E79 هو RGB 183، 110، 121 وHSL 351 درجة، وتشبع 33.6%، وإضاءة 57.5%، وهذا المحول ينتقل بين الصيغ الثلاث دون أن تقوم بأي حساب.

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

1. اختر لونًا بمنتقي الألوان، أو اكتب رمزًا في أحد الحقول الثلاثة أدناه. ولون البداية هو #B76E79، وهو ذهبي وردي.
2. اختر الصيغة التي تدخلها: HEX أو RGB أو HSL. يقرأ المحول الحقل الخاص بالصيغة التي تختارها.
3. اضغط زر «حوّل اللون». يتحدث المنتقي والحقول الثلاثة وعينة اللون إلى اللون نفسه.
4. انسخ الرمز الذي تحتاجه. استخدم HEX في أكواد الويب وCSS، وRGB في أدوات الصور والفيديو، وHSL عندما تضبط مدى حيوية اللون أو إضاءته.

مثال عملي

ابدأ برمز HEX الذهبي الوردي #B76E79. ومع اختيار HEX، اضغط زر «حوّل اللون». يقرأ المحول الأرقام الستة، ويحسب أن قناة الأحمر 183، وقناة الأخضر 110، وقناة الأزرق 121، وأن درجة اللون 351 درجة، أي قرب نهاية عجلة الألوان، مع تشبع 33.6% وإضاءة 57.5%. ويعرض حقل RGB القيمة 183، 110، 121، وحقل HSL القيمة 351، 33.6%، 57.5%، وتعرض العينة اللون الذهبي الوردي نفسه.

والآن جرّب الاتجاه الآخر. اختر RGB، واكتب 183، 110، 121 في حقل RGB، واضغط زر «حوّل اللون». يعود حقل HEX إلى #B76E79 وحقل HSL إلى 351، 33.6%، 57.5%. اختر HSL بدلًا من ذلك، واكتب 351، 33.6%، 57.5% في حقل HSL، واضغط زر «حوّل اللون»: يعرض حقل HEX مجددًا #B76E79. فاللون نفسه، إذا أُدخل بثلاث طرق مختلفة، يعود دائمًا بالرموز الثلاثة نفسها.

فهم الصيغ الثلاث

HEX. رمز مدمج لصفحات الويب وCSS. ستة أرقام ست عشرية بعد علامة #، رقمان لكل قناة: الأحمر ثم الأخضر ثم الأزرق. فـ#B76E79 تعني الأحمر B7 (183)، والأخضر 6E (110)، والأزرق 79 (121). والاختصار المكوّن من ثلاثة أرقام مثل #F80 يتوسع إلى #FF8800. وHEX هو الرمز الذي تلصقه في ورقة أنماط أو أداة بناء مواقع أو رمز تصميم.

RGB. ثلاثة أرقام من 0 إلى 255، رقم لكل قناة ضوء. وRGB 183، 110، 121 تعني أحمر قويًا إلى حد ما، وأخضر معتدلًا، وأزرق معتدلًا، وهو ما تقرأه العين ورديًا مغبرًا. وRGB هي الصيغة الأصلية للشاشات ومحررات الصور وأدوات الفيديو، وهي ما تكتبه عندما تطلب منك أداة قيم الأحمر والأخضر والأزرق.

HSL. درجة اللون والتشبع والإضاءة. فدرجة اللون زاوية من 0 إلى 360 درجة: 0 هو الأحمر، و120 هو الأخضر، و240 هو الأزرق، و351 قريبة من الأحمر مجددًا، في نطاق الوردي الأحمر. والتشبع هو مدى حيوية اللون، من الرمادي إلى اللون الكامل. والإضاءة هي مدى قرب اللون من الأسود أو الأبيض. وHSL هي أسهل صيغة للتصميم: حرّك درجة اللون لتغيير عائلة اللون، واخفض التشبع لتخفيفه، وارفع الإضاءة لصنع لون باستيل.

أخطاء شائعة في تحويل الألوان

أكثر الأخطاء شيوعًا هو كتابة رمز HEX دون علامة # أو بعدد أرقام خاطئ. فرمز HEX يحتاج إما 3 أرقام أو 6 أرقام ست عشرية، باستخدام الأحرف من 0 إلى 9 وA إلى F فقط. والرموز التي تحوي أحرفًا بعد F، أو المكوّنة من 4 أو 5 أرقام، ليست ألوانًا صالحة، وسيخبرك المحول بذلك بدلًا من التخمين.

ومن الأخطاء الشائعة أيضًا الخلط في ترتيب RGB. فترتيب RGB هو دائمًا الأحمر ثم الأخضر ثم الأزرق، وتبديل قناتين يعطي لونًا مختلفًا تمامًا. وفي HSL، درجة اللون زاوية، فـ351 درجة و-9 درجات هما الاتجاه نفسه على العجلة؛ فإذا عرضت أداتك درجة خارج النطاق من 0 إلى 360، فأعد لفّها بدلًا من اعتبارها خطأ.

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

من يستخدم منتقي الألوان والمحول؟

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

جميع الأدوات | عداد الكلمات

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

هل يخزّن منتقي الألوان هذا الألوان التي أختارها؟

لا. يعمل التحويل بالكامل في متصفحك. لا يُرفع أي شيء تختاره أو تكتبه ولا يُحفظ ولا يُشارك، وإغلاق الصفحة يزيله.

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

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

هل يمكنني إدخال رمز HEX من 3 أرقام؟

نعم. يتوسع الرمز المكوّن من 3 أرقام مثل #F80 إلى صورته المكوّنة من 6 أرقام، #FF8800، بمضاعفة كل رقم. ويُستخدم الرمز المكوّن من 6 أرقام كما هو. والرموز بأي طول آخر، أو بأحرف خارج النطاق من 0 إلى 9 وA إلى F، ليست صالحة.

كيف أكتب قيمة RGB؟

اكتب ثلاثة أعداد صحيحة من 0 إلى 255، مفصولة بفواصل، بترتيب الأحمر ثم الأخضر ثم الأزرق، مثل 183، 110، 121. وكل عدد قناة ضوء واحدة، والترتيب مهم: فتبديل قناتين يعطي لونًا مختلفًا.

كيف أكتب قيمة HSL؟

اكتب درجة اللون بالدرجات، ثم التشبع والإضاءة كنسب مئوية، مفصولة بفواصل، مثل 351، 33.6%، 57.5%. وتتراوح درجة اللون من 0 إلى 360، والتشبع والإضاءة من 0% إلى 100%.

لماذا يبدو اللون نفسه مختلفًا على شاشة أخرى؟

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

أي صيغة أستخدم لموقع ويب؟

استخدم HEX في CSS وفي معظم أدوات بناء المواقع، لأنه قصير وتقبله كل أدوات الويب. واستخدم RGB عندما تطلب أداة قيمًا منفصلة للأحمر والأخضر والأزرق، وHSL عندما تريد ضبط لون بتغيير درجة لونه أو تخفيف تشبعه، لأن تلك التعديلات أسهل في HSL.