منتقي الألوان
اختر الألوان واحصل على قيم HEX وRGB وHSL.
حول منتقي الألوان
يتيح لك منتقي الألوان من GuruAlpha اختيار أي لون من طيف تفاعلي والحصول على قيم HEX وRGB وHSL الخاصة به على الفور. انقر في أي مكان على تدرج الألوان لاختيار لون، أو اضبط التشبع والإضاءة باستخدام أشرطة التمرير، أو أدخل رمز لون معروفًا لمعاينته. إنها أداة أساسية لمصممي الويب والفنانين والمطورين الذين يعملون مع الألوان يوميًا.
يُعد اختيار الألوان مهمة أساسية في سير عمل التصميم. سواء كنت تبني موقعًا إلكترونيًا أو تصمم شعارًا أو تنشئ مواد تسويقية أو تحرر الصور، فأنت بحاجة إلى اختيار ألوان دقيقة والحصول على قيمها التقنية لاستخدامها في CSS أو برامج التصميم أو مواصفات الطباعة. يوفر منتقي الألوان جميع صيغ الألوان الرئيسية الثلاث في وقت واحد، مما يلغي الحاجة إلى أدوات تحويل منفصلة.
يعرض طيف الألوان التفاعلي النطاق اللوني المرئي الكامل في تدرج ثنائي الأبعاد. يمثل المحور الأفقي درجة اللون (Hue) (من 0 إلى 360 درجة على عجلة الألوان)، ويمثل المحور العمودي التشبع. يتحكم شريط تمرير منفصل للإضاءة في مدى سطوع أو قتامة اللون المحدد. تتيح لك هذه الواجهة البديهية العثور بصريًا على اللون المطلوب بالضبط، ثم نسخ قيمه لاستخدامها في مشروعك.
تتضمن الأداة أيضًا لوحة ألوان شائعة الاستخدام منظمة حسب الفئة: ألوان آمنة للويب، وألوان Material Design، وألوان Tailwind CSS، وألوان Pantone المرجعية. انقر على أي إعداد مسبق لتحميله فورًا في المنتقي. تسرّع مكتبة الإعدادات المسبقة هذه اختيار الألوان لحالات الاستخدام الشائعة وتضمن الاتساق مع أنظمة التصميم الراسخة.
يُظهر تكامل مدقق التباين نسبة تباين اللون المحدد مقابل الخلفيتين البيضاء والسوداء، مما يساعدك على اختيار ألوان تفي بمعايير الوصول WCAG. يلزم توفر نسبة تباين لا تقل عن 4.5:1 للنص العادي (WCAG AA)، و7:1 للوصول المحسّن (WCAG AAA). تمنع هذه الميزة مشكلات إمكانية الوصول قبل وصولها إلى مرحلة الإنتاج.
أبرز ميزات منتقي الألوان
- طيف ألوان تفاعلي مع التحكم في درجة اللون والتشبع والإضاءة
- عرض قيم HEX وRGB وHSL في وقت واحد
- لوحات ألوان مسبقة: آمنة للويب، Material Design، Tailwind، Pantone
- مدقق نسبة التباين للوصول وفق WCAG
- انسخ القيم بنقرة واحدة بأي صيغة
- سجل الألوان الأخيرة
- يعمل على جميع الأجهزة
- لا حاجة للتسجيل
كيفية استخدام منتقي الألوان
- افتح منتقي الألوان على GuruAlpha.
- انقر على طيف الألوان لاختيار درجة اللون والتشبع.
- اضبط شريط تمرير الإضاءة لضبط السطوع بدقة.
- اعرض قيم HEX وRGB وHSL في الوقت الفعلي.
- أو أدخل رمز لون معروفًا بأي صيغة لمعاينته.
- تحقق من نسبة التباين لضمان الامتثال لإمكانية الوصول.
- انسخ قيمة اللون بالصيغة المفضلة لديك.
نصائح لاستخدام منتقي الألوان
- استخدم مدقق التباين لضمان وضوح قراءة النص على الخلفية التي اخترتها.
- توفر الإعدادات المسبقة الوقت — ابدأ بلون Material Design أو Tailwind ثم اضبطه.
- HSL هي الصيغة الأكثر بديهية لضبط الألوان — عدّل درجة اللون أو التشبع أو الإضاءة بشكل مستقل.
- يساعدك سجل الألوان الأخيرة على العودة إلى الألوان التي اخترتها سابقًا.
- استخدم HEX لـ CSS، وRGB لأدوات التصميم، وHSL لضبط الألوان.
الأسئلة الشائعة حول منتقي الألوان
ما الفرق بين HEX وRGB وHSL؟
يستخدم HEX رمزًا سداسيًا عشريًا من 6 خانات (#FF5733). يعرّف RGB الألوان بقيم الأحمر والأخضر والأزرق (من 0 إلى 255 لكل منها). يستخدم HSL درجة اللون (0-360) والتشبع (0-100%) والإضاءة (0-100%).
ما هي نسبة تباين WCAG؟
تحدد WCAG الحد الأدنى للتباين للقراءة. يتطلب المستوى AA نسبة 4.5:1 للنص العادي. ويتطلب AAA نسبة 7:1. تعرض الأداة النسبة للون الذي اخترته مقابل الأبيض والأسود.
هل يمكنني إدخال رمز لون مباشرة؟
نعم. أدخل قيم HEX (#FF5733) أو RGB (rgb(255,87,51)) أو HSL (hsl(9,100%,60%)) وسيعرض المنتقي ذلك اللون.
هل الإعدادات المسبقة من أنظمة تصميم حقيقية؟
نعم. تشمل الإعدادات المسبقة ألوانًا آمنة للويب وGoogle Material Design وTailwind CSS وألوان Pantone المرجعية.