يقدم منتقي الألوان أداة قطارة دقيقة بالبكسل لاقتطاف الألوان من أي عنصر على صفحة الويب — كنص، خلفيات، صور، تدرجات، أو أي بكسل مرئي. احصل على قيمة اللون الدقيقة في آن واحد بتنسيقات (HEX و RGB و HSL)، مع معاينة للبكسل المكبر للاستهداف الدقيق. الألوان الملتقطة مؤخراً تُحفظ في شريط السجل لتسهيل الرجوع والوصول السريع إليها.
إن استخلاص قيم الألوان الدقيقة من صفحة الويب هو مهمة شائعة — سواء لمطابقة لون العلامة التجارية، أو توظيف مرجع دراسة لتصميم، أو التحقق من درجة لون مستخدمة في موقع منافس. تُظهر أدوات المطور (DevTools) في المتصفحات الألوان بلوحة التنسيقات (Styles)، ولكن فقط للعناصر ذات خصائص ألوان CSS الصريحة المحددة — وليس للصور، أو التدرجات، أو الألوان الموروثة. بينما تعمل قطارة Color Picker على مستوى البكسل الحقيقي — حيث تقرأ اللون الفعلي المعروض لأي بكسل واقع تحت مؤشر الماوس الخاص بك، بغض النظر عن الكيفية التي وصل بها اللون إلى هناك. انقر على سماء زرقاء في صورة رئيسية (Hero)، أو نقطة المنتصف لتدرج متداخل، أو تراكب شفاف (Overlay)، واحصل على قيمة اللون الهجين والمركب بدقة متناهية. تعرض الدائرة المكبرة للمعاينة منظراً مقرباً جداً للبكسلات المحيطة ليتسنى لك استهداف البكسل الذي تريده بالضبط. تُعرض القيم بالتنسيقات الثلاثة (HEX و RGB و HSL) في آن واحد — اضغط على أي تنسيق لنسخه. تُخزن عمليات الانتقاء الحديثة لديك بشريط محتجز أسفل الأداة ليساعدك في الاستعانة بالألوان بأي وقت.
معاينة دائرية مكبرة تعرض البكسلات المحيطة بمؤشر الماوس، مع عدسة استهداف متقاطعة للاختيار الدقيق على مستوى البكسل. التقط الألوان من النصوص، والخلفيات، والصور، والتدرجات، وصور SVG، أو أي بكسل مرئي على الصفحة المنعكسة أمامك.
يُعرض كل لون يتم التقاطه بجميع التنسيقات الثلاثة بآنٍ واحد: HEX مثل (#7c3aed)، و RGB مثل (rgb(124, 58, 237))، و HSL مثل (hsl(262, 83%, 58%)). لا حاجة للتبديل أو التحويل — جميع التنسيقات متاحة فوراً لاستعمالك.
انقر على أي صف لتنسيق (HEX، RGB، أو HSL) لنسخ القيمة المحددة إلى الحافظة على الفور. ستؤكد حركة "تم النسخ! (Copied!)" القصيرة نجاح العملية. الصق القيمة مباشرة في ملف CSS الخاص بك، أو أداة التصميم، أو في مواصفات الألوان.
تُحفظ ألوانك الملتقطة مؤخراً في شريط سجل يعرض عينات وقصاصات مرئية مصغرة. انقر فوق أي عينة لإعادة اختيارها ورؤية قيمها مرة أخرى. يستمر شريط الخيارات والألوان بين الجلسات لتلتقط ألواناً من صفحات متعددة بكل أريحية.
يُعرض اللون الملتقط كعينة كبيرة أعلى قيم التنسيق، مما يسهل مشاهدة اللون والتحقق منه. العينة كبيرة بما يكفي لإظهار الظلال والدرجات الدقيقة التي قد تبدو متطابقة وشبيهة في الأحجام الأصغر.
تلتقط الأداة الألوان من أي بكسل مرئي: ألوان CSS، وتدرجات CSS، والصور (PNG، JPG، SVG)، وعناصر الرسم و (Canvas)، وإطارات الفيديو المضمنة، والتراكبات الشفافة (متعرّفةً على اللون المركّب)، وحتى إطارات iframes المنفصلة. إذا كنت تستطيع رؤيتها، فبالتأكيد يمكنك التقاطها وامتلاكها.
التقط اللون الدقيق من موقع الويب الخاص بأي شركة لضمان استخدام تصميمك أو المحتوى الخاص بك للدرجة الصحيحة. احصل على قيمة HEX بدقة متناهية بدلاً من تخمينها بالعين المجردة أو تضيع الوقت في البحث بدليل العلامة التجارية.
التقط الألوان مباشرة من الصور الرئيسية أو صور المنتجات أو الرسوم التوضيحية. استخرج لوناً مهيمناً من التفاصيل لتستخدمه كخلفية تكميلية متناسبة في تصميمك.
ينص توثيق التصميم على أن لون الزر يجب أن يكون #7c3aed. التقط اللون من الزر المُنفذ للتحقق من مطابقته للوثيقة. يرسخ ذلك اصطياد الاختلافات اللونية الدقيقة التي لا تراها العين المجردة.
تصفح مواقع إلهام التصميم والتقط الألوان التي تلفت انتباهك وتطرب عينك. يقوم شريط السجل المتصل ببناء لوحة من الألوان التي التقطتها خلال الجلسة — لتوظفه كنقطة انطلاق لنظام ألوانك الخاص.
التقط الألوان عند نقاط مختلفة على طول تدرج CSS لترى اللون الدقيق في كل موضع. سيكون ذلك مفيداً جداً لمحاكاة التدرجات المتشابكة أو فهم كيفية مزج نقاط التوقف اللونية.
افتح لوحة DevSuite Pro العائمة وانقر على أيقونة Color Picker. يتغير شكل المؤشر إلى قطارة مرفقة بدائرة معاينة وموائمة مُكبرة.
حرك مؤشر الماوس فوق الصفحة. تعرض دائرة المعاينة المكبرة عرضاً مُقرّباً للبكسلات المحيطة بمؤشر الماوس، مع تقاطع دقيق للإشارة إلى البكسل المستهدف بدقة.
انقر في أي مكان على الصفحة لالتقاط اللون الموجود في هذا البكسل. سيتم تحديث عينة اللون والقيم بآلية HEX و RGB و HSL على الفور دون إبطاء.
انقر على السطر والسطر المعني بـ HEX أو RGB أو HSL لنسخ قيمته للحافظة. وتبرز رسالة تأكيد النقل "Copied!" للحظة عابرة.
استمر بضغط الماوس لانتقاء واستحواذ ألوان أخرى. وسيضاف كل لون يتم التقاطه إلى شريط السجل. انقر على أي عينة لتذكير واسترجاع بياناتها.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 39 أداة للمطورين لمتصفحك.
