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

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

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

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

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

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

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

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

الصيغة:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

المراجع

1. World Wide Web Consortium (W3C). Web Content Accessibility Guidelines (WCAG) 2.2. WCAG 2.2 — نسبة التباين (L1 + 0.05) / (L2 + 0.05)، والنسب من 1 إلى 21، والحد الأدنى 4.5:1 للنص العادي (معيار النجاح 1.4.3، المستوى AA).
2. World Wide Web Consortium (W3C). CSS Color Module Level 4. CSS Color Module Level 4 — في HSL يمثل تدرّج اللون 0° الأحمر، و120° الأخضر، و240° الأزرق.