CSS Gradient Generator
Build linear, radial and conic gradients and copy the CSS.
تصميم
لوحات متناغمة في OKLCH بتدرّجات متساوية.
القواعد تصف مسافات على دائرة الألوان، ولا واحدة منها أفضل مطلقًا.
| القاعدة | المسافة | الأثر |
|---|---|---|
| أحادية اللون | 0° | هادئة وآمنة وقليلة التمييز |
| متجاورة | ±30° | متناغمة وطبيعية وقليلة التباين |
| متكاملة | 180° | أقصى توتّر، وتصبح صاخبة بسرعة |
| متكاملة منقسمة | 150°/210° | توتّر بلا قسوة — الأنسب غالبًا |
| ثلاثية | 120° | حيوية وصعبة الموازنة |
ولواجهات التطبيقات الأنسب غالبًا أحادية اللون أو متكاملة منقسمة: لون للعلامة، ولون للإبراز، وكثير من الرمادي المحايد. أما الثلاثية والرباعية فمكانها الرسوم التوضيحية لا الواجهات التي تحمل فيها الألوان معاني.
من تسع إلى إحدى عشرة درجة هي المعتاد، مرقّمة عادةً من 50 إلى 900.
والسبب عملي: تلزم درجات فاتحة جدًا للمساحات، ومتوسطة للحدود والحالات، وداكنة للنص. فبخمس درجات تنقص واحدة دائمًا، وبخمس عشرة لا يستطيع أحد الاختيار.
والأهم من العدد أن يكون لكل درجة وظيفة ثابتة. فالتدرّج الذي تحمل فيه الدرجة 500 في كل لون التباين نفسه مقابل الأبيض يمكن تبديل ألوانه دون المساس بإمكانية الوصول.
ولهذا يُعرض التباين لكل درجة أثناء البناء لا بعده: اللوحة التي تُفحص في النهاية تُعاد غالبًا من البداية.
اختيار الألوان مسألة تصميم لا قاعدة، لكن بعض الاعتبارات تتكرّر في مشاريع المنطقة.
الأخضر حاضر بكثافة في الهويات الحكومية والمؤسسية في عدد من دول الخليج، وله دلالة ثقافية ودينية. واستخدامه لحالة «خطأ» أو «تحذير» في واجهة يخالف التوقّع بوضوح.
والذهبي شائع في الهويات الفاخرة في المنطقة، وهو من أصعب الألوان في الواجهات: تباينه مع الأبيض ضعيف دائمًا، فلا يصلح للنص إلا بدرجة داكنة منه.
وفي كل الأحوال تبقى القاعدة أن اللون لا يحمل المعنى وحده. فالحالة يجب أن تُميَّز بأيقونة أو نص أيضًا، وإلا تعذّر على من لديه عمى ألوان تمييزها.
لأن OKLCH مبني على الإدراك. اللوحات المبنية في HSL تبدو متفاوتة السطوع رغم تساوي أرقامها.
للواجهات: أحادية اللون أو متكاملة منقسمة. والثلاثية أنسب للرسوم التوضيحية.
من تسع إلى إحدى عشرة، مرقّمة من 50 إلى 900. والأهم أن يكون لكل درجة وظيفة ثابتة.
نعم، لكل درجة أثناء البناء — لا بعده حين يكون التصحيح مكلفًا.
نعم، كمتغيّرات مخصّصة بقيم OKLCH مع بديل HEX للمتصفحات القديمة.
لا. كل شيء يجري محليًا.