ما هو لوحة الألوان الأحادية؟

اختر لوناً أساسياً وولّد منه ظلالاً داكنة وتدرجات فاتحة. حدد عدد الخطوات، ثم صدّر كمتغيرات CSS أو إعداد Tailwind أو انسخ قيم hex/RGB فردية.

اختر أي رمز HEX أو استخدم منتقي الألوان، وحدد عدد الدرجات الفاتحة والدرجات الرمادية والدرجات الداكنة، فتقوم الصفحة باستيفاء كل مقياس في فضاء LAB لتبدو الخطوات متساوية. تعرض كل عينة قيم HEX و RGB و HSL مع نسخها بنقرة واحدة، و«نسخ الكل» يلتقط المقياس كاملًا دفعة واحدة. يمكنك تصفية العرض لرؤية الفاتحة أو الرمادية أو الداكنة فقط، أو تصدير المقياس كله كمتغيرات CSS أو مقتطف Tailwind أو متغيّرات SCSS أو رموز تصميم JSON أو ورقة عينات PNG.

كيفية الاستخدام

1. اختر لونًا أساسيًا من منتقي الألوان، أو اكتب رمز hex، أو استخرج اللون السائد مباشرة من شعار أو صورة عبر «من صورة».
2. اضبط عدد الدرجات الفاتحة والدرجات الرمادية والدرجات الداكنة التي تريدها، ثم استخدم مرشح «عرض» إذا أردت رؤية صف واحد فقط.
3. انسخ قيم الألوان الفردية، أو اضغط «نسخ الكل» للحصول على جميع رموز HEX دفعة واحدة، أو صدّر اللوحة بأكملها كخصائص CSS مخصصة أو كائن إعداد Tailwind أو متغيّرات SCSS أو رموز تصميم JSON أو عيّنة صورة.

متى تستخدم

• بناء نظام تصميم واجهات يحتاج إلى تسع درجات ثابتة من لون العلامة لمكوّنات مختلفة.
• تصميم رسم بياني لبيانات تتطلّب أن تنتمي كل السلاسل إلى نفس درجة اللون (خرائط حرارية، أعمدة متتابعة).
• اختيار توافق النص والخلفية: درجة -100 خلفيةً و -900 نصاً تعطي تباينًا آمناً غالباً.

النتيجة

تبني لوحة تحكم وتحتاج إلى لوحة زرقاء لتصوير البيانات. تختار #3B82F6 كلون أساسي، وتُنشئ 9 خطوات من شبه الأبيض (#EBF2FE) إلى شبه الأسود (#1A2744). تُصدّر كمتغيرات CSS وتستخدم --color-blue-100 حتى --color-blue-900 عبر مخططاتك.

الأسئلة الشائعة

ما هي اللوحة أحادية اللون بدقّة؟

مجموعة ألوان تشترك في درجة لون واحدة وتختلف في التشبّع والإضاءة. تظهر النتيجة كعائلة لون واحدة، درجات وألوان مشبّعة من اللون نفسه، وتتفادى التضارب البصري الناتج عن خلط درجات غير منسجمة.

كم درجة يُستحسن توليدها؟

تسع درجات هي المعيار الشائع في واجهات المستخدم (Tailwind و Material و IBM Carbon تستعمل سلّماً من 50 إلى 900). للرسوم البيانية تكفي 5-7 درجات. تجاوز 11 يحوّلها إلى ما يشبه التدرّج ويصعب تمييز كل لون عن جاره.

أي صيغة تصدير أنسب؟

متغيّرات CSS تُلصق في أي ملف أنماط. مقتطف Tailwind يُضاف إلى theme.extend.colors ويتيح أدوات مثل bg-brand-500. صيغة SCSS تمنحك متغيّرات $brand-500 وخريطة Sass معًا. صيغة JSON تصدّر المقياس كرموز تصميم منظّمة تصلح لـ style dictionary. ورقة العيّنات PNG ملائمة للمشاركة في Figma أو دليل الهوية البصرية.

لماذا تبدو الدرجات الأفتح باهتة جداً؟

عند إضاءة عالية جداً، تُدرك العين الألوان المشبّعة كأنها بيضاء تقريباً. إن بدت درجة -100 مطابقة للأبيض، قلّل عدد الدرجات الفاتحة أو قرّب سقف الإضاءة من اللون الأساسي، فتصبح الدرجات المتجاورة قابلة للتمييز.

هل الألوان المولَّدة آمنة لمعايير الوصول؟

يمكنك التحقق من ذلك هنا مباشرة الآن. فعّل شارة تباين WCAG، وستُظهر كل عيّنة ما إذا كان النص الأسود أو الأبيض يحقق AA أو AAA عليها؛ وتعيد معاينة رؤية الألوان تلوين التدرّج كما يراه شخص مصاب بعمى الأخضر أو الأحمر أو الأزرق. كقاعدة سريعة: اجمع درجة ‎-100/-200‎ مع درجة ‎-700/-800‎ وغالبًا ستحقق مستوى WCAG AA.

أدوات ذات صلة