منشئ لوحة الألوان
اختر لونًا أساسيًا واحصل فورًا على لوحة ألوان متدرجة من الفاتح إلى الغامق، جاهزة للنسخ إلى نظام التصميم الخاص بك.
🔒 تتم المعالجة محليًا في متصفحك
Loading…
كيفية الاستخدام
- اكتب رمز لون HEX في حقل "اللون الأساسي"، أو انقر على منتقي عينة اللون لاختيار لون بصريًا.
- بمجرد التعرف على لون صالح، تظهر لوحة ألوان كاملة من التدرجات أسفله تلقائيًا — لا حاجة للضغط على أي زر.
- تتراوح اللوحة من درجة فاتحة جدًا إلى درجة داكنة جدًا، وكلها تشترك في نفس درجة اللون الأساسي.
- انقر على أي عينة لنسخ رمز HEX الخاص بها إلى الحافظة — يظهر تأكيد قصير "تم النسخ!" يعلمك أن العملية نجحت.
المميزات
- ينشئ تدرجًا سلسًا من 9 درجات من الفاتح إلى الغامق انطلاقًا من أي لون أساسي
- يحافظ على نفس درجة اللون (Hue) والتشبع (Saturation) عبر جميع الدرجات، تمامًا مثل تدرجات الألوان في Tailwind
- يتضمن لونك الأساسي بدقة في اللوحة، وليس مجرد تقريب له
- نسخ بنقرة واحدة لرمز HEX لأي عينة
- يعمل بالكامل من جهة المتصفح — ألوانك لا تغادر متصفحك أبدًا
الأسئلة الشائعة
هل يرسل هذا الأداة لوني إلى أي مكان؟
لا. يتم إنشاء اللوحة بالكامل باستخدام عمليات حسابية بسيطة بلغة JavaScript مباشرة في متصفحك — لا يُرفع شيء أو يُرسل إلى أي خادم أبدًا.
كيف يتم حساب الدرجات؟
تحوّل الأداة لونك الأساسي إلى صيغة HSL، ثم تُبقي درجة اللون والتشبع ثابتين بينما تُدرّج الإضاءة (Lightness) بشكل متساوٍ من فاتح جدًا إلى داكن جدًا. يُوضع لونك الأساسي بدقة في منتصف التدرج.
هل يمكنني استخدام هذه اللوحات في Tailwind أو أنظمة تصميم أخرى؟
نعم. تتبع اللوحة نفس فكرة تدرجات الألوان 50/100/.../900 في Tailwind — تدرج من الفاتح إلى الداكن للون واحد — لذا يمكنك نسخ رموز HEX مباشرة إلى قالبك أو متغيرات CSS الخاصة بك.
ما صيغ الألوان التي يمكنني إدخالها؟
رموز HEX فقط، مع أو بدون علامة # في البداية، إما بصيغة مختصرة من 3 أرقام (مثل #abc) أو 6 أرقام (مثل #3b82f6). استخدم منتقي اللون إذا كنت تفضل الاختيار بصريًا.
لماذا أرى رسالة خطأ؟
النص الذي كتبته لا يطابق صيغة لون HEX معروفة. تأكد من أنه يشبه #3b82f6 (أو 3b82f6، أو الصيغة المختصرة #abc).