مولد اللوحة أحادية اللون
تُنشأ الألوان واللوحات داخل هذا المتصفح. في الوضع المتدرج، يبقى المشروع مدة تصل إلى 30 دقيقة في تخزين جلسة علامة التبويب هذه؛ ولا تنتقل أي قيمة لون إلى الخادم أو عنوان URL.
أنشئ تدرجًا أحادي اللون
أدخل لونًا واحدًا، ثم اختر التحويل وفضاء المزج وعدد الدرجات.
الصيغ المقبولة: #RGB و#RRGGBB وrgb(0–255) وhsl() بالنسب المئوية. قنوات الشفافية غير مقبولة.
يُستخدم في تصدير متغيرات CSS وTailwind وSCSS ورموز التصميم.
اختر لونا أساسيا ويبني المولد لوحة أحادية اللون حوله: درجات فاتحة (تمزج تدريجيا مع الأبيض لتدرج أفتح)، ودرجات داكنة (تمزج تدريجيا مع الأسود لتدرج أغمق)، ونغمات (تمزج مع الرمادي لتقليل التشبع). مفيد لأنظمة التصميم التي تحتاج إلى تدرج متماسك من لون علامة واحد، مثل مقياس Tailwind من 50 إلى 950 لكن قابل للضبط، أو لاختيار حالات التمرير والتنشيط دون مغادرة اللوحة.
كيف تُولّد اللوحة
-
1
أدخل لونا أساسيا
استخدم #RGB أو #RRGGBB أو قنوات rgb() الصحيحة أو نسب hsl().
-
2
اختر نوع اللوحة
اختر تدرجا كاملا فاتحا وداكنا، أو درجات نحو الأبيض، أو ظلالا نحو الأسود، أو نغمات نحو الحياد.
-
3
اختر عدد الخطوات
5 أو 9 أو 11 خطوة. تستخدم 9 خطوات التسميات الشائعة من 100 إلى 900 بأسلوب Material، وتضيف 11 خطوة القيمتين 50 و950 لمقياس بأسلوب Tailwind.
-
4
انسخ أو صدّر
انسخ HEX أو RGB أو HSL أو OkLCH، أو صدّر CSS وTailwind وSCSS وJSON ببنية Design Tokens Community Group.
الدرجات الفاتحة مقابل الداكنة مقابل النغمات
- الدرجة الفاتحة (Tint) = اللون الأساسي + أبيض. أفتح وأكثر باستيلية.
mix(base, #fff, p%)حيث p نسبة الأبيض. - الدرجة الداكنة (Shade) = اللون الأساسي + أسود. أغمق وأكثر قتامة.
mix(base, #000, p%). - النغمة (Tone) = اللون الأساسي + رمادي. الإضاءة نفسها، تشبع أقل، أكثر كتمانا.
تنتج التحويلات الثلاثة طابعا بصريا مختلفا: الدرجات الفاتحة تبدو منتعشة ومتفائلة، والدرجات الداكنة تبدو راسخة وجادة، والنغمات تبدو هادئة وراقية.
تدرج من 9 خطوات من أساس واحد
| الخطوة | الوصف | الاستخدام النموذجي |
|---|---|---|
| 100 | فاتح جدا | الأسطح، خلفيات الرقائق |
| 200 | فاتح | الحالات المعطلة |
| 300 | فاتح متوسط | الحدود، الفواصل |
| 400 | باهت قليلا | النص الثانوي (خلفية فاتحة) |
| 500 | اللون الأساسي | العلامة الافتراضية، خط أساسك |
| 600 | داكن متوسط | حالات التمرير على الإجراءات الأساسية |
| 700 | داكن | حالات التنشيط، الترويسات |
| 800 | داكن جدا | نص قوي على خلفية فاتحة |
| 900 | أغمق درجة | نص بأقصى تباين |
التسميات الرقمية مستوحاة من أعراف الرموز الشائعة؛ أما الألوان الناتجة فليست قيما رسمية من Material أو Tailwind.
لماذا تنجح أحادية اللون مع الواجهات
- الألفة. كل عنصر يبدو مرتبطا بوضوح لا لبس فيه.
- الاتساق. تكرار درجة لون واحدة يجعل العلاقات سهلة التمييز، لكنه لا يجعل الواجهة ملائمة لاختلافات رؤية الألوان تلقائيا.
- البساطة. قرار واحد، اللون الأساسي، يقود اللوحة كلها.
الإقران مع المحايدات
تحتاج اللوحة أحادية اللون إلى رماديات أيضا. النمط الشائع:
- تدرج أساسي من لون علامتك (9 خطوات).
- تدرج محايد من نسخة منزوعة التشبع من الأساسي (9 خطوات).
- ربما لون تمييز واحد (خطوة واحدة منتقاة بعناية للتنبيهات والدعوات للإجراء).
استخدم هذا كبنية بداية لا كقاعدة ثابتة. يعتمد عدد اللوحات على حالات المنتج وعرض البيانات والألوان الدلالية ومتطلبات إمكانية الوصول.
نقاط فحص التباين
للنص على خلفية، تتطلب WCAG نسبة 4.5:1 للنص العادي و3:1 للنص الكبير. لا تعني التسميات 100 أو 500 أو 900 نسبة تباين محددة؛ فالنتيجة تعتمد على اللون الأساسي ونوع اللوحة وفضاء المزج.
افحص دائما التركيبات المحددة التي تنوي استخدامها بأداة فحص التباين.
التصدير إلى نظام التصميم لديك
صيغ الإخراج:
- خصائص CSS مخصصة:
--primary-50: #f0f9ff; --primary-100: ... - إعداد Tailwind: كائن JS جاهز للصق في
tailwind.config.js → theme.extend.colors. - خريطة SCSS لمشاريع Sass.
- رموز التصميم JSON ببنية
$typeو$valueالتابعة لـ Design Tokens Community Group.
الأسئلة الشائعة
تتجه الدرجات الفاتحة عمدا نحو الأبيض، لذلك قد يتحول اللون الأساسي المشبع إلى لون باستيلي بسرعة. قارن HSL وOkLCH، أو استخدم خطوات أقل، أو اختر لونا أساسيا أقل تشبعا.
يمكنك اختيار HSL أو OkLCH. يغير HSL محوري الإضاءة والتشبع؛ ويغير OkLCH الإضاءة الإدراكية والتلون، ثم يقلل التلون عند الحاجة لإبقاء النتيجة ضمن sRGB.
في التدرج الكامل، يكون اللون الأساسي هو الرمز 500 الأوسط. ينتهي تدرج الفاتح عند الأساس، ويبدأ تدرج الداكن منه، وينتهي تدرج النغمات عنده. لا تضمن التسميات إضاءة محددة.
لا يوجد تكامل مباشر مع Figma. انسخ القيم منفردة أو استخدم نص CSS أو Tailwind أو SCSS أو JSON ببنية Design Tokens Community Group كنقطة بدء لسير عملك.
أدوات ذات صلة
مولد الباركود
أنشئ باركودات Code 128 وEAN-13 وUPC وITF-14 وسبع صيغ خطية أخرى. تبقى البيانات في المتصفح، ويمكن تنزيل SVG أو PNG.
مولّد رموز QR
أنشئ رمز QR محليًا في المتصفح من رابط أو نص عادي أو حمولة QR منسقة، ثم نزّله بصيغة PNG.
مولد الميمز
أضف تعليقًا علويًا وآخر سفليًا إلى صورة JPG أو PNG أو WebP. اضبط الخط والألوان والحد، ثم نزّل الميم كصورة PNG ثابتة.
BMP إلى PNG
حوّل ملفات BMP إلى PNG داخل المتصفح. بلا فقد، يحافظ على عمق اللون ويضيف شفافية اختيارية من قناة alpha الأصلية في BMP.
مغيّر حجم الصور
غيّر حجم الصور إلى أبعاد دقيقة بالبكسل أو إلى نسب مئوية مع الحفاظ على نسبة العرض إلى الارتفاع. مناسب للدفعات، ومن دون رفع الملفات.
قارئ رموز QR
فك ترميز رمز QR من صورة PNG أو JPG أو WebP داخل المتصفح. اعرض روابط URL وبيانات Wi-Fi وvCard وSMS والبريد والتقويم والموقع والنص قبل استخدامها.