كل الأدوات تعمل داخل متصفحك — ملفاتك لا تغادر جهازك أبدًا.
All tools154

تصميم

مولّد لوحات الألوان

لوحات متناغمة في OKLCH بتدرّجات متساوية.

ما الذي تفعله. مولّد اللوحات يبني من لون أساسي مجموعة ألوان متناغمة وتدرّجات. ويحسب هذا المولّد في OKLCH لأن الخطوة الرقمية المتساوية فيه تعطي خطوة بصرية متساوية — أما اللوحات المبنية في HSL فتبدو منتظمة رقميًا وغير متّسقة بصريًا.
يعمل في متصفحكلا يتم رفع أي شيءبدون تسجيليعمل دون اتصال

كيفية الاستخدام مولّد لوحات الألوان

  1. اختر لونًا أساسيًا وقاعدة تناغم.
  2. حدّد عدد الدرجات؛ يُفحص تباين كل درجة أثناء البناء.
  3. انسخ اللوحة كمتغيّرات CSS أو كجدول قيم.

أي قاعدة تناغم؟

القواعد تصف مسافات على دائرة الألوان، ولا واحدة منها أفضل مطلقًا.

أي قاعدة تناغم؟
القاعدةالمسافةالأثر
أحادية اللون0°هادئة وآمنة وقليلة التمييز
متجاورة±30°متناغمة وطبيعية وقليلة التباين
متكاملة180°أقصى توتّر، وتصبح صاخبة بسرعة
متكاملة منقسمة150°/210°توتّر بلا قسوة — الأنسب غالبًا
ثلاثية120°حيوية وصعبة الموازنة

ولواجهات التطبيقات الأنسب غالبًا أحادية اللون أو متكاملة منقسمة: لون للعلامة، ولون للإبراز، وكثير من الرمادي المحايد. أما الثلاثية والرباعية فمكانها الرسوم التوضيحية لا الواجهات التي تحمل فيها الألوان معاني.

كم درجة يحتاج التدرّج؟

من تسع إلى إحدى عشرة درجة هي المعتاد، مرقّمة عادةً من 50 إلى 900.

والسبب عملي: تلزم درجات فاتحة جدًا للمساحات، ومتوسطة للحدود والحالات، وداكنة للنص. فبخمس درجات تنقص واحدة دائمًا، وبخمس عشرة لا يستطيع أحد الاختيار.

والأهم من العدد أن يكون لكل درجة وظيفة ثابتة. فالتدرّج الذي تحمل فيه الدرجة 500 في كل لون التباين نفسه مقابل الأبيض يمكن تبديل ألوانه دون المساس بإمكانية الوصول.

ولهذا يُعرض التباين لكل درجة أثناء البناء لا بعده: اللوحة التي تُفحص في النهاية تُعاد غالبًا من البداية.

ملاحظة على الألوان في السياق المحلي

اختيار الألوان مسألة تصميم لا قاعدة، لكن بعض الاعتبارات تتكرّر في مشاريع المنطقة.

الأخضر حاضر بكثافة في الهويات الحكومية والمؤسسية في عدد من دول الخليج، وله دلالة ثقافية ودينية. واستخدامه لحالة «خطأ» أو «تحذير» في واجهة يخالف التوقّع بوضوح.

والذهبي شائع في الهويات الفاخرة في المنطقة، وهو من أصعب الألوان في الواجهات: تباينه مع الأبيض ضعيف دائمًا، فلا يصلح للنص إلا بدرجة داكنة منه.

وفي كل الأحوال تبقى القاعدة أن اللون لا يحمل المعنى وحده. فالحالة يجب أن تُميَّز بأيقونة أو نص أيضًا، وإلا تعذّر على من لديه عمى ألوان تمييزها.

الأسئلة الشائعة

لماذا OKLCH لا HSL؟

لأن OKLCH مبني على الإدراك. اللوحات المبنية في HSL تبدو متفاوتة السطوع رغم تساوي أرقامها.

أي قاعدة تناغم أختار؟

للواجهات: أحادية اللون أو متكاملة منقسمة. والثلاثية أنسب للرسوم التوضيحية.

كم درجة أحتاج؟

من تسع إلى إحدى عشرة، مرقّمة من 50 إلى 900. والأهم أن يكون لكل درجة وظيفة ثابتة.

هل يُفحص التباين؟

نعم، لكل درجة أثناء البناء — لا بعده حين يكون التصحيح مكلفًا.

هل يمكن تصدير اللوحة كـCSS؟

نعم، كمتغيّرات مخصّصة بقيم OKLCH مع بديل HEX للمتصفحات القديمة.

هل تُرسل ألواني؟

لا. كل شيء يجري محليًا.

أدلة حول مولّد لوحات الألوان