كيفية استخدام منتقي الألوان hex
- انقر على مربع اللون الكبير لفتح منتقي الألوان في نظامك، أو اكتب كود hex مثل
#1E90FFأو اسمًا مثلtomato. - انسخ الصيغة التي تحتاجها: HEX أو RGB أو HSL أو HSV أو CMYK. وانقر على أي درجة فاتحة أو داكنة أو لون متناسق لنسخ كود hex الخاص به.
- راجع مربعات التباين لمعرفة ما إذا كان النص الأبيض أو الأسود على لونك يحقق المستوى AA أو AAA من معايير WCAG.
كيف تعمل أكواد الألوان hex؟
يتكوّن كود اللون hex مثل #FF6347 من ثلاثة بايتات: الأحمر (FF = 255) والأخضر (63 = 99) والأزرق (47 = 71). تتراوح قيمة كل قناة من 00 إلى FF، ما يتيح 256 × 256 × 256 = 16,777,216 لونًا ممكنًا. وتنتج القيم المتساوية درجات رمادية – #000000 هو الأسود، و#808080 رمادي متوسط، و#FFFFFF هو الأبيض – وكلما زادت القيم أصبح اللون أفتح.
الدرجات الفاتحة والداكنة وتناسق الألوان
الدرجة الفاتحة (tint) هي لونك ممزوجًا بالأبيض، والدرجة الداكنة (shade) هي لونك ممزوجًا بالأسود. يعرض المنتقي كلتيهما بخطوات قدرها 10%، وهذا مفيد لحالات التمرير (hover) والحدود والخلفيات المتناسقة مع لون العلامة التجارية.
يعتمد تناسق الألوان على تدوير درجة اللون (hue) حول عجلة الألوان مع الحفاظ على التشبع والإضاءة:
- الألوان المكمّلة (180°) – اللون المقابل، لتباين قوي ولأزرار الدعوة إلى اتخاذ إجراء.
- الألوان المتجاورة (±30°) – الألوان المجاورة على العجلة، للوحات ألوان هادئة ومتناغمة.
- الألوان الثلاثية (±120°) – ثلاثة ألوان متباعدة بالتساوي، لتصاميم حيوية ومتوازنة.
تباين الألوان ومعايير WCAG
تشترط إرشادات الوصول إلى محتوى الويب (WCAG) نسبة تباين لا تقل عن 4.5:1 للنص العادي (المستوى AA) و7:1 للمستوى AAA. أما النص الكبير – 18 pt، أو 14 pt بخط عريض – فيحتاج إلى 3:1 للمستوى AA. وتقارن هذه النسبة بين السطوع النسبي للون النص ولون الخلفية، وتتراوح من 1:1 (لونان متطابقان) إلى 21:1 (أسود على أبيض).
الأسئلة الشائعة
ما هي أكواد الألوان hex؟
كود اللون hex يصف اللون بستة أرقام سداسية عشرية: رقمان للأحمر، ورقمان للأخضر، ورقمان للأزرق، مثل #FF6347 (tomato). وتفهمه CSS وHTML وأدوات التصميم وبرامج تحرير الصور جميعها.
كم عدد الألوان التي يمكن أن يمثّلها كود hex؟
256 × 256 × 256 = 16,777,216 لونًا. ومع إضافة زوج ألفا (#RRGGBBAA) يمكن أن يكون لكل منها أيضًا 256 مستوى من الشفافية.
ما أسماء ألوان CSS المدعومة؟
جميع الألوان المسمّاة في CSS Color Module وعددها 148، من aliceblue إلى yellowgreen، بما فيها rebeccapurple. اكتب الاسم في حقل hex أو صفِّ القائمة أسفل الأداة، ثم انقر على اللون لتحديده.