محول الألوان – من HEX إلى RGB و HSL و HSV و CMYK

كيفية استخدام محول الألوان

1اكتب أو الصق لوناً بأي صيغة — على سبيل المثال #0EA5E9 أو rgb(14 165 233) أو hsl(199 89% 48%) أو اسم CSS مثل tomato — أو استخدم منتقي الألوان.

2اقرأ نفس اللون بصيغ HEX و RGB و HSL و HSV و CMYK وانسخ الصيغة التي تحتاجها.

3تحقق من نسبة التباين مع الأبيض والأسود لمعرفة ما إذا كان النص بهذا اللون قابلاً للقراءة.

4انقر على أي عينة لونية في مقياس التدرجات والظلال لاستكشاف النسخ الأفتح والأغمق.

تحويل الألوان بين جميع الصيغ الشائعة

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

الميزات

أي صيغة إدخال: HEX (3، 4، 6 أو 8 أرقام)، RGB/RGBA، HSL/HSLA، HSV/HSB، CMYK، الأرقام الثلاثية المجردة، وأسماء الألوان في CSS.
جميع صيغ الإخراج في نفس الوقت: HEX، RGB، HSL، HSV، و CMYK، مع زر نسخ لكل صيغة.
دعم الشفافية — يتم الاحتفاظ بقيم ألفا (alpha) في HEX8، RGBA، و HSLA.
منتقي ألوان مدمج لاختيار الألوان بصرياً.
فحص التباين (WCAG) مقابل اللونين الأبيض والأسود، مع عرض نتائج مستوى AA للنصوص العادية والكبيرة.
تدرجات الألوان الفاتحة والداكنة بإضاءة تتراوح من 10% إلى 90%؛ انقر على أي عينة لونية لاستخدامها.

شرح صيغ الألوان

HEX — #RRGGBB بالنظام السداسي عشري، وهي الصيغة الأكثر شيوعاً في تصميم الويب. يمكن إضافة زوج رابع اختياري لتحديد مستوى الشفافية.
RGB — الأحمر والأخضر والأزرق بقيم تتراوح من 0 إلى 255؛ وهي الطريقة الفعلية التي تستخدمها الشاشات لإنتاج الألوان.
HSL — درجة اللون (موقعه على عجلة الألوان)، التشبع (كثافة اللون)، والإضاءة. يسهل تعديلها يدوياً: قم بتغيير قيمة الإضاءة فقط للحصول على درجات أفتح أو أغمق من اللون نفسه.
HSV / HSB — درجة اللون، التشبع، والقيمة (السطوع)، وهي الصيغة المستخدمة في معظم أدوات اختيار الألوان في برامج التصميم.
CMYK — نسب أحبار السماوي، الأرجواني، الأصفر، والأسود المستخدمة في الطباعة.

مثال

اللون الأزرق السماوي #0EA5E9 يعادل rgb(14, 165, 233)، وhsl(199, 89%, 48%)، وhsv(199, 94%, 91%)، وتقريباً cmyk(94%, 29%, 0%, 9%). تبلغ نسبة تباينه مع اللون الأبيض حوالي 2.8:1 — وهي نسبة جيدة للعناوين الكبيرة والأيقونات، لكنها منخفضة جداً للنصوص العادية التي تتطلب نسبة 4.5:1. أما مع اللون الأسود فتصل النسبة إلى حوالي 7.6:1، مما يجعله يجتاز اختبار التباين بسهولة.

نصائح للتعامل مع الألوان

صمم لوحات الألوان بنظام HSL. حافظ على ثبات تدرج اللون والتشبع وغيّر الإضاءة لإنشاء حالات متناسقة للأزرار والخلفيات والحدود.
تحقق من التباين مبكراً. العديد من ألوان العلامات التجارية فاتحة جداً للنصوص على خلفية بيضاء؛ استخدم درجة داكنة من التدرج اللوني للنصوص، واحتفظ باللون الأصلي للعناصر البارزة.
لا تعتمد على اللون وحده لإيصال المعنى — أضف أيقونات أو نصوصاً توضيحية لمساعدة الأشخاص الذين يعانون من ضعف في تمييز الألوان.
توقع اختلاف الألوان في الطباعة. ألوان RGB الزاهية، وخاصة درجات الأزرق والأخضر الفاقعة، غالباً ما تبدو باهتة أكثر في نظام CMYK.

هل تتعامل مع الصور أيضاً؟ تقوم أداة محول الصور بتغيير الصيغ بين JPG وPNG وWebP. لتشفير صورة صغيرة أو أيقونة لاستخدامها في CSS، استخدم أداة Base64.

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

كيف يمكنني تحويل HEX إلى RGB؟

يتكون لون HEX من ثلاثة أزواج من الأرقام الست عشرية للأحمر والأخضر والأزرق. حوّل كل زوج من النظام 16 إلى النظام 10: في #FF8800، FF = 255، و 88 = 136، و 00 = 0، ليصبح اللون rgb(255, 136, 0). في الصيغة المختصرة من ثلاثة أرقام مثل #F80، يُضاعف كل رقم أولاً.

ما الفرق بين HSL و HSV (HSB)؟

كلاهما يصف اللون من خلال التدرج اللوني (0–360°) والتشبع، لكنهما يختلفان في القيمة الثالثة. في HSL، الإضاءة بنسبة 50% تعني اللون النقي، و0% أسود، و100% أبيض. أما في HSV/HSB، فالقيمة أو السطوع بنسبة 100% تعني اللون النقي بتشبع كامل، و0% أسود. غالباً ما تستخدم تطبيقات التصميم مثل Photoshop و Figma نظام HSB في منتقي الألوان، بينما تستخدم CSS نظام HSL.

هل تحويل CMYK دقيق للطباعة؟

قيم CMYK هي تحويل رياضي من RGB، وتُعد مفيدة كنقطة بداية. لكن الطباعة الفعلية تعتمد على الطابعة والحبر والورق، والتي تحددها ملفات تعريف الألوان ICC. لأعمال الطباعة الاحترافية، قم بإجراء التحويل داخل برنامج التصميم الخاص بك باستخدام ملف تعريف طابعتك.

ماذا تعني نسب التباين؟

تقيس إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) التباين بين النص والخلفية من 1:1 إلى 21:1. يحتاج النص العادي إلى نسبة 4.5:1 على الأقل لاجتياز المستوى AA، بينما يحتاج النص الكبير (حوالي 24 px، أو 18.7 px عريض) إلى نسبة 3:1. توضح أداة الفحص ما إذا كان اللون يجتاز الاختبار على خلفية بيضاء وسوداء.

ما هي صيغ الإدخال المدعومة؟

صيغة HEX بـ 3 أو 4 أو 6 أو 8 أرقام (مع أو بدون #)، و rgb() و rgba()، و hsl() و hsla()، و hsv() أو hsb()، و cmyk()، وثلاثة أرقام عادية مثل 255 136 0، وأسماء ألوان CSS مثل rebeccapurple. يُدعم كل من النمط المفصول بفواصل والنمط الحديث المفصول بمسافات، بما في ذلك ألفا (alpha) مثل rgb(14 165 233 / 50%).