طريقة الاستخدام
- أدخل لونًا —
- انسخ الصيغة التي تحتاجها من القائمة.
- اضبط لون خلفية للتحقق من نسبة التباين ونتائج WCAG AA/AAA.
- انقر درجة في المقياس لاستخدامها.
شرح الخيارات
- HEX / RGB
- ألوان الشاشة كأحمر وأخضر وأزرق من 0 إلى 255. تضيف #rrggbbaa وrgb(… / 50%) الشفافية.
- HSL / HSV
- التدرج اللوني والتشبع والإضاءة (أو القيمة). مفيد لجعل اللون أفتح أو أغمق يدويًا.
- OKLCH
- مساحة لونية إدراكية في CSS Color 4. تغيير الإضاءة يبقي التدرج اللوني ودرجة الإشباع المُدرَكة ثابتة، ما يجعله مثاليًا للوحات الألوان والسمات الداكنة.
- CMYK
- تحويل بسيط للمرجعية فقط. تعتمد ألوان الطباعة الحقيقية على ملف تعريف الألوان الخاص بالطابعة، لذا اسأل مطبعتك عن القيم الدقيقة.
- نسبة التباين
- يتطلب WCAG 2.2 نسبة 4.5:1 للنص العادي و3:1 للنص الكبير (18 نقطة، أو 14 نقطة غامقة) عند مستوى AA؛ و7:1 و4.5:1 عند AAA.
مثال
اللون #0f766e هو rgb(15 118 110) وhsl(175 77% 26%) وoklch(51.1% 0.086 186.4). على خلفية بيضاء تبلغ نسبة التباين له نحو 5.5:1، وهي تجتاز WCAG AA لجميع أحجام النص.
ألوان شائعة بكل الصيغ
أسماء الألوان في CSS وقيمها. تحويل CMYK هنا رياضي بسيط؛ وللطباعة الاحترافية استخدم قيم CMYK من ملف تعريف ألوان طابعتك.
| الاسم في CSS | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| red | #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | 0%, 100%, 100%, 0% |
| orange | #ffa500 | rgb(255 165 0) | hsl(39 100% 50%) | 0%, 35%, 100%, 0% |
| gold | #ffd700 | rgb(255 215 0) | hsl(51 100% 50%) | 0%, 16%, 100%, 0% |
| green | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 100%, 0%, 100%, 50% |
| teal | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 100%, 0%, 0%, 50% |
| blue | #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | 100%, 100%, 0%, 0% |
| navy | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 100%, 100%, 0%, 50% |
| purple | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 0%, 100%, 0%, 50% |
| hotpink | #ff69b4 | rgb(255 105 180) | hsl(330 100% 71%) | 0%, 59%, 29%, 0% |
| brown | #a52a2a | rgb(165 42 42) | hsl(0 59% 41%) | 0%, 75%, 75%, 35% |
| gray | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 0%, 0%, 0%, 50% |
أي صيغة تستخدم
HEX هي أقصر طريقة لكتابة لون في CSS وأدوات التصميم: رقمان سداسيان عشريان لكل من الأحمر والأخضر والأزرق.
RGB هي المعلومات نفسها بالنظام العشري، وتضيف rgb(255 0 0 / 50%) الشفافية.
HSL تصف التدرج اللوني والتشبع والإضاءة، ما يسهّل إنشاء درجات أفتح أو أغمق من اللون نفسه بتغيير الرقم الأخير فقط.
OKLCH صيغة أحدث في CSS تبدو فيها الخطوات المتساوية في الإضاءة متساوية الاختلاف للعين — وهي مفيدة للوحات الألوان التي يسهل الوصول إليها.
الأسئلة الشائعة
ما نسبة التباين الجيدة للنص؟
4.5:1 على الأقل لنص المتن (WCAG AA). الأسود الخالص على الأبيض 21:1؛ والرمادي الشائع #767676 على الأبيض 4.54:1، ينجح بالكاد.
لماذا تختلف قيمة CMYK عن Photoshop؟
يحوّل Photoshop عبر ملف تعريف ألوان ICC لمطبعة وورق محددين. تستخدم هذه الأداة الصيغة الرياضية البسيطة، وهي مناسبة للتقديرات لكن ليست لتجارب الطباعة.
ما الفرق بين HSL وOKLCH؟
HSL إعادة ترتيب بسيطة لـRGB، لذا يبدو الأصفر والأزرق بالإضاءة نفسها مختلفين جدًا في السطوع. صُمِّم OKLCH بحيث تبدو الإضاءة المتساوية بالسطوع نفسه للعين.
هل يمكنني استخدام OKLCH في CSS اليوم؟
نعم. تعمل oklch() في جميع المتصفحات الرئيسية الحالية.
الخصوصية
تعمل هذه الأداة بالكامل داخل متصفحك. تُعالَج ملفاتك ونصوصك على جهازك ولا تُرفع أبدًا إلى خوادمنا.