بدون رفع, 100% محلي، بدون حساب

مولّد نظام الألوان

اختر لونًا أساسيًا واحصل على لوحة كاملة, تكميلية، متشابهة، ثلاثية، رباعية أو أحادية اللون. انسخ أي عيّنة بتنسيق HEX أو RGB أو HSL. لا شيء يغادر متصفحك.

كيف تعمل مولّد نظام الألوان

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

تُظهر كل لوحة مُولَّدة عينات مع قيم HEX وRGB الخاصة بها جاهزةً للنسخ. هذا يمنح المصممين نقطة انطلاق مبنية على نظرية الألوان بدلًا من التخمين. لأن المولّد يعمل دون اتصال بعد التحميل الأولي للصفحة، يمكنك تجربة ألوان العلامة التجارية بحرية أثناء اجتماع مع عميل دون الحاجة إلى اتصال بالشبكة. أدخل لونك الأساسي بأي ترميز تملكه، HEX أو RGB أو HSL، وتُعاد كل عينة مُولَّدة بالترميزات الثلاثة كلها حتى تتمكن من نسخ ما تتوقعه أداة التصميم لديك.

كيفية استخدام مولّد نظام الألوان خطوة بخطوة

  1. اختر لونًا أساسيًا باستخدام منتقي الألوان أو بكتابة قيمة HEX.
  2. اختر نوع التناسق من التبويبات: تكميلي أو متماثل أو ثلاثي أو رباعي أو أحادي اللون.
  3. تظهر عينات اللوحة فورًا مع قيم HEX وRGB الخاصة بها.
  4. انقر على أي عينة لنسخ قيمة HEX الخاصة بها إلى الحافظة.
  5. اضبط اللون الأساسي لاستكشاف المتغيرات وراقب تحدث اللوحة بأكملها.

حالات الاستخدام الشائعة

  • مصمم يبدأ هوية علامة تجارية جديدة يختار لونه الأساسي ويُولّد لوحة ثلاثية لاقتراح تركيبات من ثلاثة ألوان لعميل.
  • مطور يبني ثيمًا للوضع الداكن يستخدم اللوحة أحادية اللون لتوليد نطاق من الفاتح إلى الداكن من لون علامة تجارية واحد.
  • منشئ محتوى يختار لوحة متماثلة لتحديد ألوان تمييز لعرض تقديمي تبدو متسقة دون تباين حاد.
  • مصمم واجهة مستخدم يستخدم اللوحة التكميلية لتحديد لون تمييز عالي التباين يبرز في مقابل لون العلامة التجارية الأساسي.

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

كيف تعمل اللوحة التكميلية؟

اللون التكميلي هو درجة اللون المقابلة مباشرةً للون الأساسي على دائرة ألوان HSL وتبعد عنه 180 درجة. وضع الألوان التكميلية جنبًا إلى جنب يُحدث أقصى تباين. تُظهر الأداة اللون الأساسي ومكمّله إضافةً إلى متغيرات أفتح وأغمق من كل منهما.

ما الفرق بين اللوحات الثلاثية والرباعية؟

تستخدم اللوحة الثلاثية ثلاث درجات لون متباعدة بالتساوي بمقدار 120 درجة على دائرة الألوان. تستخدم اللوحة الرباعية أربع درجات لون بمقدار 90 درجة تشكّل زوجين تكميليَّين. اللوحات الرباعية أكثر تعقيدًا وتتطلب موازنة دقيقة للنسب لتجنب الضجيج البصري.

هل تُخزَّن الألوان التي أختارها أو تُرسَل إلى أي مكان؟

لا. توليد اللوحات حساب رياضي على تمثيل HSL للون الأساسي: تدوير زاوية درجة اللون بمقادير ثابتة وتغيير الإضاءة والتشبع. كل حساب يعمل محليًا في المتصفح؛ لا شيء يُرسَل إلى أي خادم.

هل يمكنني تصدير اللوحة كملف CSS أو ملف رمز تصميم؟

تُظهر الأداة حاليًا عينات بقيم HEX وRGB قابلة للنسخ. لتصدير خصائص CSS المخصصة الكاملة أو JSON لرموز التصميم، انسخ القيم يدويًا إلى ملف الرموز أو CSS في مشروعك. قد يُضاف زر تصدير مخصص في تحديث مستقبلي.

هل يتبع هذا المولّد أي معيار رسمي لنظرية الألوان؟

تستخدم حسابات اللوحات صيغ تدوير درجة اللون القياسية في فضاء ألوان HSL وهو الاتفاقية الشائعة في معظم أدوات التصميم للويب. التماثل الإدراكي الدقيق لـ HSL له حدود مقارنةً بـ LAB أو OKLCH، لكن تدويرات HSL تُنتج لوحات تُطابق الاتفاقيات التي يتوقعها المصممون عادةً على دائرة الألوان.