الباحث عن الألوان التكميلية
أدخل اللون الأساسي
يدعم #RGB و#RRGGBB وrgb() بأعداد صحيحة وhsl() بنسب مئوية. يبقى الحساب في المتصفح؛ ويظهر اللون في الرابط المرسل مع طلب كل صفحة.
تقع الألوان المكمّلة في موضعين متقابلين على عجلة الألوان الرقمية. أدخل قيمة HEX أو RGB أو HSL مطابقة للصيغة لحساب مكمّل HSL، وألوان المكمّل المنقسم، والألوان الرباعية المصاحبة، ونسب تباين WCAG الدقيقة. تُجرى الحسابات محليا داخل المتصفح.
كيف يتم حساب المكمل
-
1
أدخل أي لون
استخدم #RGB أو #RRGGBB أو rgb() بأعداد صحيحة أو hsl() بنسب مئوية. تُفحص القيمة كاملة قبل الحساب.
-
2
تدوير درجة اللون بمقدار 180 درجة
مكمّل HSL: أضف 180 درجة إلى درجة اللون، مع الحفاظ على التشبع والإضاءة كما هما.
-
3
تكملة الانقسام مشتقة
لونان بزاوية 150 درجة و210 درجة من القاعدة - بديل أكثر نعومة للتكملة المباشرة عندما يكون التباين مرتفعًا للغاية.
-
4
تظهر تلميحات إمكانية الوصول
نسبة تباين الزوج مقابل الأبيض والأسود، بالإضافة إلى تحذير إذا كان من المحتمل أن يفشل الزوج في WCAG AA عند استخدامه كـ fg/bg.
أمثلة
| اللون الأساسي | Hex | المكمل (HSL) | Hex |
|---|---|---|---|
| أحمر نقي | #FF0000 | سماوي | #00FFFF |
| مرجاني | #FF7F50 | أزرق مخضر فاتح | #50D0FF |
| الغابة الخضراء | #228B22 | أرجواني | #8B228B |
| الأزرق الملكي | #4169E1 | ذهبي-برتقالي | #E1B941 |
| لافندر | #E6E6FA | أصفر شاحب | #FAFAE6 |
تصف قيم HEX وRGB وHSL المعروضة لون sRGB نفسه. انسخ النتيجة لاستخدامها في CSS أو في أداة تصميم أخرى.
مكمل HSL مقابل مكمل RYB
- HSL (الشاشة): أحمر ↔ سماوي، أخضر ↔ أرجواني، أزرق ↔ أصفر. هذه هندسة زاوية HSL المشتقة من sRGB والمستخدمة في CSS، وليست محاكاة لمزج الضوء.
- RYB (الفنان): أحمر ↔ أخضر، أزرق ↔ برتقالي، أصفر ↔ أرجواني. هذا ترتيب تعليمي تقليدي، وليس تنبؤا بمزج أصباغ بعينها.
تستخدم الأداة نموذج HSL الرقمي فقط. ولا تحوّل إلى عجلة ألوان الطلاء RYB لأن مكمّل الصبغة يعتمد على المادة وطريقة المزج.
حيث تعمل المكملات بشكل جيد
- أزرار CTA على خلفيات العلامة التجارية. قم بإقران الزر الأساسي مع مكملته لجعل الزر ينبثق.
- تصور البيانات في الرسوم البيانية ذات السلسلتين (الربح مقابل الخسارة، قبل مقابل بعد).
- الظلال التوضيحية: يبدو ظل اليقطين البرتقالي أكثر إقناعًا باللون الأزرق منه في اللون البرتقالي الغامق.
- العلامات التجارية الرياضية: تستخدم العديد من الفرق لوحات الألوان التكميلية أو المجزأة (أزرق/برتقالي، أحمر/أخضر، أصفر/أرجواني).
أين يفشلون
- النص الأساسي على الخلفية: المكملات المباشرة (الأحمر على الأخضر، الأزرق على البرتقالي) غير مريحة للقراءة. الانحراف اللوني العالي يسبب التعب البصري.
- الاستخدام على كامل السطح: الشاشة التي تحتوي على 50% من اللون الأحمر و50% من اللون الأخضر تعتبر مرهقة. استخدم تكملة لللكنات (5-10٪ من مساحة السطح)، وليس الرئيسية.
- تماسك العلامة التجارية: تبدو الألوان المكمّلة مزدحمة. تستخدم معظم العلامات التجارية الحديثة لونًا أحاديًا أو ألوانًا متشابهة + لون مميّز واحد، وليس زوجًا مكمّلًا مزدوجًا.
تكملة الانقسام
غالبًا ما يكون المكمل المنفصل (القاعدة + 150 درجة + 210 درجة) خيارًا عمليًا أفضل:
- يحتفظ بالتباين العالي مع المنطقة المكملة.
- يتجنب الاهتزاز المكمل المباشر.
- يوفر لهجتين لتصميم الطبقات.
مثال: القاعدة = أزرق ← المكمل = برتقالي (قاسي) ← المكمل المنفصل = أحمر-برتقالي + أصفر-برتقالي (أكثر ثراء).
مكملات عدم التشبع
نادراً ما تبدو المكملات النقية جيدة عند التشبع الكامل. قلل التشبع بنسبة 20-40% على أحدهما أو كليهما للحصول على لوحة ألوان أكثر هدوءًا:
- أحمر (S=100%) + سماوي (S=100%) = اهتزاز.
- أحمر (S=60%) + سماوي (S=60%) = لوحة الملصقات الكلاسيكية.
- لون قرميدي للعلامة التجارية (S=45%) + أزرق مخضر مغبّر (S=30%) = حديث وصالح للاستخدام.
التحقق من سلامة المنتج قبل الاستخدام
- نسبة التباين للزوج: يقوم الباحث بالإبلاغ عن ذلك. أقل من 4.5:1 يفشل AA للنص.
- اختبر على خلفية محايدة: تبدو الألوان المكمّلة مختلفة مقابل الأبيض والرمادي والأسود.
- اختبار الطباعة إذا كانت هذه هي الوجهة، قد يغيّر نظام CMYK التشبع وعلاقات الألوان المكمّلة مقارنةً بنظام RGB.
الأسئلة الشائعة
يرتب كل منهما درجات اللون وفق اصطلاح مختلف. يستخدم HSL زاوية رقمية مشتقة من sRGB، بينما يضع دولاب RYB التقليدي ألوان الفنان الأساسية على دائرة مفاهيمية. لا يتنبأ أي منهما بنتيجة مزج أضواء أو دهانات حقيقية.
نعم، إنهما مترادفان في نظرية الألوان. يشير “العكس على عجلة الألوان” و“المكمل“ إلى نفس العلاقة.
نادرا. عادةً ما تفشل المكملات المباشرة في تباين WCAG عند استخدامها كـ fg/bg لأنها تتمتع بخفة مماثلة. قم بزيادة فرق الإضاءة (نص داكن على خلفية فاتحة) للتمرير.
نعم - تشتمل لوحة النتائج على المكمل المباشر، والمكمل المنقسم (لونان جانبيان)، والمجموعة الرباعية (التترادية). اختر ما يناسب هدف التصميم الخاص بك.
أدوات ذات صلة
مرجع جدول ASCII
جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.
محول الثنائي إلى الست عشري
حوّل الإدخال الثنائي إلى قيمة ست عشرية بأحرف كبيرة. يتم تجاهل غير 0 و1 ولا تُحفظ الأصفار البادئة.
محول Base64 إلى Hex
حوّل سلسلة Base64 إلى بايتاتها الأساسية معروضة بالنظام الست عشري (hex). مفيد لفحص الرموز المميزة والمفاتيح والشهادات ورموز JWT.
منسق JSON
الصق JSON لتنسيقه بمسافتين أو أربع مسافات، أو تصغيره إلى ناتج مضغوط، أو فحص بنيته بسرعة قبل نسخ النتيجة.
مولد لوحة الألوان
أنشئ لوحات ألوان أحادية أو متجاورة أو مكملة أو ثلاثية أو رباعية من لون HEX أساسي، ثم صدّر متغيرات CSS جاهزة للنسخ.
محول ASCII إلى Hex
حوّل نص ASCII إلى قيم bytes بالنظام الست عشري. يستخدم الناتج رقمين hex لكل محرف، جاهزا لملفات memory dumps أو packet traces أو جداول firmware.