ما الذي تتضمنه لوحة ألوان العلامة التجارية؟

تمنح لوحة ألوان العلامة التجارية كل لون وظيفة محددة. اللون الأساسي هو اللون الذي يتذكره الناس، ويظهر في الشعار والأزرار الرئيسية. ويدعم اللون الثانوي اللون الأساسي، بينما يبرز اللون المميّز الدعوات إلى اتخاذ إجراء، ويجمع لون الخلفية ولون النص عناصر الصفحة معًا.

لا تقل أهمية التباينات عن الذوق. توصي إرشادات إتاحة محتوى الويب (WCAG) بنسبة تباين لا تقل عن 4.5:1 بين النص العادي وخلفيته، أو 7:1 للمستوى AAA الأكثر صرامة.

وصف الأداة

صِف علامتك التجارية في حقل «عن علامتك التجارية»: ما الذي تقدمه، ولمن، وما الانطباع الذي ينبغي أن تتركه. اختر شخصية العلامة التجارية (احترافية، مرحة، فاخرة، بسيطة، جريئة أو طبيعية)، أو اترك الخيار على «مطابقة الوصف» ليحددها الذكاء الاصطناعي استنادًا إلى نصك.

ستحصل على خمسة ألوان بأسماء محددة: أساسي، وثانوي، ومميّز، وخلفية، ونص. يتيح لك تنسيق الإخراج التبديل بين قيمها بصيغ HEX وRGB وHSL وCMYK وغيرها، ولكل لون زر نسخ. يوضّح دليل الاستخدام كيفية استخدام كل لون، وتوفّر متغيرات CSS كتلةً يمكنك لصقها في ورقة أنماط. يُطلب من الذكاء الاصطناعي الحفاظ على نسبة تباين النص مع الخلفية عند 7:1 أو أكثر، ونسبة تباين اللونين الأساسي والمميّز عند 3:1 أو أكثر.

مثال

بالنسبة إلى الوصف «محمصة قهوة محلية في بورتلاند. دافئة ومرحّبة ومستدامة»، قد تحصل على لون أساسي بنيّ محمّص، وخلفية بلون كريمي، ولون مميّز بلون الطين المحروق، مع متغيرات CSS مثل هذه:

:root {
  --brand-primary: #5b3a29;
  --brand-secondary: #a47551;
  --brand-accent: #d9643a;
  --brand-background: #faf6f0;
  --brand-text: #2b211c;
}

الميزات

  • خمسة ألوان بأدوار واضحة، واسم، وملاحظة استخدام لكل لون
  • ست شخصيات للعلامة التجارية، أو شخصية يختارها الذكاء الاصطناعي من وصفك
  • انسخ الألوان بالتنسيق الذي تحتاجه، أو انسخ المجموعة كاملةً كمتغيرات CSS

القيود

لا تقيس الأداة التباين بنفسها، لذا اختبر النص والخلفية معًا باستخدام أداة فحص التباين قبل نشرها.