الإجابة المباشرة
يقوم مولّد رموز الألوان بتسلسل نظام الألوان المعتمد إلى خصائص CSS مخصصة، وكتل Tailwind CSS v4 @theme، وJSON DTCG ليطابق التنفيذ البرمجي المعاينة المرئية بدقة.
كيفية استخدام هذه الأداة
الوصول لمرحلة الرموز
افتح صفحة مولّد الرموز أو تابع من مرحلة الفاحص مع الاحتفاظ بوثيقة نظام الألوان الحالية.
اختيار صيغة التصدير
اختر خصائص CSS المخصصة أو Tailwind v4 @theme أو JSON DTCG؛ يعكس كل تصدير المقاييس والأسماء الدلالية المراجعة.
النسخ أو التنزيل
انسخ النص إلى الحافظة أو نزّل الملف مباشرة. تتضمن المخرجات بدائل sRGB محددة للألوان ذات النطاق الواسع.
تصدير مطابق وتوافق عبر المنصات
تمثل الرموز المصدرة النظام المعتمد بدقة: المقاييس الأولية، والأسماء الدلالية، وأوضاع العرض. تحتفظ الألوان الحديثة الواسعة ببدائل sRGB إدراكية حتمية تمنع التشوه عند العرض على الأجهزة القديمة.
- تظل مخرجات CSS وTailwind وDTCG متوافقة ومتطابقة تماماً مع نفس مراجعة الوثيقة.
- لا حاجة لأي خادم لتخزين الرموز أو تسجيل حساب مستخدم.
- تتراجع عمليات النسخ والتنزيل بسلاسة وأمان في حال غياب بعض ميزات المتصفح المتقدمة.
أمثلة عملية
تصدير المقياس الأساسي إلى قالب Tailwind @theme
المدخل: المقياس الأساسي المعتمد 50–950 مع الدورين primary وon-primary
المخرج: @theme { --color-primary-500: oklch(...); --color-primary: var(--color-primary-500); }
إنتاج متغيرات جاهزة لأطر العمل دون أخطاء النقل اليدوي.
القيود
- لا يتم إرسال الرموز تلقائياً إلى أدوات التصميم السحابية؛ يمكنك النسخ أو التنزيل محلياً.
- يجب على المستخدمين مطابقة أسماء DTCG في بيئة عملهم إذا كان المورّد يعتمد لهجة مخصصة.
الأسئلة الشائعة
هل تطابق المخرجات القيم المراجعة في الفاحص؟
نعم. يتم إنشاء الملفات من نفس وثيقة نظام الألوان المعروضة في المعاينة، مما يضمن خلو مرحلة التسليم من أي انحراف.
هل يتم رفع الرموز إلى أي مكان؟
لا. تجري عمليات التسلسل والكتابة في الحافظة والتنزيل محلياً على جهازك، وتبقى روابط المشاركة داخل جزء الـ hash فقط.
هل يمكنني العودة للمنشئ دون فقدان الرموز المصدرة؟
نعم. يحافظ التبديل بين المراحل على الوثيقة، ويعتمد إعادة توليد الملفات بعد التعديل على أحدث نسخة.
المراجع والمعايير المعتمدة
- W3C CSS Color Module Level 4 ↗ — Modern color functions serialized into CSS custom properties with sRGB fallbacks.
- W3C Relative Luminance Definition & Formula ↗ — Luminance guidance for documenting accessible token pairs in exported artifacts.