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

كيفية استخدام منتقي الألوان

1. انقر على العيّنة أسفل اختر لونًا لفتح منتقي الألوان في متصفحك، ثم اختر لونًا. ويمكنك أيضًا كتابة قيمة أو لصقها في حقل رمز اللون: رمز HEX مثل #1E90FF، أو rgb(30, 144, 255)، أو hsl(210 100% 56%)، أو اسم لون في CSS مثل tomato.
2. تتحدّث المعاينة الكبيرة فورًا، ويُكتب رمز HEX عليها بالأسود أو بالأبيض، أيهما أوضح على تلك الخلفية.
3. في قسم رموز اللون، انسخ الصيغة التي تحتاج إليها بزر نسخ المجاور لها: HEX أو RGB أو HSL أو HSV أو CMYK.
4. اضغط لون عشوائي عندما تبحث عن الإلهام، أو التقاط من الشاشة (في المتصفحات التي تدعمه، مثل Chrome وEdge) لأخذ لون أي بكسل على شاشتك، حتى في النوافذ الأخرى.

كل شيء يجري داخل متصفحك: لا يُرسل أي لون أو صورة إلى أي مكان.

ماذا يعني كل رمز لون؟

• HEX هو الترميز الست عشري المكوّن من ست خانات والمستخدم في HTML وCSS. كل زوج من الخانات يمثل قناة واحدة (الأحمر، الأخضر، الأزرق) من 00 إلى FF، فالرمز #1E90FF يعني أحمر 30 وأخضر 144 وأزرق 255.
• RGB يعطي القنوات الثلاث نفسها بأرقام عشرية من 0 إلى 255، وهو ما تتوقعه معظم برامج التصميم ومكتبات البرمجة.
• HSL يصف اللون بدرجة اللون (زاوية من 0° إلى 360° على عجلة الألوان) والتشبّع والإضاءة. وهو مفيد لتفتيح اللون أو تغميقه بتغيير رقم واحد فقط.
• HSV (ويُسمّى أيضًا HSB) يستخدم درجة اللون والتشبّع والقيمة (السطوع). وهو النموذج الذي تقوم عليه مربعات الألوان في Photoshop وFigma وبرامج تحرير كثيرة أخرى.
• CMYK يعبّر عن اللون بنسب مئوية من أحبار السماوي والأرجواني والأصفر والأسود.

عن قيم CMYK

رموز CMYK تحويل مبسّط: K = 1 − max(R, G, B)، ثم C = (1 − R − K) / (1 − K)، والأمر نفسه لكل من M وY. هذه هي المعادلة المعتادة في الكتب الدراسية، لكنها لا تستخدم ملف تعريف ICC. فالطباعة الحقيقية تعتمد على آلة الطباعة والورق والأحبار، وستحوّل المطبعة ألوانك بملف التعريف الخاص بها، وقد تختلف النتيجة. استخدم هذه الأرقام نقطة انطلاق، لا بروفة للطباعة.

قراءة نسب التباين

أسفل رمز HEX، تعرض المعاينة التباين على الأبيض والتباين على الأسود، محسوبَين بمعادلة الإضاءة النسبية في WCAG 2. يلزم تباين 4.5:1 أو أكثر للنص الأساسي العادي في المستوى AA، و3:1 للنص الكبير وعناصر الواجهة. وإذا كان لونك لا يبلغ إلا 3:1 على الأبيض، فاحتفظ به للعناوين الكبيرة أو الأيقونات واستخدم درجة أغمق للنص.

نصائح

• يمكنك لصق رموز HEX دون العلامة #: فالرمز 1e90ff يعمل أيضًا، وكذلك الصيغ المختصرة مثل f60.
• تُقبل القيم التي تتضمن شفافية، مثل rgb(0 0 0 / 50%)، ويعرض المنتقي اللون المعتم.
• يختلف مربع حوار الألوان الخاص بالمتصفح من نظام إلى آخر. إذا احتجت إلى قيمة دقيقة، فكتابتها في حقل رمز اللون دقيقة دائمًا.