مُنشئ لوحة الألوان — توليد لوحات ألوان متناسقة وتصدير متغيرات CSS
Developer Tools
جاري تحميل الأداة...
حول هذه الأداة
أنشئ لوحات ألوان متناسقة ومتوازنة فورياً في متصفحك وفق 6 نماذج هندسية معتمدة في نظرية الألوان: متجاور، متكامل، ثلاثي، متكامل منقسم، أحادي، أو عشوائي، مع تصدير كود متغيرات CSS.
كيفية الاستخدام
- اختيار نموذج تناسق الألوان: حدد طريقة التناسق المرغوبة من قائمة الطريقة (عشوائي، متجاور، متكامل، ثلاثي، متكامل منقسم، أو أحادي اللون).
- تحديد اللون الأساسي (المرجعي): انقر على منتقي الألوان لتحديد كود لون علامتك التجارية، أو اختر أي درجة لونية على عجلة الألوان بزاوية 360 درجة.
- تحديد عدد الألوان المطلوبة: اختر عدد درجات اللوحة المراد توليدها (3، 5، 7، أو 9 ألوان متناسقة).
- توليد لوحة الألوان: اضغط على زر 🎨 توليد لحساب التدرجات والزوايا الرياضية فورياً وعرض شريط اللوحة التفاعلي.
- نسخ الأكواد وتصدير CSS: انقر على أي شريط لوني لنسخ كود Hex الخاص به، أو استخدم زر نسخ الكل أو تصدير CSS للحصول على متغيرات
:rootجاهزة لملفات الأنماط.
الأسئلة الشائعة
ما هو الفرق بين لوحة الألوان المتكاملة (Complementary) والمتكاملة المنقسمة (Split-Complementary)؟
اللوحة المتكاملة تزاوج بين لونين متقابلين بزاوية 180° على عجلة الألوان لأقصى تباين، بينما المتكاملة المنقسمة تزاوج اللون الأساسي مع الدرجتين المحيطتين بمكمله (150° و 210°) لتباين غني وأقل حدة.
ما هي قاعدة 60-30-10 في تصميم واجهات المستخدم؟
قاعدة توزيع بصري ذهبية: 60% للون المحايد المهيمن على الخلفيات، 30% للون الهيكلي الثانوي في القوائم والبطاقات، و 10% للون التمييز التفاعلي المخصص لأزرار اتخاذ القرار الرئيسية.
كيف أستخدم كود متغيرات CSS المصدر في مشروعي؟
انسخ كود :root عبر زر تصدير CSS والصقه في ملف الأنماط لديك، ثم استخدم المتغيرات في عناصرك عبر دالة var() القياسية مثل background-color: var(--color-1);.
ما هي مميزات لوحة الألوان المتجاورة (Analogous)؟
تتألف من درجات تقع بجوار بعضها على عجلة الألوان بفارق 30°، مما يوفر تصميماً مريحاً للنظر وموحداً ومتناغماً يحاكي التدرجات الطبيعية.
هل يمكنني إنشاء لوحة ألوان انطلاقاً من كود لون شعار علامتي التجارية؟
نعم، استخدم منتقي اللون الأساسي لاختيار كود علامتك التجارية، وستقوم الخوارزميات تلقائياً بحساب التناسق الهندسي حول هذا اللون المرجعي.
لماذا تعتمد الأداة على نموذج HSL بدلاً من RGB في حساباتها؟
لأن HSL يمثل الألوان كعجلة أسطوانية تماثل إدراك العين البشرية (صبغة 0-360°، تشبع 0-100%، إضاءة 0-100%) مما يتيح تدوير الزوايا وتوزيع السطوع بدقة رياضية فائقة.
هل بيانات لوحاتي وألوان مشاريعي آمنة وسرية؟
نعم، سرية وآمنة 100%. تتم كافة العمليات الحسابية وتوليد الأكواد محلياً في ذاكرة متصفحك دون إرسال أي بايت إلى خوادم خارجية.
أدلة ودروس
أدلة شاملة لكل أداة. تعلم كيف تعالج بياناتك بخصوصية تامة، مجاناً، مباشرة في متصفحك.
اقرأ المزيد