Aller au contenu principal

    نحن نستخدم ملفات تعريف الارتباط

    نستخدم ملفات تعريف الارتباط لتحسين تجربتك. بمواصلة التصفح، فإنك توافق على استخدامها.

    اعرف المزيد في ملفات تعريف الارتباط و الخصوصية

    متغيرات CSS

    صدّر الألوان كخصائص CSS مخصصة. استخدم متغيرات CSS مجاناً عبر الإنترنت دون تسجيل، مع نتائج سريعة ومعالجة آمنة داخل المتصفح.

    --primary
    --secondary
    --accent
    --background
    --foreground
    :root {
  --primary: #6366f1;
  --secondary: #ec4899;
  --accent: #f59e0b;
  --background: #ffffff;
  --foreground: #1f2937;
}

    يساعدك متغيرات CSS على العمل بالألوان مباشرة داخل المتصفح.

    صُممت الأداة للمصممين والمطورين وصناع المحتوى الذين يحتاجون إلى نتائج سريعة وموثوقة.

    Supported formats

    CSS
    HEX
    RGB
    HSL

    How it works

    1

    Step 1

    افتح متغيرات CSS

    2

    Step 2

    أدخل الألوان أو استوردها

    3

    Step 3

    انسخ النتيجة أو صدّرها أو أعد استخدامها

    أخطاء شائعة يجب تجنبها

    • نسيان فحص التباين قد يضعف قابلية القراءة.
    • استخدام ألوان كثيرة قد يجعل اللوحة صعبة التطبيق.

    نصائح للمحترفين

    • احفظ الألوان الأساسية كمتغيرات CSS.
    • اختبر اللوحة في الوضعين الفاتح والداكن قبل النشر.

    Privacy guaranteed: everything is processed locally in your browser.

    تتم المعالجة محلياً داخل المتصفح كلما أمكن. لا حاجة إلى حساب.

    متغيرات CSS لمشاريع الألوان

    صدّر الألوان كخصائص CSS مخصصة.

    متغيرات CSS دون فقدان الدقة

    تجري التحويلات بقيم دقيقة (HEX، RGB، HSL، OKLCH). بدون تقريب بصري — تحصل على اللون المطابق لقصد التصميم.

    متغيرات CSS مجاناً عبر الإنترنت

    لا حاجة للتسجيل أو تحميل برامج. متغيرات CSS مجاني 100% ويعمل في أي متصفح. تشمل الخطة المجانية 10 استخدامات يوميًا.

    متغيرات CSS بسرعة وأمان

    تتم المعالجة مباشرة داخل المتصفح لأقصى سرعة. لا تُرسل البيانات إلى خوادمنا، فألوانك وملفاتك تبقى خاصة على جهازك.

    متغيرات CSS للمشاركة والتعاون

    صدّر النتائج بصيغة HEX، RGB، HSL، CSS، JSON أو انسخها بنقرة واحدة. مثالي لمشاركة دليل الألوان مع فريقك أو توثيق نظام التصميم.

    اكتشف جميع أدوات الألوان

    استخرج، حوّل، أنشئ لوحات ألوان وتدرجات وتباينات WCAG بنقرات قليلة.

    عرض كل الأدوات

    Related tools

    متغيرات SCSS
    لوحة Tailwind
    ثيم shadcn/ui
    تصدير اللوحة

    أدلة ودروس

    تعلم كيفية استخدام أدواتنا من خلال أدلتنا المفصلة.

    css-variables: دليل عملي حول developer

    دليل مترجم لاستخدام css-variables وفهم أفضل ممارسات developer وتجنب الأخطاء الشائعة.

    css-variables: دليل عملي حول developer

    دليل مترجم لاستخدام css-variables وفهم أفضل ممارسات developer وتجنب الأخطاء الشائعة.

    css-variables: دليل عملي حول developer

    دليل مترجم لاستخدام css-variables وفهم أفضل ممارسات developer وتجنب الأخطاء الشائعة.

    Frequently asked questions

    نعم، الأداة متاحة مجاناً عبر الإنترنت.

    تتم المعالجة داخل المتصفح كلما أمكن لحماية بياناتك.