ما هي محول الألوان؟
محوّل الألوان هو أداة لا غنى عنها لمطوري الويب ومصممي الجرافيك. يوفر تحولاً فورياً ودقيقاً بين HEX و RGB و HSL مع معاينة حية وفحص تباين WCAG وسجل تحويلات.
متى تستخدم هذه الآلة الحاسبة
- عند تحويل مواصفات ألوان المصمم من Figma أو Sketch إلى CSS.
- عند بناء نظام تصميم وتحتاج قيم ألوان متسقة.
- عند إنشاء لوحات ألوان باستخدام HSL.
- عند التحقق من تباين الألوان لتوافق إمكانية الوصول.
- عند تحويل قيم ألوان موجودة لتنسيق مختلف.
- عند تصحيح مشاكل ألوان CSS.
الخطوات:
- أدخل قيمة لون بأي تنسيق — HEX أو RGB أو HSL.
- حدد تنسيق الإدخال باستخدام تبويبات HEX / RGB / HSL.
- شاهد القيم المحوّلة في جميع التنسيقات الثلاثة مع المعاينة الحية.
- استخدم زر النسخ لأي تنسيق لنسخ القيمة إلى الحافظة.
- تحقق من شارات تباين WCAG للتأكد من المطابقة لإمكانية الوصول.
الصيغة
HEX → RGB: تقسيم #RRGGBB إلى قيم عشرية
RGB → HSL: توحيد قيم RGB ← إيجاد درجة اللون/التشبع/الإضاءة
HSL → RGB: التحويل عبر صيغ الكروما
HEX: #RRGGBB (0-255 لكل قناة)
RGB: rgb(R, G, B) (0-255)
HSL: hsl(H°, S%, L%) (H: 0-360, S/L: 0-100)
حالات الاستخدام
- تحويل قيم ألوان CSS
- إنشاء مخططات ألوان من ألوان أساسية
- مطابقة ألوان نظام التصميم
- فهم علاقات الألوان من خلال HSL
الفوائد الرئيسية
- تحويل الألوان فوراً بين HEX و RGB و HSL بدقة مطلقة
- معاينة لون حية تتحدث أثناء الكتابة
- فحص التوافق مع WCAG مع شارات تلقائية
- الوصول إلى سجل تحويلات يخزن ألوانك الأخيرة
- نسخ أي تنسيق بنقرة واحدة واستخدام أداة القطرة
- يعمل بالكامل في متصفحك بدون إرسال بيانات
نصائح احترافية
- استخدم HSL عند إنشاء تنويعات لونية — الحفاظ على التشبع والإضاءة ثابتين.
- استخدم HEX دائماً لـ CSS و HTML لأنه الأكثر دعماً.
- تحقق من اختيارات ألوانك ضد متطلبات تباين WCAG.
- عند بناء نظام تصميم، حدد لوحة الألوان الأساسية في HSL.
- تذكر أن قيم HEX غير حساسة لحالة الأحرف.
الأخطاء الشائعة التي يجب تجنبها
- نسيان بادئة # عند إدخال ألوان HEX
- استخدام قيم قنوات RGB أعلى من 255 أو أقل من 0
- خلط نطاق درجة اللون HSL مع نطاق قناة RGB
- افتراض أن إضاءة HSL و سطوع RGB متساويتان
شرح المصطلحات الأساسية
- HEX: ترميز لون سداسي عشري مستخدم في CSS وتصميم الويب، مكتوب كـ #RRGGBB.
- RGB: نموذج ألوان الأحمر-الأخضر-الأزرق حيث كل لون محدد بثلاث قيم عددية (0-255).
- HSL: نموذج ألوان درجة اللون-التشبع-الإضاءة.
- مساحة الألوان: نموذج رياضي لتنظيم وتمثيل الألوان.
- نسبة تباين WCAG: مقياس عددي للفرق في السطوع بين النص العلوي وألوان الخلفية.
مفاهيم ذات صلة
- محوّل وحدات CSS: التحويل بين px و rem و em و vw.
- مشفر/مفكك Base64: تشفير وفك تشفير نصوص Base64.
- منسق JSON: تنسيق وتحقق من بيانات JSON.
- مجرب التعبيرات النمطية: اختبار التعبيرات النمطية على نص نموذجي
- مشفر/مفكك URL: تشفير وفك تشفير نصوص URL الآمنة.
مثال
الإدخال: #FF5733 (HEX) → RGB: rgb(255, 87, 51) → HSL: hsl(11, 100%, 60%). الإدخال: hsl(200, 50%, 50%) → RGB: rgb(64, 149, 191) → HEX: #4095BF.
تفسير نتائجك
يعرض المحوّل لونك في جميع التنسيقات الثلاثة. HEX هو الأكثر شيوعاً في تطوير الويب. RGB يتحكم مباشرة في قنوات اللون. HSL هو الأكثر طبيعية للبشر.
تعرض المعاينة اللون الفعلي، وتشير شارات تباين WCAG إلى المطابقة لمعايير إمكانية الوصول.