منتقي الألوان وأكواد HEX وRGB
اختر لوناً أو أدخل كود HEX فتحصل على قيمه بصيغ HEX وRGB وHSL، وتباينه مع الأبيض والأسود، ولوحة ألوان مقترحة.
تُحسب الألوان بالكامل في متصفحك دون حفظ أي بيانات. مفيد لتصميم المواقع وCSS والعروض التقديمية وCanva.
جرّب أداة أخرى
اخترناها لتكمل هذه الأداةمنتقي الألوان من Tooleem يأخذ لوناً تختاره من لوحة الألوان أو كود HEX تكتبه، مثل #3B82F6 أو الصيغة المختصرة #0F0، ويعرض قيمه بثلاث صيغ: HEX وRGB وHSL، لكل منها زر نسخ. ويحسب نسبة تباين اللون مع الأبيض ومع الأسود ليخبرك أي لون نص أوضح فوقه، ويقترح أربعة ألوان مشتقة منه. يفيد المصممين ومطوري المواقع ومن يجهز عرضاً تقديمياً. كل الحسابات في متصفحك.
طريقة الاستخدام
- 01اختر اللوناضغط على مربع اللون لاختياره بالعين، أو اكتب كود HEX في الحقل.
- 02انسخ الصيغة التي تحتاجهاHEX لأغلب البرامج، وRGB وHSL لكتابة CSS أو لضبط اللون رقمياً.
- 03استخدم الاقتراحاتاضغط على أي لون في اللوحة المقترحة لتختاره وترى قيمه.
متى تفيدك هذه الأداة؟
- تصميم المواقع وCSSالحصول على الكود بالصيغة التي يطلبها الملف دون حساب يدوي.
- مطابقة ألوان العلامةتحويل كود HEX من دليل العلامة إلى RGB لبرامج المكتب والعروض.
- اختيار لون النصمعرفة إن كان النص الأبيض أو الأسود أوضح فوق لون الخلفية قبل اعتماده.
أمثلة
- لون أزرق لزر في موقعالكود #3B82F6 يساوي rgb(59, 130, 246). تخبرك الأداة أن النص الفاتح أو الداكن أوضح فوقه، فتختار لون كتابة الزر بثقة.
- تحويل كود مختصرالكود المختصر #0F0 يعني #00FF00، أي الأخضر الكامل، وقيمته في RGB rgb(0, 255, 0).
- خلفية هادئة للون العلامةاقتراح الخلفية الهادئة يحتفظ بدرجة اللون نفسها بإضاءة 94%، فتحصل على خلفية فاتحة متناسقة لبطاقة أو قسم.
نصائح لنتيجة أفضل
- الصيغة المختصرةكل حرف في الكود المختصر يتكرر: #F80 تعني #FF8800.
- HSL أسهل للتعديللتفتيح اللون أو تعتيمه غيّر قيمة الإضاءة L في HSL وحدها، فتبقى درجة اللون كما هي.
- تحقق من التباين للنصوص الصغيرةلفحص لونين محددين معاً، نص وخلفية، استخدم أداة فحص تباين الألوان.
ما الفرق بين HEX وRGB وHSL؟
الصيغ الثلاث تصف اللون نفسه. RGB تحدد كمية الأحمر والأخضر والأزرق، كل منها من 0 إلى 255. HEX تكتب القيم الثلاث نفسها بالنظام السداسي عشر، رقمين لكل لون، بعد علامة #. أما HSL فتصف اللون بدرجته على دائرة الألوان من 0 إلى 360، وتشبّعه، وإضاءته بالنسب المئوية، وهي الأسهل لصنع درجات أفتح وأغمق.
كيف يُحسب التباين؟
تحسب الأداة الإضاءة النسبية لكل لون وفق تعريف إرشادات WCAG، ثم تقسم إضاءة الأفتح زائد 0.05 على إضاءة الأغمق زائد 0.05. تتراوح النسبة بين 1:1 و21:1، وتشترط إرشادات WCAG نسبة 4.5:1 على الأقل للنص العادي. ثم تختار الأداة لون النص، الفاتح أو الداكن، الذي يعطي النسبة الأعلى.
كيف تُشتق الألوان المقترحة؟
الأفتح والأغمق يرفعان إضاءة HSL أو يخفضانها 18 نقطة. اللون المكمل يدور درجة اللون 180 درجة إلى الجهة المقابلة من الدائرة. والخلفية الهادئة تحتفظ بدرجة اللون مع إضاءة 94% وتشبع لا يتجاوز 60%.
أسئلة شائعة
كيف أحوّل كود HEX إلى RGB؟
أدخل الكود في الحقل فتظهر قيمة RGB مباشرة. يدوياً: كل رقمين سداسيين يمثلان لوناً، فمثلاً 3B بالسداسي عشر تساوي 59 بالعشري.
ما معنى نسبة التباين 4.5:1؟
هي الحد الأدنى الذي تطلبه إرشادات WCAG للنص العادي حتى يُقرأ بوضوح. كلما كبرت النسبة كان الفرق بين لون النص والخلفية أوضح.
هل يمكنني أخذ لون من صورة؟
هذه الأداة تعمل باختيار اللون أو بكتابة كوده، ولا تقرأ الألوان من صورة.
هل تقبل الأداة الكود المختصر؟
نعم. الكود المكوّن من ثلاثة أحرف مثل #0F0 يُفهم كصيغته الكاملة #00FF00.
هل تُحفظ الألوان التي أختارها؟
لا. تُحسب القيم في متصفحك ولا يُحفظ أي شيء.