محدد ألوان HEX
يتعامل المصممون والمطورون مع نفس اللون عبر أربع علامات تعبيرية مئات المرات يوميًا. انقر في أي نقطة ضمن حقل التشبع/القيمة ثنائي الأبعاد، أو سحب مؤشر اللون، أو قم بلصق قيمة، فسيعرض هذا المحدد كلًا من HEX وRGB وHSL وHSV وCMYK جنبًا إلى جنب، مع فحوصات تباين وفق معايير WCAG مقارنة بالأبيض والأسود، مما يسمح لك بمعرفة فورًا ما إذا كان اللون سهل القراءة أم لا.
كيف تختار اللون؟
-
1
اختر لونًا
امدّد مượtِر اللون الرأسي عبر كامل طيف الدرجات من 0 إلى 360 درجة.
-
2
درجة التشبع والقيمة عند نقطة الاختيار
انقر أو اسحب داخل المربع ثنائي الأبعاد لضبط درجة وضوح وسطوع اللون.
-
3
قم بضبط الدقة باستخدام المدخلات
أدخل القيم الدقيقة بصيغة HEX أو RGB أو HSL أو HSV أو CMYK؛ حيث تبقى جميع الحقول الخمس متزامنة.
-
4
تحقق من سهولة الوصول ونسخ المحتوى
تظهر نسب التباين مقارنة بالأبيض والأسود بشكل مباشر؛ بمجرد النقر مرة واحدة، يتم نسخ الرمز المطلوب.
ملاحظات التلوين في التطبيق العملي
كل نموذج لون يجيب عن سؤال مختلف قليلاً.
مرجع الترميز
| الرمزية | المكونات | مكان الاستخدام |
|---|---|---|
| رقم هاشتاج | #RRGGBB | CSS، أدوات التصميم، دليل العلامة التجارية |
| RGB | الأحمر: 0–255، الأخضر: 0–255، الأزرق: 0–255 | CSS rgb()، محررو الصور |
| HSL | اللون من 0 إلى 360 درجة، نسبة التشبع (%)، نسبة السطوع (%) | CSS hsl()، أنظمة التصميم |
| HSV/HSB | اللون من 0 إلى 360 درجة، نسبة التشبع (%)، قيمة/لمعان (%) | أدوات اختيار الألوان في فوتوشوب وفيمغا |
| CMYK | سيان %، ماجنتا %، أصفر %، أسود/أساس % | طباعة، ما قبل الطباعة |
| OKLCH | نسبة الخفة، اللون المركزي، اللون الأساسي | مجموعات ألوان وحدة الألوان في CSS الحديثة (Modern CSS Color Module) رقم 4 |
تباين إمكانية الوصول
يحدد WCAG 2.2 نسب التباين الدنيا بين النص والخلفية:
- معدل AA للنص العادي: ≥ 4.5:1
- نمط الخط AA للنص الكبير (خط عريض بحجم 18 أو 14 نقطة): نسبة خط عريض إلى خط رفيع ≥ 3:1
- مقياس AAA للنص العادي: ≥ 7:1
يحسب أداة الاختيار نسبة التباين بين الأبيض والأسود في الوقت الفعلي. إذا كان لون الخلفية المخصص أهمية كبيرة، فاستخدم أداة متخصصة لفحص التباين لكل زوج من الألوان.
نصائح
- يُعد النمط السداسي (HEX) القيمة الافتراضية في معظم أدوات التصميم، لكن النمط السداسي القصير المكوَّن من ثلاثة أرقام (مثل
#F60) يعادل#FF6600وليس#F06060. - يُعدّ نظام HSL أكثر ملاءمة لبناء البالينات اللونية: قم بقفل اللون الأساسي، ثم اختلف في درجات السطوع للحصول على ألوان ونغمات مختلفة. لا يمكن التحويل المثالي بين تنسيقات CMYK وRGB؛ إذ يعتمد طباعة تنسيق CMYK على ملف إعدادات الطابعة المستخدم. يجب دائمًا إجراء الطباعة التحققية على ورق حقيقي. إذا كنت تصمم باستخدام لغة CSS الحديثة، فاحرص على استخدام تنسيق OKLCH لتحقيق خطوات إضاءة متجانسة من الناحية الإدراكية.
الأسئلة الشائعة
يُطبّق برنامج فوتوشوب ملفًا لملف الألوان (عادةً sRGB للعرض على الشاشة، والذي غالبًا ما يختلف عن ملف الألوان المستخدم في الطباعة). تقوم متصفحات الويب بعرض قيم HEX غير الموسومة على أنها sRGB. وإذا كان المستند مُعدَّلًا إلى تنسيق Adobe RGB أو ProPhoto، فإن قيم البكسل تبقى متطابقة، لكن اللون المُدرَك يتغير.
نعم، وكلاهما يصف اللون الأحمر الكامل، حيث يمثل اللون الأحمر القيمة 255، بينما تمثل اللونان الأخضر والأزرق القيمتين 0 و1 على التوالي. أما HEX فهو مجرد نظام ترميز سداسي عشري مكوّن من رقمين لكل قيمة قناة تتراوح بين 0 و255.
اختر لونك الأساسي، ثم انتقل إلى نظام HSL، وقم بتغيير درجة السطوع بخطوات تبلغ 10٪ مع الحفاظ على اللون الأساسي والتشبع ثابتين؛ ستحصل على سلسلة منسقة من الألوان والدرجات التي تتجمع جميعها حول نفس اللون الأساسي.
تُحفظ الألوان المستخدمة حديثًا في التخزين المحلي لمتصفحك، مما يضمن بقائها عند تجديد الصفحة. لا يتم إرسال أي بيانات إلى الخادم، ويمكنك مسح سجل اللوحات بأي وقت.