نظام ألوان الموقع — رموز CSS دلالية
أنشئ نظام ألوان للموقع داخل المتصفح. اختر HEX للعلامة (مثال تركوازي #0F6E8C)، واحصل على محايدات مشتركة وaction/hover/soft/focus وروابط محايدة وألوان حالة ثابتة ومعاينة واجهة وفحوصات AA، ثم انسخ CSS لـ :root أو JSON. قائم على قواعد — ليس ذكاءً اصطناعيًا سحابيًا؛ لا يُرفع شيء.
محايدات وألوان حالة مشتركة؛ كل سمة تستبدل فقط رموز مشتقات العلامة. الحد الأقصى 4 سمات.
| الرمز | القيمة |
|---|
| الرمز | القيمة | الدور |
|---|
طريقة العمل
أدخل حتى أربع سمات علامة (معرّف + HEX). تُحفظ سلّم محايدات مشترك، وتُشتق رموز الإجراء من كل علامة، وتُربط الأدوار الدلالية (بما فيها الروابط المحايدة والحالات الثابتة)، وتُرسم معاينة واجهة فاتحة، وتُجرى فحوصات AA، ويمكنك نسخ متغيرات CSS أو JSON — كله محليًا.
قواعد متوقعة
طبقات الرموز، الرابط ≠ الإجراء، استقلال الحالة، تلميحات التباين، والخصوصية.
- الأساسيات تحفظ المحايدات الخام ومشتقات العلامة. الدلالات تسمّي الغرض (bg وsurface وlink وaction…). يجب أن تشير المكوّنات إلى الدلالات فقط.
- العلامة → --action؛ التمرير يغمّق حوالي 22٪؛ soft ≈ شفافية 10٪؛ focus-ring ≈ شفافية 40٪؛ --bg محايد ملوّن بلطف.
- الروابط تُربط بـ text / text-strong (محايد). لا تربط --link الافتراضي بـ --action.
- danger / success / warning / info تبقى ثابتة عبر السمات حتى لا تحل العلامة محل دلالة الخطأ.
- الخصوصية: الإنشاء والمعاينة والنسخ للحافظة تجري في هذا التبويب. لا يُرفع لون العلامة.
مثال
حمّل المثال (معرّف السمة teal و#0F6E8C). المعاينة تعرض سطحًا أبيض وتظليلاً تركوازيًا خفيفًا للعنصر النشط (بدون شريط أيسر) وروابط نص محايدة وسطر خطأ أحمر. الطبقة الدلالية تربط --link بلون النص (لا --action). نسخ CSS يعطي محايدات :root مع تجاوزات html[data-theme="teal"].
مناسب لـ
- واجهة أدوات أو SaaS: هيكل فاتح مقروء مع إبراز العلامة على التحديد والتركيز لا على كل رابط.
- إعادة تمييز صفحة هبوط: بدّل علامات html[data-theme] مع الإبقاء على الهيكل المحايد وألوان الحالة.
- تسليم تصميم→تطوير: الصق متغيرات CSS لـ :root بدل قوائم HEX من لقطات الشاشة.
Frequently asked questions
هل «ذكي» يعني توليد ألوان بالذكاء الاصطناعي؟
«ذكي» هنا يعني قواعد حتمية: المحايدات ثابتة، العلامة تشتق action/hover/soft/focus، الروابط تبقى محايدة، وألوان الحالة لا تتبع العلامة. لا استدعاء لنموذج ولا رفع — الحساب يجري في هذا التبويب.
لماذا الروابط ليست بلون العلامة؟
الروابط الافتراضية تستخدم ألوان النص حتى لا تتحول الصفحة إلى جدار روابط بلون العلامة. لون العلامة مخصص للإجراءات والتحديد وحلقات التركيز والخلفيات soft الخفيفة.
لماذا لا تتغير ألوان الحالة مع السمة؟
ألوان danger وsuccess وwarning وinfo تبقى ثابتة عبر السمات. علامة كهرمانية لا يجب أن تصبح لون الخطأ، وإلا تبدو الواجهة كتنبيه دائم.
متى أستخدم توليد مقياس ألوان العلامة بدلًا من هذه؟
استخدم توليد مقياس ألوان العلامة عندما تحتاج سلّمًا 50–950 أو قوائم HEX/HSL/OKLCH. هذه الصفحة تقدّم نظامًا دلاليًا فاتحًا كاملًا (bg/surface/link/action/status) جاهزًا للصق.
ما مدى اكتمال فحص التباين الذاتي؟
الفحص الذاتي يغطي بضعة أزواج مفتاحية في السمة النشطة. لأي زوج عشوائي أو مستوى AAA افتح فاحص تباين WCAG والصق HEX أي رمز.
Related tools
استفسارات أو ملاحظات
هل هناك غموض أو خلل أو نقص؟ اكتب رسالة أدناه — نقرأ كل ملاحظة عن هذه الأدوات.