محوّل الألوان

حوّل بين HEX وRGB وHSL وHSV وCMYK. معاينة مباشرة. مدقق التباين WCAG لإمكانية الوصول. لا شيء يغادر متصفحك.

كيف تعمل محوّل الألوان

محوّل الألوان يُترجم أي لون بين تنسيقات HEX وRGB وHSL وHSV وCMYK فورًا أثناء الكتابة. يُجري أيضًا فحص تباين WCAG بين أي لونين تختارهما، مُظهرًا نسبة التباين ونتيجة الاجتياز والإخفاق وفق AA/AAA للنص العادي والنص الكبير ومكوّنات واجهة المستخدم. جميع الحسابات تجري في المتصفح دون إرسال أي بيانات؛ لا شيء تكتبه يغادر جهازك.

فهم كيف يبدو نفس اللون عبر نماذج الألوان المختلفة مفيد في عمليات تسليم التصميم. قد يُحدد مصمم لون علامة تجارية كـ HEX #1A4F8C؛ يحتاج مطور CSS إلى مكافئه HSL للثيمات؛ فريق الطباعة يحتاج إلى توزيع CMYK. تُجري هذه الأداة التحويل في جميع الاتجاهات في وقت واحد حتى لا تحتاج إلى تشغيل محوّلات متعددة منفصلة.

كتبه Bastien Sulyan

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

اكتب قيمة HEX أو انقر على عينة لون أو أدخل قيم RGB أو HSL أو HSV أو CMYK في الحقول المعنية.
تتحدث جميع تمثيلات التنسيقات الأخرى فورًا لتُظهر اللون المكافئ.
لإجراء فحص التباين، حدد لون المقدمة ولون الخلفية باستخدام منتقيَي اللونين.
اقرأ نسبة تباين WCAG وشارات الاجتياز/الإخفاق لمستويَي الامتثال AA وAAA.
انسخ أي قيمة لون باستخدام أيقونة النسخ بجانب كل حقل.

حالات الاستخدام الشائعة

مصمم واجهة مستخدم يحوّل رمز HEX لعلامة تجارية إلى HSL لكتابة خاصية CSS مخصصة لنظام ثيمات.
مطور ويب يتحقق من نسبة التباين بين لون النص والخلفية قبل شحن مكوّن للتأكد من امتثاله لـ WCAG AA.
مصمم طباعة يستقبل لون HEX من الويب ويحتاج إلى مكافئه CMYK لمطابقته في كتيّب مطبوع.
مطور يحتاج إلى توزيع RGB لرمز تصميم لتمرير قيم القنوات الفردية إلى دالة رسم Canvas.

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

هل تدعم الأداة قيم ألفا للشفافية؟

المحوّل الحالي يعمل مع الألوان المعتمة بالكامل أي ألفا = 1. HEXA بثمانية أرقام hex وRGBA ليست ضمن النطاق الحالي. للشفافية، اضبط قناة ألفا في CSS الخاص بك بشكل منفصل باستخدام صيغة rgba() أو oklch().

هل تُخزَّن الألوان التي أُدخلها أو تُرسَل إلى أي مكان؟

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

ما مستويات تباين WCAG التي يدعمها الفاحص؟

تُقدّم الأداة تقارير وفق معايير نجاح WCAG 2.1: يتطلب AA نسبة تباين لا تقل عن 4.5:1 للنص العادي أي أقل من 18 نقطة أو 14 نقطة عريضة و3:1 للنص الكبير ومكوّنات واجهة المستخدم. يتطلب AAA 7:1 للنص العادي و4.5:1 للنص الكبير.

لماذا تختلف قيم CMYK بين هذه الأداة وبرامج التصميم المحترف؟

تحويل RGB إلى CMYK الذي تُجريه هذه الأداة صيغة رياضية بلا ملف تعريف ألوان. تُطبّق تطبيقات التصميم المحترف ملفات تعريف ألوان ICC تُراعي زيادة نقطة الحبر وخصائص الركيزة. قيم CMYK هنا مفيدة للتقريب؛ للطباعة الإنتاجية، طبّق ملف تعريف المطبعة دائمًا في برنامج متخصص.

هل يمكنني تحويل اسم لون CSS مثل 'cornflowerblue' هنا؟

لا تُكتب أسماء الألوان المسماة في CSS مباشرةً في حقول المحوّل. لتحويل لون مُسمى، ابحث أولًا عن قيمة HEX الخاصة به في مرجع CSS فـ cornflowerblue هي #6495ED ثم الصق تلك القيمة في حقل HEX لرؤية جميع التنسيقات الأخرى.

هل تعمل الأداة دون اتصال بعد تحميل الصفحة؟

نعم. تحويل الألوان حساب رياضي لا يعتمد على أي مكوّن خارجي. بمجرد وجود الصفحة في ذاكرة التخزين المؤقت للمتصفح يمكنك فتحها دون اتصال بالشبكة وستعمل جميع التحويلات بشكل طبيعي.

أدوات ذات صلة

أبقِ كل شيء محليًا, استكشف الأدوات التكميلية.

جميع أدوات المطوّرين