منتقي الألوان ومولّد اللوحات

يمكن وصف أي لون على الشاشة بثلاث طرق، وتُبقيها هذه الأداة متزامنة جميعًا: HEX هو الصيغة المختصرة المستخدمة في CSS وأدوات التصميم، وRGB يصف مقدار الضوء الأحمر والأخضر والأزرق الذي يتشكل منه اللون، وHSL (تدرّج اللون والتشبّع والسطوع) يصفه بالطريقة التي يفكر بها الناس فعلًا في الألوان: ما درجته، ومدى حيويته، وهل هو فاتح أم داكن. اسحب عينة اللون الأصلية، أو اكتب رمز HEX، أو عدّل أي حقل من R/G/B أو H/S/L مباشرة، فتتحدث بقية الحقول فورًا، فتتنقل بين طرق التفكير المألوفة لديك دون أن تحسب شيئًا بنفسك.

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

ليست كل لوحة جيدة تبدأ من نظرية الألوان، فأحيانًا تريد فقط أن ترى ما سيظهر. يولّد مولّد اللوحات العشوائية (اضغط مفتاح المسافة أو انقر «توليد») خمسة ألوان دفعة واحدة بتدرجات وسطوع مضبوطة لتجنب النتائج الباهتة أو الباستيل المفرط. انقر أيقونة القفل على أي عينة تريد الاحتفاظ بها ثم وَلّد من جديد: تتغير الألوان غير المقفلة فقط، فتبني لوحتك تدريجيًا كما في أدوات مثل Coolors. انقر أي عينة لنسخ رمز HEX الخاص بها، أو استخدم الأزرار أسفل اللوحة لنسخ المجموعة كلها كخصائص CSS مخصصة أو متغيرات SCSS أو مقطع إعداد Tailwind أو مصفوفة JSON، أو صدّر ملف عينات Adobe ‏.ase لبرنامجي Illustrator وPhotoshop. ويمكنك كذلك استخراج لوحة من أي صورة (تُعالَج محليًا ولا تُرفع) وحفظ ما يعجبك من لوحات في متصفحك لاحقًا.

اختيار لون جميل لا يعني اختيار لون صالح للاستخدام؛ فالنص الذي يقارب سطوعه سطوع خلفيته قد يصعب قراءته، وقد وضعت إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) حدودًا محددة لذلك: نسبة تباين لا تقل عن 4.5:1 للنص العادي لاجتياز المستوى AA، و7:1 لاجتياز المستوى AAA الأكثر صرامة. يحسب فاحص التباين النسبة الدقيقة بين لونك المختار وكل من النص الأبيض والأسود وفق صيغة السطوع النسبي التي تحددها مواصفة WCAG، ويبيّن هل ينجح كل تركيب أم لا، فتكتشف الزر أو العنوان ضعيف التباين قبل إطلاقه لا بعده.