مولد لوحة الألوان - إنشاء مخططات ألوان متناغمة

ما مولِّد لوحة الألوان؟

مولِّد لوحة الألوان أداة تنشئ مجموعة من الألوان المتناسقة انطلاقًا من لون واحد، يُسمّى اللون الأساسي. يأخذ مولِّد لوحة الألوان هذا لونًا أساسيًا ونوعًا من التناغم، ثم يحسب بقية ألوان اللوحة باستخدام قواعد نظرية الألوان. وأنواع التناغم الأربعة التي يدعمها هي التكميلي، والمتجاور، والثلاثي، والأحادي اللون.

كيف تنشئ الأداة لوحة ألوان

تحوّل الأداة اللون الأساسي من ترميز سداسي عشري (مثل #3B82F6) إلى نموذج الألوان HSL. يصف HSL اللون بثلاثة أرقام:

• تدرّج اللون: موضع اللون على عجلة ألوان بزاوية 360 درجة (0° للأحمر، و120° للأخضر، و240° للأزرق).
• التشبّع: مدى شدة اللون، من 0% (الرمادي) إلى 100% (اللون النقي).
• الإضاءة: مدى قرب اللون من الأسود أو الأبيض، من 0% (الأسود) إلى 100% (الأبيض).

يغيّر كل نوع من التناغم تدرّج اللون أو إضاءته أو كليهما، ثم يحوّل النتيجة مرة أخرى إلى ترميز سداسي عشري.

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

الصيغة:

$h' = (h + 180) \bmod 360$

حيث إن h هو درجة لون اللون الأساسي بالدرجات، وh′ هو درجة اللون الجديدة. تعيد خطوة أخذ باقي القسمة النتيجةَ التي تتجاوز دورة كاملة إلى عجلة الألوان.

يبقى التشبّع والإضاءة كما هما.

مثال تطبيقي: الأزرق النقي، #0000FF، له تدرّج لون مقداره 240°، وتشبع مقداره 100%، وإضاءة مقدارها 50%. تؤدي إضافة 180° إلى تدرّج لون مقداره 60°. ويؤدي تحويل تدرّج اللون 60° مرة أخرى إلى ترميز سداسي عشري، مع الإبقاء على التشبّع والإضاءة نفسيهما، إلى إنتاج #FFFF00، وهو اللون الأصفر. لذلك تقرن هذه الأداة الأزرق بالأصفر، لا بالبرتقالي.

قد يسبب هذا التباسًا، لأن دروس الفن غالبًا ما تدرّس عجلة ألوان مختلفة، هي عجلة الأصباغ RYB (الأحمر-الأصفر-الأزرق)، حيث يكون اللون المقابل للأزرق هو البرتقالي. تعمل هذه الأداة باستخدام عجلة HSL القائمة على RGB والمستخدمة في الشاشات، ولذلك تختلف أزواج الألوان التكميلية فيها عن عجلة مزج الطلاء.

كيفية حساب الألوان المتجاورة

تقع الألوان المتجاورة بالقرب من اللون الأساسي على العجلة. تنشئ الأداة درجتي لون على بُعد 30° ودرجتي لون على بُعد 60° من درجة اللون الأساسية، مع الحفاظ على التشبّع والإضاءة نفسيهما.

$h \pm 30^{\circ}, \qquad h \pm 60^{\circ}$

حيث إن h هو درجة لون اللون الأساسي.

مثال تطبيقي: ينتج الأزرق، #0000FF (تدرّج اللون 240°)، تدرّج اللون 270° (#8000FF)، وتدرّج اللون 210° (#0080FF)، وتدرّج اللون 300° (#FF00FF)، وتدرّج اللون 180° (#00FFFF). وبإضافة اللون الأساسي، تضم اللوحة خمسة ألوان.

كيفية حساب الألوان الثلاثية

تفصل بين الألوان الثلاثية زاوية مقدارها 120° على العجلة، فتشكّل ثلاثية متباعدة بالتساوي مع اللون الأساسي.

$h + 120^{\circ}, \qquad h + 240^{\circ}$

مثال تطبيقي: ينتج الأحمر، #FF0000 (تدرّج اللون 0°)، تدرّج اللون 120° (#00FF00، الأخضر) وتدرّج اللون 240° (#0000FF، الأزرق). وتتكون مجموعة الألوان الثلاثة من الأحمر والأخضر والأزرق، وهي الألوان الثلاثة نفسها المستخدمة كألوان أساسية في الشاشات الرقمية.

كيفية حساب الألوان الأحادية

تحافظ الألوان الأحادية على تدرّج اللون والتشبّع نفسيهما، ولا تغيّر إلا الإضاءة. تغيّر الأداة الإضاءة بمقدار 15 و30 نقطة مئوية في كل اتجاه، مع حصرها بين 5% و95%.

$l \pm 15, \qquad l \pm 30$

حيث إن l هو إضاءة اللون الأساسي، بوحدات النسبة المئوية.

مثال تطبيقي: ينتج الأزرق، #0000FF (إضاءة 50%)، إضاءة مقدارها 65% (#4D4DFF)، وإضاءة مقدارها 35% (#0000B3)، وإضاءة مقدارها 80% (#9999FF)، وإضاءة مقدارها 20% (#000066).

بسبب الحدّين 5% و95%، قد يصل اللون الأساسي الفاتح جدًا أو الداكن جدًا إلى الحد نفسه مرتين. يعطي الأسود، #000000، إضاءة مقدارها 15% (#262626)، وإضاءة مقدارها 5% (#0D0D0D)، وإضاءة مقدارها 30% (#4D4D4D)، وإضاءة مقدارها 5% مرة أخرى (#0D0D0D)، ولذلك يتكرر لون واحد.

استخدام الأداة

1. اختر لونًا أساسيًا باستخدام منتقي الألوان، أو اكتب ترميزًا سداسيًا عشريًا مثل #3B82F6.
2. اختر نوع التناغم: تكميلي، أو متجاور، أو ثلاثي، أو أحادي اللون.
3. اقرأ لوحة الألوان المُنشأة. تعرض كل عيّنة لون ترميزها السداسي العشري على زر.
4. انقر ذلك الزر لنسخ الترميز السداسي العشري، أو استخدم "نسخ كل الألوان" لنسخ اللوحة بأكملها دفعة واحدة.

التحقق من التباين لإتاحة الوصول

تعرض كل عيّنة لونية شارتين صغيرين: أحدهما للتباين مقابل الأبيض، والآخر للتباين مقابل الأسود. تحسب الأداة نسبة التباين باستخدام صيغة WCAG (إرشادات إتاحة محتوى الويب):

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

حيث إن C هو نسبة التباين.

يمثّل L1 النصوع النسبي للون الأفتح، ويمثّل L2 النصوع النسبي للون الأغمق. تُستمد الاستضاءة من قيم الأحمر والأخضر والأزرق في اللون. تظهر الشارة "AA" عندما تكون النسبة 4.5 أو أعلى، وهو الحد الأدنى في WCAG للنص ذي الحجم العادي. وتظهر "!" عندما تكون النسبة أقل من 4.5. يؤدي تمرير المؤشر فوق الشارة إلى عرض النسبة الدقيقة. يحقق النص الأسود على خلفية بيضاء نسبة مقدارها 21، وهي أعلى قيمة ممكنة.

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

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

ما مولِّد لوحة الألوان؟ هو أداة تنتج مجموعة من الألوان المتناسقة، انطلاقًا من لون أساسي واحد وقاعدة تناغم مختارة.

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

كم لونًا ينتج كل نوع من أنواع التناغم؟ ينتج التناغم التكميلي إجمالي 2 لون، بما في ذلك اللون الأساسي. وينتج التناغم الثلاثي 3 ألوان. وينتج التناغم المتجاور 5 ألوان. وينتج التناغم الأحادي 5 ألوان.

ما نموذج الألوان الذي تستخدمه الأداة داخليًا؟ HSL (تدرّج اللون، والتشبّع، والإضاءة). تحوّل الأداة الترميز السداسي العشري المُدخل إلى HSL، وتجري الحسابات، ثم تحوّل النتيجة مرة أخرى إلى ترميز سداسي عشري.

هل تتحقق الأداة من إمكانية الوصول إلى الألوان؟ نعم. تعرض كل عيّنة لون ما إذا كان تباينها كافيًا مقابل الأبيض والأسود لاجتياز معيار WCAG AA للنص العادي، الذي يتطلب نسبة لا تقل عن 4.5.

هل يمكنني استخدام أكثر من نوع واحد من التناغم لمشروع؟ نعم. تجمع تصميمات كثيرة بين أنواع التناغم، مثل استخدام مجموعة متجاورة للألوان الرئيسية ولون تكميلي واحد لزر أو عنصر إبراز.

تنسيقات الألوان

تكتب الأداة كل لون مُنشأ على هيئة ترميز سداسي عشري من ست خانات مسبوقًا بإشارة # (مثل #ff0000 للأحمر). وتطابق الترميزات السداسية العشرية مباشرةً قيم الأحمر والأخضر والأزرق، التي تتراوح كل منها من 0 إلى 255. ويُعرض اللون الأساسي تمامًا كما أُدخل، ولذلك يظل الاختصار ذو الخانات الثلاث مثل #F00 بصيغته المختصرة. وتعني الترميزات ذات الخانات الثلاث اللون نفسه الذي تعنيه الصيغة ذات الخانات الست: إذ تُضاعف كل خانة، ولذلك فإن #F00 هو #FF0000. ويُعد HSL طريقة بديلة لوصف الألوان نفسها باستخدام تدرّج اللون والتشبّع والإضاءة بدلًا من كميات الأحمر والأخضر والأزرق.