تقوم أداة لوحة الألوان بمسح كل عنصر على صفحة الويب واستخراج المجموعة الكاملة من الألوان المستخدمة — بداية من النصوص والخلفيات وصولاً للحدود والظلال والألوان المميزة. يتم عرض الألوان كعينات مرئية مرتبة حسب التكرار (الأكثر استخداماً أولاً)، حيث تعرض كل عينة قيمة الـ HEX وعدد مرات استخدامها. انقر فوق أي عينة للنسخ، أو قم بتصدير اللوحة بأكملها كقائمة برموز الألوان.
يحتوي كل موقع ويب حسن التصميم على لوحة ألوان متسقة — تتكون عادةً من 3-8 ألوان أساسية بالإضافة إلى بعض الألوان المحايدة. تستخرج أداة لوحة الألوان هذه اللوحة تلقائياً عن طريق فحص قيم الألوان المحسوبة لكل عنصر، كلون الخلفية ولون الحدود ولون ظل الصندوق. والنتيجة هي مجموعة مرتبة حسب التكرار لكل لون على الصفحة، مما يمنحك الصورة الكاملة لنظام ألوان الموقع. تظهر الألوان المهيمنة (لون العلامة التجارية الأساسي، لون الخلفية، لون النص) أولاً مع أعداد استخدام عالية. بينما الألوان المميزة للتمييز (Accent) والقيم العابرة تظهر في الأسفل. هذا لا يقدر بثمن للبحث في التصميم — قم بزيارة أي موقع ويب واستخرج لوحة ألوانه الدقيقة في ثوانٍ. كما أنه مفيد لتدقيق موقعك الخاص: هل هناك ألوان مشتتة لا تنتمي إلى نظام التصميم الخاص بك؟ هل تستخدم 5 ظلال مختلفة قليلاً من اللون الرمادي بينما تحدد مواصفات التصميم 3 فقط؟ أداة لوحة الألوان تجعل استخدام اللون بأكمله مرئياً وقابلاً للحساب.
تمسح كل عنصر مرئي على الصفحة وتستخرج الألوان من الخصائص المحسوبة (computed properties): كلون النصوص، لون الخلفيات، لون الحدود، لون ظلال المربع، لون المخطط (outline-color)، ولون تزيين النص (text-decoration-color). يتم التقاط كل لون يستخدم في الصفحة.
تُصنف الألوان حسب عدد مرات الاستخدام — يظهر اللون الأكثر استخداماً أولاً. ترتفع ألوان العلامة التجارية المهيمنة والخلفيات إلى الأعلى، بينما تظهر الألوان المميزة والعرضية في الأسفل. شاهد الألوان الأساسية والثانوية والمميزة للصفحة على الفور.
يُعرض كل لون كعينة مرئية كبيرة مع كود הـ HEX الخاص به وعدد الاستخدام معروضاً بالأسفل. العينات كبيرة بما يكفي لتمييز اختلافات الظل والدرجات الدقيقة (مثل التفرقة بين #333 و #2a2a2a).
انقر فوق أي عينة لون لنسخ قيمة الـ HEX الخاصة بها إلى حافظتك على الفور. لا حاجة لفتح لوحة ألوان أو مربع حوار ثانوي — بنقرة واحدة، يُنسخ، وتنتهي المهمة.
انقر على "تصدير الكل (Export All)" لنسخ اللوحة بأكملها كقائمة منسقة من أكواد ألوان الـ HEX. الصقها في أداة التصميم، أو ملف متغيرات CSS، أو لتوثيقات وتدوينات الألوان. تحتفظ القائمة بترتيب الفرز حسب التكرار.
يتم توحيد الألوان (تُدمج تمثيلات rgb و hex لنفس اللون معاً) وتُزال منها التكرارات. تُظهر اللوحة الألوان الفريدة فقط، مع تجميع عدادات الاستخدام في حصيلة التمثيلات المكررة.
قم بزيارة مواقع الويب ذات أنظمة الألوان الجذابة واستخرج لوحتها الدقيقة. استخدم الألوان كنقطة انطلاق لتصميمك الخاص — أو قم ببساطة بتوثيق مجموعات الألوان التي تتناغم معاً ليعملن سوياً.
قم بتشغيل لوحة الألوان على موقعك الخاص للتحقق من اتساق ألوان علامتك التجارية. هل هناك 4 ألوان زرقاء مختلفة قليلاً حيث يجب أن يكون هناك 1؟ هل تتسرب ألوان غير تابعة للعلامة؟ الفرز بالتكرار يجعل التناقضات واضحة.
قم بتصدير اللوحة وتحويلها إلى خصائص CSS مخصصة (--color-primary، --color-secondary، إلخ). يخبرك الإخراج المرتب بالتكرار بأي الألوان تستحق ومؤهلة لأدوار الأسس الأساسية والثانوية والمميزة.
استخرج لوحات الألوان من مواقع المنافسين لفهم موقع وشعبية علامتهم التجارية. الألوان الدافئة مقابل الألوان الباردة، التباين العالي مقابل الخافت — اللوحة تكشف سر خيارات التصميم المتعمدة.
شاهد جميع ألوان النص جنباً إلى جنب مع ألوان الخلفية. هل هناك أي مجموعات وخلطات من النص والخلفية ذات تباين منخفض للغاية؟ تمنحك اللوحة المجموعة الكاملة من الألوان للتحقق من متطلبات تباين WCAG.
افتح لوحة DevSuite Pro العائمة وانقر على أيقونة Color Palette. تفحص الأداة كل عنصر في الصفحة وتستخرج كل قيم الألوان.
تظهر شبكة من عينات وقصاصات الألوان، مرتبة ومصنفة بحسب معدل وتكرار عرضها. تتصدر الألوان الأكثر استخداماً في الأعلى. تعرض كل عينة كود HEX وعدد العناصر المتلونة بها.
انقر فوق أي عينة لنسخ قيمة HEX الخاصة بها إلى الحافظة. يظهر تأكيد قصير بنجاح عملية الحفظ.
انقر على "تصدير الكل" لنسخ كل لون كقائمة منسقة للذاكرة. ألصقها بمعرفات ملفات CSS، أو أداة التصميم، أو بالتوثيق.
انتقل إلى صفحات مختلفة في نفس الموقع واستخرج اللوحات للتحقق من اتساق نظام الألوان في جميع أنحاء الموقع وسلامتها.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 39 أداة للمطورين لمتصفحك.
