محدد ألوان HEX

HEX colour picker

الإعدادات المسبقة الشائعة

اختر لونًا بأداة الألوان المرئية في متصفحك أو أدخل قيمة HEX من ثلاثة أو ستة محارف. يحول المحدد اللون إلى RGB وHSL وقيمة CMYK تقريبية، ثم يحسب السطوع النسبي ونسب التباين الدقيقة مع الأبيض والأسود. تتم معالجة اللون داخل هذا المتصفح ولا يضاف إلى رابط خطوات الأداة.

كيفية اختيار لون

  1. 1

    ابدأ بلون جاهز أو أداة الألوان

    اختر أحد الألوان النموذجية أو افتح أداة اختيار الألوان الأصلية في متصفحك.

  2. 2

    أدخل قيمة HEX دقيقة

    اكتب ثلاثة محارف مثل #F60 أو ستة مثل #FF6600؛ وستوسع الأداة الصيغة المختصرة بشكل صحيح.

  3. 3

    راجع الصيغ المحسوبة

    اطلع في مكان واحد على HEX وRGB وHSL وCMYK التقريبي والسطوع النسبي بنظام sRGB.

  4. 4

    افحص التباين وانسخ

    قارن اللون بالأبيض والأسود، ثم انسخ قيمة HEX أو RGB أو HSL التي تحتاج إليها.

صيغ الألوان في الاستخدام العملي

كل نموذج لوني يجيب عن سؤال مختلف قليلًا.

مرجع الصيغ

الصيغة المكوّنات أين تُستخدم
HEX #RRGGBB CSS، أدوات التصميم، أدلة الهوية البصرية
RGB الأحمر 0–255، الأخضر 0–255، الأزرق 0–255 CSS rgb()، محررات الصور
HSL تدرج اللون 0–360°، التشبع %، الإضاءة % CSS hsl()، أنظمة التصميم
CMYK السماوي %، الأرجواني %، الأصفر %، المفتاح/الأسود % الطباعة، ما قبل الطباعة

تباين الوصولية

تحدد WCAG 2.2 نسب التباين الدنيا بين النص والخلفية:

  • AA للنص العادي: ≥ 4.5:1
  • AA للنص الكبير (18 نقطة أو 14 نقطة عريض): ≥ 3:1
  • AAA للنص العادي: ≥ 7:1

يحسب المحدد النسبة مع الأبيض والأسود انطلاقًا من السطوع النسبي في sRGB. لا تثبت هاتان النسبتان أن لون مقدمة آخر سيكون مقروءًا؛ استخدم فاحص تباين مخصصًا لكل زوج دقيق.

نصائح

  • HEX هو الخيار الافتراضي في معظم أدوات التصميم، لكن الصيغة المختصرة من ثلاثة محارف (#F60) تعادل #FF6600 وليس #F06060.
  • انسخ HSL عندما تريد تعديل تدرج اللون أو التشبع أو الإضاءة في CSS أو في أداة تصميم.
  • قيمة CMYK تقدير رياضي بسيط. تعتمد نتيجة الطباعة على المطبعة والحبر والورق وملف اللون، لذلك استخدم برنامجًا يدعم إدارة الألوان ونسخة تجريبية قبل الإنتاج.
  • تحقق نسبة 4.5:1 على الأقل معيار WCAG AA للنص العادي، لكن حجم الخط ووزنه وزوج ألوان المقدمة والخلفية الدقيق تظل عوامل مهمة.

الأسئلة الشائعة

يطبق Photoshop ملف تعريف لونيًا، غالبًا sRGB للشاشة وملفًا مختلفًا للطباعة. أما المتصفحات فتعرض قيم HEX غير الموسومة بوصفها sRGB. إذا كان المستند مضبوطًا على Adobe RGB أو ProPhoto فستبقى قيم البكسل نفسها، لكن اللون المدرك سيتغير.

نعم، كلاهما يصف الأحمر الكامل، حيث قيمة الأحمر 255 وقيمتا الأخضر والأزرق 0. صيغة HEX ليست إلا تمثيلًا سداسيًا عشريًا من رقمين لكل قيمة قناة بين 0 و255.

اختر اللون الأساسي وانسخ قيمة HSL. في CSS أو أداة التصميم، ثبّت تدرج اللون والتشبع وعدّل الإضاءة. افحص كل زوج من ألوان المقدمة والخلفية بدل افتراض أن اللوحة كلها مقروءة.

يُحفظ اللون الحالي في علامة تبويب المتصفح هذه لمدة تصل إلى 30 دقيقة كي يبقى متاحًا بين الخطوات الموجهة. لا يضاف إلى الرابط ولا يرسل عبر Livewire. يؤدي البدء من جديد أو إغلاق علامة التبويب أو مسح بيانات المتصفح أو انتهاء المدة إلى حذفه.

أدوات ذات صلة