لقد كنت أبني المواقع الإلكترونية لأكثر من عقد من الزمان، وإذا كان هناك شيء واحد يفصل التصاميم الهواية عن الاحترافية، فهو اللون. ليس عدد الألوان التي تستخدمها — بل أي الألوان تستخدمها معاً ولماذا. معظم المطورين الذين أعرفهم (بما فيهم أنا في الماضي) إما أنهم يلتزمون بالرماديات الآمنة ولون واحد للتمييز، أو يختارون ألوانًا تبدو جيدة في اللحظة لكنها تبدو باهتة في الإنتاج.

الحل ليس تعلم نظرية اللون من كتاب بـ 400 صفحة. بل تعلم مخطط ألوان موثوق واحد واستخدمه حتى يصبح من الطبيعة الثانية. هذا المخطط، في رأيي، هو Split-Complementary. وبمجرد أن تشعر بالارتياح معه، ستكون الألوان الثلاثية (Triadic) الخطوة الطبيعية التالية. دعني أشرح لك كليهما.

جدول المحتويات

شرح الألوان Split-Complementary: أفضل مخطط ألوان للمبتدئين

ما هي الألوان Split-Complementary؟

لنبدأ بالألوان التكميلية العادية. على عجلة الألوان القياسية، الألوان التكميلية تقع مباشرة عكس بعضها — فكر في الأزرق والبرتقالي، الأحمر والأخضر، الأرجواني والأصفر. فهي تحدث أقصى قدر من التباين. المشكلة؟ التباين الأقصى يمكن أن يشعر بالعدوانية. موقع ويب أزرق وبرتقالي يصرخ عليك. إنه التصميم المعادل لحجة.

Split-Complementary تأخذ هذه الفكرة وتخففها. بدلاً من استخدام اللون الموجود مباشرة عكس لونك الأساسي، تستخدم اللونين المجاورين للتكملة. إذن إذا كان لونك الأساسي أزرق، فإن التكملة ستكون برتقالي. لكن بدلاً من البرتقالي، ستختار أصفر-برتقالي وأحمر-برتقالي.

هذا كل شيء. هذا هو المفهوم بأكمله.

النتيجة هي لوحة ألوان ثلاثية الألوان ذات تباين بصري قوي (لأنك لا تزال تسحب من الجانب الآخر من العجلة) لكنها تشعر بأنها أكثر دقة وأقل مواجهة. تحصل على التوتر دون النزاع.

الهندسة وراءها

على عجلة ألوان بـ 360 درجة:

  1. اختر صبغتك الأساسية (على سبيل المثال، 220° لأزرق غني)
  2. جد التكملة: الأساسي + 180° (إذن 40°، وهو برتقالي)
  3. بدلاً من 40°، اذهب 30° لأي جانب: 10° (أحمر-برتقالي) و70° (أصفر-برتقالي)

الانقسام القياسي هو ±30° من التكملة، على الرغم من أن بعض المصممين يستخدمون ±25° أو ±35° للحصول على مشاعر مختلفة قليلاً. لا توجد قاعدة صعبة — عينيك هي الحكم النهائي.

كيفية العثور على الألوان Split-Complementary على عجلة الألوان

يمكنك القيام بهذا يدويًا باستخدام قيم HSL، وهو ما أوصي به للمطورين لأنه يرسم مباشرة إلى CSS. إليك النموذج العقلي:

الأساسي:      H
التكملة:      H + 180°
الانقسام 1:   H + 150°
الانقسام 2:   H + 210°

انتظر — لماذا 150° و210° بدلاً من التكملة ±30°؟ نفس الشيء، طريقة حساب مختلفة. (H + 180) - 30 = H + 150 و (H + 180) + 30 = H + 210. إنهما نفس المواضع على العجلة.

لنقل أن لون علامتك التجارية هو لون أزرق مخضر عند hsl(175, 65%, 45%):

  • الأساسي: 175°
  • الانقسام 1: 175 + 150 = 325° (وردي فاتح/ماجنتا)
  • الانقسام 2: 175 + 210 = 385° → 25° (مرجان دافئ/برتقالي)

