الرئيسية
أدوات الألوان
لون إلى متغيرات سي إس إس

مولد متغيرات لون سي إس إس تحويل مجموعة من الألوان إلى خصائص مخصصة في CSS (متغيرات).

🎨

لون إلى متغيرات سي إس إس

تحويل مجموعة من الألوان إلى خصائص مخصصة في CSS (متغيرات).

أضف الألوان

أضف الألوان باستخدام أسماء متغيرات مخصصة باستخدام أدوات اختيار الألوان.

اختر التنسيق

حدد تنسيق الإخراج: HEX، RGB، أو HSL.

انسخ CSS

انسخ كتلة خصائص CSS المخصصة المحولة :root.

Loading tool...

What Is لون إلى متغيرات سي إس إس?

مُحَوِّل الألوان إلى متغيرات CSS هو أداة تُحوّل مجموعة من الألوان المسمّاة إلى خصائص مخصصة في CSS (متغيرات :root) جاهزة لل貼 في أوراق الأنماط الخاصة بك. يمكنك إضافة أي عدد من الألوان، وتوفير اسم متغير دلالي لكل منها (مثل "الأساسي" أو "الثانوي" أو "الأكцент")، واختيار تنسيق الإخراج: HEX للبساطة، أو RGB مفصول بالفاصلة لمرنة rgba()، أو HSL مفصول بالفاصلة لتغيير اللون بسهولة في وقت التشغيل. تعتبر الخصائص المخصصة في CSS أساسًا لأنظمة التهيئة الحديثة، مما يُمكِّن من وضع الوضع الداكن وتهيئة العلامة التجارية وتحديث الألوان ديناميكيًّا. تُولِّد هذه الأداة كتلة :root { --variable: value; } الأساسية بحيث يمكنك ضبط نظام ألوان سريعًا. يعرض المعاينة المباشرة جميع الألوان معًا كشريط لوحة.

Why Use لون إلى متغيرات سي إس إس?

أضف ألوانًا لا حصر لها بأسماء متغيرات مخصصة
ثلاث تنسيقات إخراج: HEX، RGB، أو HSL
توليد كتلة CSS نظيفة :root { }
معاينة شريط لوحة الألوان في الوقت الفعلي
أساس لأنظمة التهيئة في CSS

Common Use Cases

تهيئة CSS

ضبط خصائص مخصصة في CSS لتهيئة الوضع الخفيف/الغامق.

رموز التصميم

تحويل رموز نظام التصميم إلى متغيرات CSS.

ألوان العلامة التجارية

إنشاء مجموعة من المتغيرات القابلة لإعادة الاستخدام في CSS لألوان العلامة التجارية.

مكتبات المكونات

تحديد متغيرات الألوان القابلة للتخصيص لمكتبات مكونات CSS.

Technical Guide

تُعرَّف الخصائص المخصصة في CSS (var(--name)) في محدد :root للنطاق العالمي. يخزن تنسيق HEX القيمة الكاملة للألوان: --primary: #3B82F6. يخزن تنسيق RGB المفصول بالفاصلة القنوات: --primary: 59, 130, 246، والتي يمكن استخدامها كـ rgb(var(--primary)) أو rgba(var(--primary), 0.5) لمرونة في الشفافية. يخزن تنسيق HSL: --primary: 217, 91%, 60%، والذي يمكن استخدامه كـ hsl(var(--primary)). يكون تنسيق RGB وHSL أكثر مرونة لأنها تسمح بإضافة الشفافية عند استخدام المتغير دون إعادة تعريفها. تُورَّث الخصائص المخصصة في CSS من قبل جميع العناصر الفرعية ويمكن تجاوزها في استفسارات الإعلام أو محددات الفئة لتبديل السمة. وهي مدعومة في جميع المتصفحات الحديثة وتتدفق مثل خصائص CSS العادية.

Tips & Best Practices

1
استخدم أسماء دلالية مثل --primary، --secondary بدلاً من --blue، --red للمرونة
2
تنسيق RGB هو الأكثر مرونة: rgba(var(--primary), 0.5) يعطيك التحكم في الشفافية
3
تنسيق HSL يسمح لك بالاستفادة من الاختلافات: hsl(var(--primary-h), var(--primary-s), 90%)
4
تجاوز المتغيرات في استفسارات الإعلام للوضع الغامق: @media (prefers-color-scheme: dark) { :root { ... } }
5
احتفظ بعدد المتغيرات قابلة للإدارة - تحتاج معظم الأنظمة إلى 5-10 متغيرات ألوان

Related Tools

مُحَوِّل HEX إلى RGB

قم بتحويل رموز الألوان HEX إلى قيم RGB في الحال مع معاينة مباشرة للعينة.

🎨 Color Tools

مُحَوِّل HEX إلى HSL

قم بتحويل رموز الألوان HEX إلى قيم HSL (درجة اللون، التشبع، الإضاءة).

🎨 Color Tools

محدد اللون

محدد لون تفاعلي مع مخرجات HEX و RGB و HSL و CMYK.

🎨 Color Tools

مجدّف ألوان Tailwind

ابحث عن فئة لون CSS Tailwind الأقرب لأي رمز HEX.

🎨 Color Tools

مُحول تأثيرات الفلتر في CSS

تطبيق تأثيرات فلتر CSS مثل التعتيم، سطوع، تباين، وغيرها مع عناصر تحكم بصرية.

🎨 CSS & Design

Frequently Asked Questions

Q أي تنسيق يجب أن أختاره?

HEX للبساطة والقراءة. RGB إذا كنت بحاجة إلى التحكم في الشفافية عبر rgba(var(...), alpha). HSL إذا كنت تريد استخلاص متغيرات الألوان عن طريق تعديل المكونات الفردية.

Q هل يتم دعم خصائص CSS المخصصة في كل مكان?

نعم، في جميع المستعرضات الحديثة منذ عام 2016 (Chrome 49+، Firefox 31+، Safari 9.1+، Edge 15+). غير مدعوم في IE11.

Q هل يمكنني استخدام المتغيرات للوضع الغامق?

بالتأكيد. حدد قيم الوضع الخفيف في :root، ثم تجاوزها في @media (prefers-color-scheme: dark) { :root { ... } } أو على فئة .dark.

About This Tool

لون إلى متغيرات سي إس إس is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.