أداة مجانية
مولّد لوحة الألوان
أدخل لون علامتك التجارية واحصل على لوحة ألوان كاملة وسهلة الوصول: تدرج من الفاتح إلى الغامق، لون مميز متناسق، تدرج رمادي محايد، ونسب تباين WCAG حقيقية لكل درجة لون، محسوبة مباشرة في متصفحك.
تدرج الألوان
لون البذرة الخاص بك مُفتّحًا ومُغمّقًا على 10 خطوات، بنفس الدرجة والتشبع طوال الوقت، محسوب عبر استيفاء حقيقي لسطوع HSL. استخدم الخطوات الأفتح للخلفيات وحالات التحويم، والخطوات الأغمق للنص والحدود.
اللون المميز
درجة لون ثانية مختلفة لوضع التناغم المحدد أعلاه، مفيدة عندما تحتاج إلى لون مميز حقيقي يتباين مع لون علامتك التجارية بدلاً من درجة أخرى منه.
التدرج المحايد
تدرج رمادي مشتق من درجة لون علامتك التجارية بتشبع منخفض، بحيث تبدو الخلفيات والحدود والنص الخافت جزءًا من نفس اللوحة بدلاً من رمادي عام قياسي.
تصدير
#965829 مقابل نص أبيض: 5.64:1 · #965829 مقابل نص أسود: 3.72:1
ماذا تحسب هذه الأداة فعليًا؟
أدخل لون hex واحد وتقوم هذه الأداة بإجراء حسابات ألوان حقيقية بالكامل في متصفحك: تحول لونك إلى HSL وتستوفي السطوع عبر 10 خطوات لبناء تدرج فاتح/غامق، وتدور درجة اللون 180 درجة (أو 120/240 للثلاثي، أو ±30 للمتجانس) لحساب لون مميز حقيقي، وتشتق تدرجًا محايدًا منخفض التشبع من نفس الدرجة للخلفيات ونص المحتوى. لا شيء هنا جدول بحث بلوحات ألوان جاهزة مسبقًا: كل درجة لون محسوبة من اللون الدقيق الذي أدخلته.
لماذا تهم اللوحة المتسقة وسهلة الوصول لشركة صغيرة؟
العلامة التجارية التي تستخدم نفس الخمسة أو الستة ألوان بشكل متعمد عبر موقعها وفواتيرها ومنشوراتها الاجتماعية تبدو أكثر رسوخًا وموثوقية من علامة تختار درجة مختلفة قليلاً في كل مرة بالعين المجردة. تعزز إمكانية الوصول إشارة الثقة تلك مباشرة: النص الذي لا يجتاز إرشادات تباين WCAG أصعب قراءة بشكل ملموس لمستخدمي ضعف البصر أو عمى الألوان، وفي عدة ولايات قضائية يُعد التباين سهل الوصول متطلبًا قانونيًا للمواقع العامة، وليس مجرد ميزة إضافية. ضبط التدرج والتباين بشكل صحيح مرة واحدة، قبل إطلاق الموقع، أرخص بكثير من إصلاحه لاحقًا.
أداة WebAIM لفحص التباين، للحصول على رأي ثانٍ حول أي زوج ألوانأسئلة شائعة
كيف أعرف ما إذا كانت ألوان علامتي التجارية سهلة الوصول؟
تحقق من نسبة التباين الفعلية بين لون النص وخلفيته، وليس فقط كيف يبدو على شاشتك. يتطلب معيار WCAG 2.1 نسبة 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير (18 نقطة أو 14 نقطة عريضة وأكبر) لاجتياز مستوى AA الذي تشير إليه معظم قوانين إمكانية الوصول. تحسب هذه الأداة تلك النسبة الدقيقة لكل درجة لون مقابل النص الأبيض والأسود، لترى أي التركيبات تنجح فعليًا قبل اعتمادها في الموقع بأكمله.
لماذا تولّد الأداة تدرجًا رماديًا بدلاً من استخدام رمادي عادي؟
رمادي نقي بلا تشبع بجانب لون علامة تجارية دافئ أو بارد غالبًا ما يبدو غير متناسق قليلاً، وهي إشارة صغيرة لكنها حقيقية يلاحظها الزوار حتى لو لم يتمكنوا من تسميتها. اشتقاق التدرج المحايد من درجة لون البذرة الخاصة بك بتشبع منخفض يجعل الخلفيات والحدود والنص الخافت تبدو جزءًا من نفس اللوحة بدلاً من إعداد عام مضاف لاحقًا.
ما الفرق بين تدرج الفاتح/الغامق واللون التكميلي؟
تدرج الفاتح/الغامق هو لون البذرة الواحد الخاص بك مُفتّحًا ومُغمّقًا على خطوات، مفيد لحالات التحويم والخلفيات والنصوص بأوزان مختلفة مع بقائه واضحًا كجزء من العلامة التجارية. اللون التكميلي هو درجة لون ثانية مختلفة (محسوبة بتدوير 180 درجة حول عجلة الألوان)، مفيد عندما تحتاج إلى لون مميز حقيقي يتباين مع لونك الأساسي بدلاً من درجة أخرى من نفس اللون.