لوحتك بثلاثة ألوان: أزرق مخضر، وردي فاتح، ومرجان. هذا مزيج جميل جداً، ولم تحتج إلى أي حدس تصميمي للوصول إليه — فقط حسابات.

جرب بنفسك مع عجلة الألوان التفاعلية الخاصة بنا. اختر أي لون أساسي وستحسب كلا الانقسام على الفور.

لماذا Split-Complementary مثالي للمبتدئين

أوصي بـ split-complementary لكل مطور يسأل عني عن اللون، وإليك السبب:

من المستحيل تقريباً أن تفسدها

الأنظمة التكميلية يمكن أن تبدو صارخة. الأنظمة المتشابهة (الألوان بجانب بعضها على العجلة) يمكن أن تبدو باهتة وتفتقر إلى التباين. أنظمة Triadic تتطلب توازناً حذراً. لكن split-complementary؟ إنها فقط... تعمل. العلاقة الهندسية بين الألوان الثلاثة تضمن تباينًا كافيًا للتسلسل البصري دون قسوة المتممات المباشرة.

إنها تعطيك لوناً سائداً واضحاً

مع الألوان الثلاثية، جميع الصبغات الثلاث متباعدة بالتساوي، مما قد يجعل من الصعب الاختيار. في مخطط split-complementary، يكون أحد الألوان بوضوح الأساس، والاثنان الآخران يلعبان أدوار داعمة. هذا يرسم بشكل مثالي لتصميم الويب حيث تحتاج إلى:

  • لون العلامة التجارية الأساسي (الأساس)
  • لون التمييز للـ CTAs والعناصر التفاعلية (انقسام واحد)
  • التمييز الثانوي للإضاءات والشارات أو حالات التحوم (الانقسام الآخر)

إنها تتدرج بسهولة

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

شرح الألوان Split-Complementary: أفضل مخطط ألوان للمبتدئين - العمارة

الألوان Split-Complementary في CSS

إليك كيف أقوم عادة بإعداد لوحة split-complementary باستخدام خصائص CSS المخصصة مع HSL. HSL هو المفتاح هنا — فهو يجعل حسابات نظرية اللون تافهة لأن الصبغة هي مجرد درجة على العجلة.

:root {
  /* Hue الأساسي */
  --hue-base: 220; /* أزرق غني */
  --hue-split-1: calc(var(--hue-base) + 150); /* ~10° أحمر-برتقالي دافئ */
  --hue-split-2: calc(var(--hue-base) + 210); /* ~70° أصفر ذهبي */

  /* اللوحة الأساسية */
  --color-primary: hsl(var(--hue-base), 65%, 50%);
  --color-accent-warm: hsl(var(--hue-split-1), 70%, 55%);
  --color-accent-cool: hsl(var(--hue-split-2), 60%, 50%);

  /* اللوحة الممتدة — الأصناف الأفتح/الأغمق */
  --color-primary-light: hsl(var(--hue-base), 65%, 90%);
  --color-primary-dark: hsl(var(--hue-base), 65%, 25%);
  --color-accent-warm-light: hsl(var(--hue-split-1), 70%, 92%);
  --color-accent-cool-light: hsl(var(--hue-split-2), 60%, 90%);

  /* المحايد المشتق من hue الأساسي */
  --color-bg: hsl(var(--hue-base), 10%, 98%);
  --color-surface: hsl(var(--hue-base), 8%, 100%);
  --color-text: hsl(var(--hue-base), 15%, 15%);
  --color-text-muted: hsl(var(--hue-base), 10%, 45%);
}

لاحظ تلك المحايدة في الأسفل. أنا أصبغ البيض والرمادي بكمية صغيرة من تشبع hue الأساسي. هذه تفصيلة صغيرة تحدث فرقاً كبيراً — خلفياتك لن تشعر بأنها منفصلة عن لوحة ألوانك. إنها من تلك الأشياء التي لا تلاحظها بوعي، لكن عينيك تلاحظ.

