مقدمة
يساعد محول الألوان المصممين والمطورين على التحويل بين HEX وHEXA وRGB وRGBA وHSL وHSLA وHSV وHSVA. يفيد عند الانتقال بين أدوات التصميم وCSS وUI tokens وكود Canvas وتجارب الألوان السريعة.
طريقة الاستخدام
أدخل لونًا بصيغة HEX أو RGB أو HSL أو HSV، أو عدّل عناصر التحكم. يتم تحديث كل الصيغ فورًا. استخدم المعاينة للتحقق من النتيجة، وعدّل alpha للشفافية، ثم انسخ الصيغة المناسبة لـ CSS أو الكود.
المميزات
- •تحويل بين HEX وHEXA وRGB وRGBA وHSL وHSLA وHSV وHSVA
- •معاينة مباشرة مع دعم الشفافية
- •قيم CSS جاهزة للنسخ
- •مفيد لتصميم الواجهات وتطوير الويب وتنظيم tokens
- •أمثلة وسواتشات سريعة
- •دون تثبيت أو تسجيل
لماذا صيغ الألوان مهمة؟
لكل صيغة دور مختلف. HEX مختصر وشائع في التصميم وCSS. RGB يمثل قنوات الشاشة. HSL أسهل للتعديل البشري لأنه يعتمد على اللون والتشبع والإضاءة. الصيغ ذات alpha تضيف الشفافية.
اختيار الصيغة المناسبة
استخدم HEX للقيم الثابتة القصيرة، وRGB/RGBA للقنوات البرمجية أو الطبقات الشفافة، وHSL/HSLA لتوليد درجات أفتح أو أغمق في أنظمة التصميم.
التباين وإمكانية القراءة
تحويل اللون لا يضمن قراءة النص عليه. تحقق من التباين في النصوص والأزرار والحالات المهمة. إذا كان التباين ضعيفًا، عدّل الإضاءة أو التشبع أو الخلفية.
Alpha وHEX من 8 خانات
يضيف HEX من 8 خانات قناة شفافية إلى اللون. في #3366CC80 تمثل آخر خانتين الشفافية.
دليل صيغ الألوان
مقارنة سريعة بين الصيغ الشائعة.
| الصيغة | مثال | أفضل استخدام |
|---|---|---|
| HEX | #3366CC | ألوان CSS ثابتة |
| HEXA | #3366CC80 | ألوان ثابتة مع شفافية |
| RGB | rgb(51, 102, 204) | قنوات لونية برمجية |
| RGBA | rgba(51, 102, 204, 0.5) | طبقات شفافة وظلال |
| HSL | hsl(220, 60%, 50%) | تعديلات الثيم |
| HSV | hsv(220, 75%, 80%) | سير عمل منتقي الألوان |
قيم Alpha شائعة
مرجع سريع بين الشفافية وHEX من 8 خانات.
| العتامة | Alpha HEX تقريبي | الاستخدام |
|---|---|---|
| 100% | FF | معتم تمامًا |
| 75% | BF | طبقة قوية |
| 50% | 80 | نصف شفاف |
| 25% | 40 | طبقة خفيفة |
| 10% | 1A | تدرج خفيف جدًا |
الأسئلة الشائعة
ما الفرق بين HEX وRGB وHSL؟
HEX صيغة سداسية مختصرة، وRGB يستخدم قنوات الأحمر والأخضر والأزرق، وHSL يستخدم اللون والتشبع والإضاءة.
هل يدعم الشفافية؟
نعم. يدعم RGBA وHSLA وHSVA وHEXA من 8 خانات.
هل أستطيع استخدام النتائج في CSS؟
نعم. يمكن استخدامها في color وbackground-color وborder-color والظلال والتدرجات.
ما الأفضل لأنظمة التصميم؟
HEX شائع للقيم الثابتة، وHSL مفيد لتوليد درجات متنوعة.
هل يغير التحويل شكل اللون؟
القيم المكافئة يجب أن تظهر متشابهة، لكن الشفافية وإعدادات الشاشة قد تؤثر في الإدراك.