لا تحب الإعلانات؟ يذهب خالية من الإعلانات اليوم 

إيجاد لوحة ألوان إنشاء لوحة كاملة من لون واحد (Hex):

نُشرت في 12 مايو 2026

تعلم كيفية إنشاء لوحة ألوان متكاملة، وذات معنى، وقابلة للعمل في وضع الظلال، من مجرد لون مكون من رمز العلامة التجارية باستخدام نظرية ألوان HSL ولغة JavaScript.

إيجاد لوحة ألوان: إنشاء لوحة كاملة من لون سادس (HEX) 1

إعلان · حذف؟

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

نظرية الألوان التي تهم حقًا

لا تُترجم معظم نظرية الألوان التي تُدرّس في مدرسة التصميم مباشرة إلى العمل على واجهة المستخدم. إليك ما يهم:

نوع التناغم	كيفية إنشاء الألوان	الأفضل لـ	مثال
متكامل	إعادة تدوير لون 180 درجة	أطوال مميزة ذات تباين عالٍ، زر الاتصال	أزرق كلون رئيسي + أزرق بني كلون مُضيء
متجاور	±30 درجة من تدوير اللون	خلفيات، تدرجات خفيفة	أزرق + أخضر بني + أزرق داكن
ثلاثي	ثلاثة ألوان بزاوية 120 درجة	واجهات ملونة، تحليلات بيانات	أحمر + أصفر + أزرق
مُكمِّل مُقسّم	180 درجة ± 30 درجة	مُضاد بدرجة تباين أضعف من المُكمِّل	أزرق + أصفر-أحمر + أحمر-أصفر

لأغلب مكتبات واجهة المستخدم، ستحدد اللون الرئيسي من لونك العلوي، واللون المُماثل كلون ثانوي، ولون مُكمِّل أو مُقسّم كألوان مُضيئة للحالة التفاعلية.

لماذا يفوق HSL الهكس لعملية إنشاء الألوان

الهكس والرِّغب يُرمِّزون الألوان كقنوات لجهاز الاستقبال، وليس كما يُنظر إليه الإنسان. أما HSL (اللون، التكثف، الوضوح) فيُمثل ما يُنظر إليه من منظور إنساني:

اللون — اللون نفسه (من 0 إلى 360 درجة، حيث 0 = أحمر، 120 = أخضر، 240 = أزرق)
التكثف — مدى الحدة مقارنة باللون الظليل (0% = لون مُظلم، 100% = لون مُكتمل)
الوضوح — مدى السطوع أو الظلام (0% = أسود، 100% = أبيض)

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

إطلاق تطابقات وظلال بطريقة صحيحة

الطريقة الخاطئة شائعة: تستخدم تدريج (lerp) للهكس نحو #ffffff لإطلاق تطابقات، نحو #000000 لإطلاق ظلال. هذا يُسبب تدفق لون وانكماش في التكثف — يصبح لون "أبيض أزرق" مُلطخًا وضاحكًا.

الطريقة الصحيحة: تحليل الهكس إلى HSL، ثم تغيير الوضوح فقط:

/**
 * Generate a 10-step shade scale from a base HSL color.
 * Returns shades from 50 (lightest) to 950 (darkest), like Tailwind.
 * @param {number} h - Hue (0–360)
 * @param {number} s - Saturation (0–100)
 * @param {number} l - Base lightness (0–100)
 * @returns {Object} - Scale object: { 50, 100, 200, ..., 900, 950 }
 */
function generateShadeScale(h, s, l) {
  // Lightness stops mapped to Tailwind-style scale keys
  const stops = [
    [50,  95],
    [100, 90],
    [200, 80],
    [300, 70],
    [400, 60],
    [500, l],   // 500 = your base color
    [600, 40],
    [700, 30],
    [800, 20],
    [900, 12],
    [950, 7],
  ];

  const scale = {};
  for (const [key, lightness] of stops) {
    scale[key] = `hsl(${h}, ${s}%, ${lightness}%)`;
  }
  return scale;
}

// Example: brand color #3b82f6 (Tailwind blue-500)
// HSL ≈ hsl(217, 91%, 60%)
const palette = generateShadeScale(217, 91, 60);
// palette[50]  → "hsl(217, 91%, 95%)" — near-white blue tint
// palette[500] → "hsl(217, 91%, 60%)" — brand color
// palette[900] → "hsl(217, 91%, 12%)" — near-black blue shade

النقطة الأساسية: يبقى اللون والتكثف ثابتين طوال المقياس. فقط الوضوح يتغير. هذا ينتج مقياسًا بصرًا متماسكًا يُنظر إليه كأنه نفس عائلة الألوان في كل مستوى.

هل تحتاج إلى إنشاء هذا من هكس؟ استخدم مستخرج لوحة الألوان لإخراج قيم HSL من أي لون فورًا.