تطبيق قاعدة 60-30-10

النسبة الكلاسيكية لتصميم الداخلية تعمل بشكل مثالي هنا:

/* 60% — الأساسي/المحايد (الخلفيات والأسطح الكبيرة) */
.page-wrapper {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* 30% — لون الأساس (الرؤوس والملاحة والبطاقات) */
.site-header {
  background-color: var(--color-primary);
  color: white;
}

.card {
  border-left: 4px solid var(--color-primary);
  background: var(--color-surface);
}

/* 10% — الانقسامات التمييزية (CTAs والإضاءات والشارات) */
.btn-cta {
  background-color: var(--color-accent-warm);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
}

.badge-new {
  background-color: var(--color-accent-cool-light);
  color: var(--color-accent-cool);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
}

.link-highlight {
  color: var(--color-accent-warm);
  text-decoration: underline;
}

التمييز الدافئ (أحمر-برتقالي) يجذب العين أكثر من الأصفر الذهبي، لذا أستخدمه لأزرار CTA الأساسية. التمييز الأبرد يعمل للعناصر الثانوية. هذا ليس قاعدة صعبة — اختبر كليهما واعرف كيف تبدو صبغاتك المحددة.

أمثلة تصميم ويب حقيقية تستخدم Split-Complementary

لننظر إلى كيفية استخدام المواقع الحقيقية لهذا المخطط، حتى لو لم تسميه هكذا.

المثال 1: لوحة تحكم SaaS (قاعدة زرقاء)

  • الأساس: أزرق (#3B82F6) — الملاحة والرؤوس والأزرار الأساسية
  • الانقسام 1: عنبر دافئ (#F59E0B) — حالات التحذير ودعوات الترقية والمؤشرات النشطة
  • الانقسام 2: وردي (#F43F5E) — حالات الخطأ وشارات الإخطارات وإجراءات الحذف

هذا في الأساس ما تمكّنه لوحة Tailwind CSS الافتراضية. أزرق كأساسك، عنبر ووردي كتمييزك. إنها split-complementary سواء كنت فريق Tailwind ينويها أم لا.

المثال 2: التجارة الإلكترونية (قاعدة خضراء)

  • الأساس: أخضر غابة (#16A34A) — هوية العلامة التجارية وأزرار "أضف إلى السلة"
  • الانقسام 1: أحمر دافئ (#DC2626) — علامات البيع ومؤشرات الاستعجالية
  • الانقسام 2: بنفسجي (#7C3AED) — شارات برنامج الولاء وتمييزات المنتجات الممتازة

المثال 3: موقع محفظة (قاعدة بنفسجية)

  • الأساس: بنفسجي (#8B5CF6) — الرؤوس والأقسام البطولية
  • الانقسام 1: أزرق مخضر (#14B8A6) — الروابط والعناصر التفاعلية
  • الانقسام 2: ليمون (#84CC16) — حالات النجاح وشارات المشاريع المميزة

تري النمط؟ لون الأساس يقوم برفع الثقل الكبير لهوية العلامة التجارية، بينما الانقسامان يتعاملان مع الأدوار الداعمة التي تحتاج إلى أن تبرز من الأساس.

ما هي الألوان الثلاثية (Triadic)؟

الألوان الثلاثية هي ثلاث صبغات متباعدة بالتساوي على فترات 120° على عجلة الألوان. إذا كان split-complementary مثلث متساوي الساقين على العجلة، فإن triadic هو مثلث متساوي الأضلاع.

الأساس:        H
الثلاثي 1:     H + 120°
الثلاثي 2:     H + 240°

مزيجات ثلاثية كلاسيكية:

  • أحمر وأصفر وأزرق (الألوان الأساسية — هذا هو أشهر مجموعة ثلاثية)
  • برتقالي وأخضر وبنفسجي (الألوان الثانوية)
  • أزرق مخضر وماجنتا وذهب

يمكنك استكشاف التناسقات الثلاثية على أداة الألوان الثلاثية الخاصة بنا.

Triadic في CSS

:root {
  --hue-base: 0; /* أحمر */
  --hue-triadic-1: calc(var(--hue-base) + 120); /* 120° أخضر */
  --hue-triadic-2: calc(var(--hue-base) + 240); /* 240° أزرق */

  --color-primary: hsl(var(--hue-base), 70%, 50%);
  --color-secondary: hsl(var(--hue-triadic-1), 60%, 42%);
  --color-tertiary: hsl(var(--hue-triadic-2), 65%, 50%);
}

أنظمة Triadic جريئة. إنها نشيطة. كما أنها أصعب في التحكم. لأن جميع الألوان الثلاثة تحمل وزناً بصرياً متساوياً بشكل افتراضي، يجب أن تكون أكثر تعمداً حول مقدار كل واحد تستخدمه. الألوان الخاصة بعلامة Google التجارية (أحمر وأصفر وأزرق وأخضر) هي في الأساس مخطط ثلاثي مزدوج، ويستغرق فريق تصميم من المئات لجعل ذلك يعمل عبر المنتجات.

Split-Complementary مقابل Triadic: متى تستخدم كل منهما

إليك وجهة نظري الصريحة حول متى يكون كل مخطط منطقياً:

العامل Split-Complementary Triadic
الصعوبة مناسب للمبتدئين متوسط
مستوى التباين عالي لكن مراقب عالي جداً وتوتر متساوٍ
اللون السائد مدمج (الأساس) لا يوجد سائد طبيعي — تختار
الأفضل لـ مواقع الأعمال وSaaS والمدونات والمحافظ وكالات التصميم الإبداعية والعلامات التجارية للأطفال والألعاب والترفيه
خطر المظهر الصارخ منخفض متوسط إلى مرتفع إذا لم يتم إدارتها
التوازن اللوني 60-30-10 يرسم طبيعياً يتطلب قرارات نسبة حذيرة
تعدد الاستخدامات يعمل بأي تشبع يحتاج إلى إلغاء تشبع أو تلوين للشعور بالاحترافية
النبرة العاطفية متطورة وودية مرحة وديناميكية وجريئة

متى تختار Split-Complementary

  • أنت تبني موقع احترافي أو تجاري
  • تريد أن يهيمن أحد الألوان على هوية العلامة التجارية
  • تحتاج إلى أن تعمل اللوحة مع الكثير من محتوى النص (المدونات والتوثيق)
  • العميل لم يعطِك إرشادات الهوية وتحتاج إلى نقطة انطلاق آمنة
  • أنت تعمل على مشاريع headless CMS حيث قد يضيف محررو المحتوى صوراً تحتاج إلى التوافق بشكل جيد مع ألوان الواجهة

متى تختار Triadic

  • العلامة التجارية مرحة أو شابة بطبيعتها
  • أنت تصمم للترفيه أو الألعاب أو منتجات الأطفال
  • يعتمد التصميم بشكل كبير على الرسوم التوضيحية أو الرسوم المتحركة
  • لديك مهارات تصميم قوية وتريد دفع الحدود الإبداعية
  • أنت تبني محفظة إبداعية أو موقع وكالة

بالنسبة لمعظم مشاريع Next.js ومواقع Astro التي نبنيها في Social Animal، فإن split-complementary هو التوصية الافتراضية. إنها تتزاوج بشكل جيد مع التخطيطات الغنية بالمحتوى حيث تكون القراءة أكثر أهمية من الزخرفة البصرية.

نصائح عملية لتطبيق التناسقات اللونية

النصيحة 1: قلل التشبع بسخاء

الصبغات الخام من عجلة الألوان مكثفة جداً لمعظم واجهات الويب. اسحب التشبع لأسفل إلى 50-70% للألوان الأساسية وأقل حتى للخلفيات. التشبع العالي يعمل للحواشي الصغيرة — الأزرار والشارات والرموز. لا يعمل لرأس بعرض 1200px.

النصيحة 2: استخدم OKLCH بدلاً من HSL للتوحيد الإدراكي

HSL لديها سر قذر: قيمة الخفة الخاصة بها لا تتوافق مع كيفية إدراك البشر للسطوع الفعلي. أصفر بـ hsl(60, 100%, 50%) يبدو أكثر إضاءة بكثير من أزرق بـ hsl(240, 100%, 50%)، حتى لو كان كلاهما "50% خفة". OKLCH يصلح هذا.

:root {
  /* OKLCH يعطي خفة موحدة متصورة */
  --color-primary: oklch(55% 0.15 220);
  --color-accent-warm: oklch(55% 0.18 10);
  --color-accent-cool: oklch(55% 0.14 70);
  /* جميعها تبدو في الواقع بنفس الإضاءة */
}

من 2025، OKLCH لديه دعم متصفح ممتاز (96%+ عالمياً). استخدمه إن استطعت.

النصيحة 3: تحقق من نسب التباين

التناسق اللوني لا يتجاوز إمكانية الوصول. كل مزيج نص على خلفية يجب أن يفي بنسب تباين WCAG 2.2 — 4.5:1 للنص العادي و3:1 للنص الكبير. أدوات مثل فحص التباين WebAIM أو مدقق التباين المدمج في Chrome DevTools أمور لا غنى عنها.

النصيحة 4: اختبر مع محتوى حقيقي

لا يمكنني أن أخبرك كم عدد اللوحات الجميلة التي تنهار عندما تضيف صوراً حقيقية وصور ملفات تعريف المستخدمين ومنتجات. اختبر دائماً مخطط ألوانك مع محتوى حقيقي. قد تتضارب لوحة split-complementary بألوان أزرق مخضر ووردي فاتح ومرجان بشكل سيء مع صورة بطل تكون بشكل سائد لونها سلمون. قم بمحاكاتها مع محتوى الإنتاج مبكراً.

النصيحة 5: أنشئ متغيرات الوضع الداكن

كلا المخططين يتحولان جيداً إلى الوضع الداكن إذا عدلت الخفة والتشبع:

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: hsl(var(--hue-base), 55%, 65%);
    --color-accent-warm: hsl(var(--hue-split-1), 60%, 65%);
    --color-bg: hsl(var(--hue-base), 15%, 10%);
    --color-surface: hsl(var(--hue-base), 12%, 15%);
    --color-text: hsl(var(--hue-base), 10%, 90%);
  }
}

في الوضع الداكن، تريد عموماً زيادة الخفة للألوان الأمامية وتقليل التشبع قليلاً. الألوان الزاهية والمشبعة على الخلفيات الداكنة تسبب إجهاد العيون.

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

ما هو مخطط الألوان Split-Complementary؟ مخطط split-complementary يستخدم ثلاثة ألوان: لون أساسي واحد بالإضافة إلى اللونين المجاورين لتكملته على عجلة الألوان. بدلاً من اختيار اللون الموجود مباشرة عكس قاعدتك (وهي التكملة القياسية)، تختار الجارين لتلك التكملة، عادة 30° لكل جانب. هذا يعطيك تباينًا قويًا مع توتر بصري أقل من زوج تكميلي بحت.

كيف تجد الألوان Split-Complementary على عجلة الألوان؟ ابدأ بقيمة الصبغة لونك الأساسي بالدرجات (0-360). أضف 150° للحصول على انقسامك الأول، و210° للحصول على انقسامك الثاني. إذا تجاوزت النتيجة 360°، اطرح 360°. على سبيل المثال، أساس بـ 220° (أزرق) يعطيك انقسامات بـ 10° (أحمر-برتقالي) و70° (أصفر-برتقالي). يمكنك القيام بهذا يدويًا باستخدام قيم HSL في CSS، أو استخدام أداة عجلة الألوان المجانية الخاصة بنا لحسابها بصرياً.

ما الفرق بين الألوان Split-Complementary و Triadic؟ Split-complementary تستخدم لون أساسي واحد واثنين من الألوان بالقرب من تكملته (150° و210° من الأساس). Triadic تستخدم ثلاثة ألوان متباعدة بالتساوي على فترات 120°. الفرق الرئيسي هو التوازن: split-complementary لديها لون سائد واضح، بينما triadic تتعامل مع جميع الألوان الثلاثة بالتساوي. Split-complementary تميل إلى الشعور بمزيد من التعقيد؛ triadic يشعر بمزيد من الحيوية.

لماذا Split-Complementary أفضل من Complementary لتصميم الويب؟ الأنظمة التكميلية المباشرة (لونان مباشرة عكس بعضهما على العجلة) تحقق التباين الأقصى، والذي قد يشعر بالعدوانية أو بصعوبة النظر إليها بكميات كبيرة. Split-complementary يحافظ على معظم هذا التباين مع إضافة لون ثالث للتنويع وتنعيم التأثير الكلي. إنه يعطيك مرونة تصميم أكثر مع ثلاثة ألوان بدلاً من اثنين، وهذا أسهل بكثير في إنشاء التسلسل البصري.

هل يمكنني استخدام ألوان Split-Complementary مع Tailwind CSS؟ بالتأكيد. حدد الصبغات الثلاث في tailwind.config.js تحت theme.extend.colors، ثم استخدمها عبر الترميز الخاص بك. لوحة Tailwind الافتراضية تحتوي بالصدفة على عدة مجموعات split-complementary — أزرق/عنبر/وردي كونها الأكثر شيوعاً التي يصل إليها المطورون. يمكنك أيضاً استخدام دعم oklch() في Tailwind في v4 لحسابات ألوان موحدة متصورة.

كم عدد الألوان التي يجب أن يستخدمها موقع ويب فعلياً؟ معظم المواقع الاحترافية تستخدم 3-5 صبغات كحد أقصى، بالإضافة إلى متغيرات محايدة (رمادي مصبوغ بلون الأساس). مخطط split-complementary يعطيك بالضبط 3 صبغات، وهي النقطة الحلوة. من تلك 3، تنتج متغيرات أفتح وأغمق للخلفيات والحدود وحالات التحوم. قاعدة 60-30-10 هي إطار بداية جيد: 60% محايد/أساس، 30% أساسي، 10% تمييز.

هل تعمل الألوان الثلاثية لمواقع الأعمال/الشركات المهنية؟ يمكن أن تعمل، لكنها تتطلب مهارة أكثر. المفتاح هو إلغاء التشبع الثقيل وإدارة النسبة الحذيرة. إذا استخدمت جميع الألوان الثلاثية الثلاثية بالتشبع الكامل ومبالغ متساوية، ستحصل على تصميم يبدو مثل لعبة الأطفال. ادهس اثنين من الألوان الثلاثة بشكل كبير واستخدمها بحذر. بالنسبة لمعظم مشاريع الشركات أو SaaS، فإن split-complementary هو الخيار الأكثر أماناً وغالباً ما يكون أفضل.

ما هي الأدوات التي يمكن أن تساعدني في اختيار لوحات Split-Complementary و Triadic؟ عجلة الألوان التفاعلية الخاصة بنا تتيح لك تصور كلا التناسقات على الفور. أدوات صلبة أخرى تشمل Coolors (coolors.co) وAdobe Color و Realtime Colors بواسطة Juxtopposed، والذي يتيح لك معاينة اللوحات على نموذج موقع ويب مباشر. بالنسبة للمطورين، كان أيضاً سأوصي بامتداد VS Code "Color Highlight" حتى تتمكن من رؤية قيم لوحتك مباشرة أثناء البرمجة.