الإجابة المباشرة
يقوم منشئ نظام الألوان بتحويل ألوان العلامة التجارية الثابتة إلى مقاييس أولية 50–950 وأدوار دلالية قابلة للتعديل للوضعين الفاتح والداكن محلياً داخل المتصفح دون نقل للبيانات.
كيفية استخدام هذه الأداة
إدخال الألوان الأساسية
الصق قيم HEX أو oklch() أو color(display-p3 …) وعين كل لون لعائلة مثل Primary أو Neutral مع نقطة ارتكاز 400/500/600.
إنشاء المشروع
توليد مقاييس الألوان الأساسية والمحايدة وحالات النظام والتعيينات الدلالية الافتراضية مع الحفاظ الصارم على ثبات نقاط الارتكاز.
التعديل والمعاينة المباشرة
اضبط درجات المقياس أو الروابط الدلالية وعاين مظهر الأزرار والبطاقات والنماذج والحالات في الوضعين الفاتح والداكن.
نقاط الارتكاز الثابتة والطبقات الدلالية
تظل ألوان المصدر نقاط ارتكاز ثابتة عند الدرجة المحددة. تحتوي المقاييس الأولية على درجات من 50 إلى 950 لكل عائلة لونية. تشير الأدوار الدلالية (الخلفية، السطح، النص، الأساسي، النص المضاد، الحدود، التركيز) إلى المقاييس الأولية بشكل منفصل للنمطين الفاتح والداكن لفصل المعنى البرمجي عن عينات الألوان الخام.
- يتم رفض مدخلات var() غير المحلولة وصيغ الألوان النسبية وcolor-mix() مع إظهار أخطاء واضحة قابلة للتنفيذ.
- مقياسا Primary وNeutral إلزاميان؛ المقاييس الثانوية والتمييزية اختيارية؛ ومقاييس النجاح والتحذير والخطأ متوفرة دائماً.
- تتم جميع عمليات التحليل والتوليد بالكامل داخل المتصفح مع حفظ محلي تلقائي ودون الحاجة لأي حساب أو رفع سحابي.
أمثلة عملية
نظام اللون الأزرق الأساسي للعلامة
المدخل: المصدر: اللون #2563eb كنقطة ارتكاز Primary @ 500
المخرج: مقياس Primary 50–950 كامل مع الأدوار الدلالية (primary, on-primary, focus) جاهز للفحص
إنشاء وثيقة تسليم متكاملة من لون علامة واحد دون الحاجة لصفحات تحويل مجزأة ومكررة.
القيود
- لا يتم تخمين قيم لمتغيرات CSS غير المعرفة أو color-mix()؛ يرجى إدخال قيم محددة وفق مواصفة Color 4.
- نصائح تناغم المقاييس الجمالية هي إرشادات استدلالية وليست شهادة مطابقة قانونية.
الأسئلة الشائعة
هل يمكنني المتابعة إلى الفاحص دون تصدير أولاً؟
نعم. تحافظ مساحة العمل المشتركة على وثيقة نظام ألوان واحدة في الذاكرة، مما يتيح التبديل بين المراحل دون إعادة تحميل أو فقدان البيانات.
هل يتم رفع ألوان علامتي التجارية إلى خوادم خارجية؟
مطلقاً. تبقى جميع الألوان والمقاييس وملفات المشروع في ذاكرة المتصفح والتخزين المحلي، ولا يُرسل أي شيء لخوادم خارجية.
كيف يعمل التنقل بلوحة المفاتيح عبر المراحل؟
استخدم أزرار المراحل للتنقل بين المنشئ والفاحص ومولّد الرموز؛ يظل مؤشر التركيز واضحاً ولا يتغير رابط الصفحة الثابت عند التنقل.
المراجع والمعايير المعتمدة
- W3C CSS Color Module Level 4 ↗ — Authoritative syntax for HEX, rgb(), hsl(), oklch(), and color(display-p3 …).
- W3C Web Content Accessibility Guidelines (WCAG) 2.2 ↗ — Accessibility baseline referenced when Builder previews contrast-sensitive semantic roles.