مقياس نظام التصميم 50–950

أصبحت ميزة تايلندي مُعتمدة على مقياس 11 مستوى (50، 100–900، 950). أصبح الآن معيارًا معياريًا في أنظمة التصميم لأنها تُناسب الاستخدامات بوضوح:

50–100: خلفيات الصفحات، حالات التمرير على Surfaces مضاءة
200–300: أطر، مُقسّمات خفيفة، حالات غير مفعلة
400–500: عناصر تفاعلية - زر، رابط، أطر تمرير
600–700: حالات التمرير/الحالة النشطة لعناصر التفاعل
800–900: النص على خلفيات مضاءة
950: أقرب إلى الأسود للعناوين ذات التباين العالي

عند إنشاء هذا المقياس باستخدام لونك العلوي، تُحصل تلقائيًا على كل الظلال التي تحتاجها لحالات أي عنصر - دون الحاجة إلى اتخاذ قرارات لونية لكل عنصر.

من لون العلوي إلى مقياس كامل يعمل

إليك سلسلة العمل العملية عند وجود لون علوي واحد:

تحليله إلى HSL. يتحول #1d4ed8 → hsl(221, 74%, 48%)
إنشاء مقياس رئيسي. تشغيل دالة الظلال للنطاق الكامل 11 مستوى.
استخلاص الدرجة الثانوية. إعادة تدوير اللون ±30 درجة للحصول على لون مُماثل ثانوي: hsl(251, 74%, 48%) (أزرق-أرجواني).
استخلاص اللون المُضيء. إعادة تدوير اللون 180 درجة للحصول على لون مُكمِّل: hsl(41, 74%, 48%) (أصفر-أواني).
إنشاء مقياس لكل من الثلاثة. نفس دالة الظلال، مع مدخلات لون مختلفة.

يمكنك معاينة النتيجة الكاملة - بما في ذلك أنواع التوازن - قبل كتابة سطر واحد من الكود. مولد نظام الألوان أوامر لونية مُعرّفة

القيم المُباشرة للنطاق مخصصة لعناصر المقياس. الألوان المُعرّفة تعتمد عليها المكونات في الواقع:

هذا التمييز هو ما يجعل وظيفة الوضع المظلم ممكنة. تشير المكونات إلى

const tokens = {
  // Map scale values to semantic names
  'color-primary':         palette[500],  // brand color
  'color-primary-hover':   palette[600],
  'color-primary-subtle':  palette[50],
  'color-text':            palette[900],
  'color-text-muted':      palette[600],
  'color-border':          palette[200],
  'color-bg':              palette[50],

  // Status colors — separate scales per semantic group
  'color-success':         'hsl(142, 71%, 45%)',
  'color-warning':         'hsl(38, 92%, 50%)',
  'color-danger':          'hsl(0, 84%, 60%)',
};

. في الوضع المظلم، تُعيد تعيين هذه العناصر - دون الحاجة إلى تغيير كل مكون. color-textالقيم المنطقية تبقى كنصوص. palette[900]الوضع المظلم: عكس المقياس

مقياس مبني جيد باستخدام HSL يعكس تلقائيًا. القاعدة: تبديل النهايات السطوع والظليلة، ثم تعديل نقاط المنتصف بدرجة بسيطة للحفاظ على التوازن البصري.

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

// Light mode
const lightTokens = {
  'color-bg':    palette[50],   // near-white background
  'color-text':  palette[900],  // near-black text
  'color-border': palette[200],
};

// Dark mode — same scale, inverted stops
const darkTokens = {
  'color-bg':    palette[950],  // near-black background
  'color-text':  palette[50],   // near-white text
  'color-border': palette[800],
};

الجمع الكامل

باستخدام لون واحد، يمكنك الآن إنشاء مقياس كامل، مُعرّف بمعنى، وقابل للوضع المظلم، في أقل من 50 سطرًا من JavaScript. الخطوات الأساسية:

تحليل الهكس إلى HSL

إنشاء مقياس 11 مستوى للوضوح، مع الحفاظ على اللون والتكثف ثابتين
استخلاص الألوان الثانوية والملحوظة من خلال التدوير
ربط القيم الأساسية للمقياس بعناصر مُعرّفة
إعادة تعيين العناصر للوضع المظلم
للاختبار السريع دون كتابة الكود، يُمكنك استخدام

لإكمال كل هذا بصرًا - تصدير النتيجة كمتغيرات CSS أو ملف JSON لعناصر مُعرّفة، ثم وضعها مباشرة في نظام التصميم. مولد نظام الألوان و مستخرج لوحة الألوان تُعالج كل هذا بأسلوب بصري - استيراد النتيجة كمتغيرات CSS أو ملف توكين JSON ووضعه مباشرة في نظام التصميم.