منتقي الألوان
اختر أي لون واحصل على رمزه بجميع الصيغ الشائعة جاهزًا للنسخ. أنشئ لوحات ألوان متناسقة، واستخرج الألوان السائدة في صورة دون رفعها، وتحقق مما إذا كان لون النص مع لون الخلفية يستوفي معيار التباين WCAG.
منتقي الألوان
رموز اللون بكل الصيغ
- HEX#2F6FED
- RGB47, 111, 237
- HSL220°, 84%, 56%
- HSB / HSV220°, 80%, 93%
- CMYK (تقريبي)80%, 53%, 0%, 7%
- CSS rgb()rgb(47 111 237)
- CSS hsl()hsl(220 84% 56%)
لوحات ألوان من هذا اللون
متتام
متجاور
ثلاثي
درجات فاتحة (مخلوطة بالأبيض)
درجات داكنة (مخلوطة بالأسود)
لوحة ألوان من صورة
تُقرأ صورتك داخل متصفحك ولا تُرفع أبدًا: تؤخذ عينات البكسلات على canvas في هذا الجهاز ولا يُرسل شيء إلى أي مكان.
أفلت صورة أو لقطة شاشة أو شعارًا هنا
ستظهر هنا الألوان الستة الغالبة في صورتك. انقر على عيّنة لتحميلها في المنتقي.
فاحص التباين (WCAG 2.1)
عيّنة نص كبير
نص تجريبي لعرض اللون والتباين. 0123456789
- AA · نص عاديناجح
- AAA · نص عاديناجح
- AA · نص كبيرناجح
- AAA · نص كبيرناجح
النص الكبير يعني 18 نقطة (24 px) عادي أو 14 نقطة (نحو 18.7 px) غامق على الأقل. يتطلب AA نسبة 4.5:1 للنص العادي و3:1 للنص الكبير؛ ويتطلب AAA نسبة 7:1 و4.5:1.
ألوان CSS المسمّاة الشائعة
عشرون كلمة مفتاحية يفهمها كل متصفح، مع قيم HEX وRGB وHSL الدقيقة.
| الاسم | HEX | RGB | HSL |
|---|---|---|---|
black | #000000 | 0, 0, 0 | 0°, 0%, 0% |
white | #ffffff | 255, 255, 255 | 0°, 0%, 100% |
gray | #808080 | 128, 128, 128 | 0°, 0%, 50% |
silver | #c0c0c0 | 192, 192, 192 | 0°, 0%, 75% |
red | #ff0000 | 255, 0, 0 | 0°, 100%, 50% |
crimson | #dc143c | 220, 20, 60 | 348°, 83%, 47% |
maroon | #800000 | 128, 0, 0 | 0°, 100%, 25% |
tomato | #ff6347 | 255, 99, 71 | 9°, 100%, 64% |
coral | #ff7f50 | 255, 127, 80 | 16°, 100%, 66% |
orange | #ffa500 | 255, 165, 0 | 39°, 100%, 50% |
gold | #ffd700 | 255, 215, 0 | 51°, 100%, 50% |
yellow | #ffff00 | 255, 255, 0 | 60°, 100%, 50% |
olive | #808000 | 128, 128, 0 | 60°, 100%, 25% |
green | #008000 | 0, 128, 0 | 120°, 100%, 25% |
teal | #008080 | 0, 128, 128 | 180°, 100%, 25% |
aqua | #00ffff | 0, 255, 255 | 180°, 100%, 50% |
blue | #0000ff | 0, 0, 255 | 240°, 100%, 50% |
navy | #000080 | 0, 0, 128 | 240°, 100%, 25% |
purple | #800080 | 128, 0, 128 | 300°, 100%, 25% |
rebeccapurple | #663399 | 102, 51, 153 | 270°, 50%, 40% |
ماذا تصف صيغ HEX وRGB وHSL وHSB فعلًا
كل لون في هذه الصفحة يعمل ضمن sRGB، وهو فضاء الألوان الافتراضي للويب منذ اعتمدته المتصفحات في أواخر التسعينيات. تمزج الشاشة الضوء الأحمر والأخضر والأزرق، ولكل قناة 256 مستوى (0–255)، مما يعطي 16,777,216 لونًا ممكنًا. يكتب RGB هذه الأرقام الثلاثة مباشرة، أما HEX فيكتبها نفسها بالنظام الست عشري، برقمين لكل قناة، فالقيمة #FF6600 تعني أحمر 255 وأخضر 102 وأزرق 0. والصيغة المختصرة بثلاثة أرقام تضاعف كل رقم: #F60 تساوي #FF6600.
يصف HSL وHSB (ويسمى أيضًا HSV) الألوان نفسها بطريقة أسهل في الضبط اليدوي. درجة اللون (Hue) زاوية على عجلة الألوان: 0° أحمر، 120° أخضر، 240° أزرق. الفرق في الرقم الأخير. في HSL تعني الإضاءة 100% الأبيض دائمًا، و50% أنقى درجة من اللون؛ وفي HSB يعني السطوع 100% اللون النقي، ويحتاج الأبيض إلى تشبع 0%. تستخدم برامج التصميم مثل Photoshop وFigma نموذج HSB في أدوات الاختيار، بينما يدعم CSS الدالة hsl() مباشرة، ولهذا ذُكر النموذجان أعلاه.
لماذا تكون قيمة CMYK تقريبية فقط
تضيف الشاشات الضوء، أما الطابعات فتطرحه بأحبار السماوي والأرجواني والأصفر والأسود. ويغطي النظامان نطاقين مختلفين من الألوان يسميان المدى اللوني (gamut). الألوان المشبعة جدًا على الشاشة، مثل الأخضر الساطع في RGB أو الأزرق الكهربائي أو البرتقالي الفوسفوري، تقع خارج ما تستطيع أحبار الطباعة إنتاجه، لذلك تظهر مطبوعةً أكثر خفوتًا مما تبدو على الشاشة.
تعتمد أرقام CMYK هنا على التحويل الرياضي البسيط دون ملف ICC، وهو مفيد للتقدير التقريبي لكنه لا يصلح للطباعة الفعلية. تحوّل المطبعة الألوان بملف يناسب الورق والماكينة، مثل FOGRA39 في أوروبا أو GRACoL في الولايات المتحدة، وقد يخرج لون RGB نفسه بنسب أحبار مختلفة في كل ملف. لأعمال الطباعة، أرسل قيمة RGB أو HEX مع الملف الذي تطلبه المطبعة.
كيف تُحسب نسبة التباين
تقارن WCAG 2.1 اللمعان النسبي للونين: اللون الأفتح مضافًا إليه 0.05 مقسومًا على اللون الأغمق مضافًا إليه 0.05. وتتراوح النتيجة من 1:1 (لونان متطابقان) إلى 21:1 (أسود على أبيض). يتطلب المستوى AA نسبة 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير، أي 18 نقطة أو 14 نقطة بخط عريض؛ ويرفعها المستوى AAA إلى 7:1 و4.5:1. أما عناصر واجهة المستخدم مثل حدود حقول الإدخال والأيقونات فتحتاج 3:1 مقابل محيطها وفق معيار النجاح 1.4.11.
يعطي اللمعان وزنًا للأخضر أكبر بكثير من الأزرق، لأن العين أكثر حساسية له. ولهذا يفشل النص الأصفر على الأبيض فشلًا واضحًا بينما ينجح الأزرق الداكن على الأبيض بسهولة، مع أن اللونين يبدوان مشبعين تمامًا. والشعارات والنصوص الزخرفية البحتة مستثناة من هذه القاعدة.
استخراج لوحة ألوان من صورة أو شعار
تقرأ لوحة ألوان الصورة ملفك عبر canvas في المتصفح، وتصغّره إلى 200 بكسل على الأكثر في الضلع الطويل، ثم تجمع البكسلات المتشابهة بطريقة القطع المتوسط (median-cut) التي وصفها Paul Heckbert عام 1982: يُقسَّم نطاق الألوان مرارًا على أعرض قناة حتى تبقى ست مجموعات، ويصبح متوسط كل مجموعة عينة لونية. تُتجاهل البكسلات الشفافة، فيعطي الشعار على خلفية شفافة ألوان الشعار نفسه.
بعد الحصول على الألوان، يعمل الشعار المسطح غالبًا بشكل أفضل كملف متجه. يحوّله محول الصورة إلى SVG إلى أشكال تحتفظ بهذه الألوان بدقة، وإذا كنت تصمم غلاف قناة، فإن أداة تغيير حجم بانر يوتيوب تضبط التصميم على 2560 × 1440 مع مراعاة المنطقة الآمنة.
الأسئلة الشائعة
- لماذا يبدو اللون "green" في CSS أغمق من الأخضر في منتقي RGB؟
- الكلمة المفتاحية green تساوي #008000، وهو أخضر متوسط موروث من لوحة HTML القديمة ذات 16 لونًا. أما #00FF00 المشبع تمامًا فيسمى lime. وفي القائمة الكاملة لـ CSS مفاجآت مشابهة: فاللون gray (#808080) أغمق من darkgray (#A9A9A9).
- هل تُرفع صورتي عند استخراج لوحة الألوان؟
- لا. يفتح متصفحك الملف ويرسمه على canvas في الذاكرة ويحلله هناك. لا يُرسل أي طلب يحمل الصورة، وإغلاق علامة التبويب يمحوها.
- ما نسبة التباين المطلوبة لنص المحتوى الأساسي؟
- 4.5:1 على الأقل لتحقيق المستوى AA في WCAG 2.1، و7:1 للمستوى AAA. يجوز للعناوين بحجم 18 نقطة فأكثر، أو 14 نقطة بخط عريض، استخدام 3:1 للمستوى AA. وتستهدف أنظمة تصميم كثيرة 4.5:1 في كل مكان ليبقى النص مقروءًا على الشاشات الخافتة وتحت ضوء الشمس.
- هل يمكنني استخدام رمز HEX من 8 خانات مع الشفافية؟
- نعم، في CSS. الرقمان الأخيران هما قناة الشفافية (alpha)، فالقيمة #2F6FED80 هي الأزرق نفسه بشفافية تقارب 50%. تعمل أداة الاختيار هذه مع ألوان معتمة، لذلك تعرض ستة أرقام؛ أضف زوج الشفافية بنفسك عند الحاجة.
- كم عدد الألوان المسماة في CSS؟
- تعرّف وحدة CSS Color Module Level 4 ثمانية وأربعين ومئة (148) كلمة مفتاحية للألوان، بحساب الصيغ المكررة مثل gray وgrey. وأحدثها rebeccapurple (#663399) أُضيف عام 2014 تخليدًا لذكرى Rebecca Meyer، ابنة Eric Meyer أحد مؤلفي CSS.