مولد لوحة الألوان

أنشئ درجات داكنة وفاتحة وألوانًا متناغمة من لون HEX أساسي واحد، مع قيمة HEX قابلة للنسخ لكل لون.

جارٍ تحميل الأداة…

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

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

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

كيفية استخدام مولد لوحة الألوان

  1. اكتب لونًا أساسيًا في حقل اللون الأساسي (HEX) بصيغة #rrggbb أو #rgb، أو انقر على مربع منتقي الألوان الكبير لاختياره بصريًا.
  2. اضبط عدد الدرجات لكل جانب على 2 أو 3 أو 4 للتحكم في عدد الدرجات الأفتح والأغمق التي تُنشأ على كل جانب من اللون الأساسي.
  3. اطّلع على قسم الدرجات الفاتحة والداكنة: تظهر الدرجات الأفتح فوق اللون الأساسي والدرجات الأغمق تحته، ولكل منها تسمية (Lighter N / Base / Darker N) ويُعرض مع قيمة HEX الخاصة به.
  4. اطّلع على قسم الألوان المتناغمة لمعرفة اللون المكمّل، والمتشابه (+30deg / -30deg)، والثلاثي (+120deg / -120deg).
  5. انقر على زر النسخ بجوار أي مربع لون (أو بجوار الحقل الأساسي) لنسخ قيمة HEX تلك إلى الحافظة.

أمثلة

اللون المكمّل للأحمر الصافي

المدخل

#ff0000

المخرج

#00ffff

اللون الثلاثي للأحمر الصافي

المدخل

#ff0000

المخرج

#00ff00

بناء سلّم درجات للعلامة التجارية

أدخل اللون الأزرق لعلامتك التجارية (مثل #4f86f7) واضبط عدد الدرجات لكل جانب على 4 للحصول على أربع درجات أفتح فوق اللون الأساسي وأربع درجات أغمق تحته، مما يمنحك سلّمًا من 9 خطوات يمكنك نسخه لونًا تلو الآخر إلى رموز التصميم لديك.

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

ما صيغ الألوان التي يمكنني إدخالها؟
يُدخَل اللون الأساسي كقيمة HEX بصيغة #rrggbb (ست خانات) أو بالصيغة المختصرة #rgb (ثلاث خانات). إذا لم تكن القيمة لون HEX صالحًا، تظهر رسالة 'Invalid HEX color' ولا تُنشأ أي لوحة ألوان. وتُعرض جميع مربعات الألوان الناتجة بصيغة HEX على هيئة #rrggbb.
كم عدد الدرجات الفاتحة والداكنة التي ينشئها؟
تختار 2 أو 3 أو 4 درجات لكل جانب. تُنتج الأداة هذا العدد من الدرجات الأفتح (مُستوفاة باتجاه الأبيض) والعدد نفسه من الدرجات الأغمق (مُستوفاة باتجاه الأسود)، إضافة إلى اللون الأساسي في المنتصف.
ما الألوان المتناغمة المضمّنة؟
تُخرج اللون المكمّل (تدوير درجة اللون 180deg)، ولونين متشابهين (+30deg و-30deg)، ولونين ثلاثيين (+120deg و-120deg)، وكلها محسوبة بتدوير درجة لون اللون الأساسي في نظام HSL.
هل يمكنني اختيار لون بصريًا بدلًا من كتابة HEX؟
نعم. انقر على المربع الكبير المزوّد بمنتقي الألوان المدمج لاختيار لون؛ يُحدَّث حقل HEX تلقائيًا، وتُعاد حسبة اللوحة فورًا أثناء تغييرك له.
هل تُرفع بيانات ألواني إلى أي مكان؟
لا. يعمل كل شيء بالكامل داخل متصفحك باستخدام حسابات الألوان المحلية — ولا تُرسَل أي قيمة لون إلى أي خادم أبدًا، لذا تعمل الأداة دون اتصال وتحافظ على خصوصية لوحتك.

أدوات ذات صلة

ترميز / فك ترميز Base32 / Base58

رمّز النص إلى Base32 (RFC 4648) أو Base58 (أبجدية البيتكوين) وافكك ترميز أي منهما مرة أخرى إلى نص، مع دعم كامل وآمن لـ UTF-8 وبالكامل داخل متصفحك.

ترميز / فك ترميز Base64

رمّز النص إلى Base64 أو فُكّ ترميز Base64 إلى نص (آمن مع UTF-8).

محوّل حالة الأحرف وعدّاد النصوص

غيّر حالة أحرف النص واحسب عدد الأحرف والكلمات والأسطر.

أداة تنسيق وتصغير الكود

نسّق أو صغّر HTML وCSS وJavaScript فورًا داخل متصفحك، مع مسافة بادئة من مسافتين أو 4 مسافات أو علامة جدولة، وضغط JavaScript المدعوم بـ Terser.