محول الألوان
مُحول ألوان مجاني عبر الإنترنت. احول بين التنسيقات HEX، RGB، HSL، وCMYK للألوان فورًا مع معاينة مباشرة.
قم بالتحويل بين تنسيقات الألوان HEX، RGB، HSL، و CMYK فورًا.
#3b82f6
مُحول الألوان عبر الإنترنت المجاني — HEX، RGB، HSL، CMYK
قم بتحويل الألوان فورًا بين صيغ HEX، RGB، HSL، و CMYK. يوفر هذا المُحول المجاني لمحة مباشرة وتحويلًا ثنائي الاتجاه لتصميم الويب، والطباعة، ومجالات التصميم الجرافيكي.
ما هو مُحول الألوان؟
يقوم مُحول الألوان بتحويل القيم اللونية بين الصيغ المختلفة المستخدمة في التصميم الرقمي والطباعة. يستخدم مطوري الويب HEX و RGB، بينما يفضل المصممون العمل في HSL لتعديل الألوان بطريقة أكثر سهولة، والطباعة تعتمد على CMYK.
بدلاً من حساب التحويلات يدويًا أو فتح أداة تصميم، يوفر هذا المُحول جميع الصيغ في وقت واحد — مع مساحة معاينة مباشرة حتى تتمكن من رؤية اللون الذي تعمل معه بالضبط.
كيفية استخدام هذا مُحول الألوان
- أدخل لونًا — اكتب قيمة HEX أو أدخل أرقامًا RGB، HSL، أو CMYK.
- انظر إلى جميع الصيغ — يتم تحديث كل صيغة أخرى فورًا.
- نسخ ما تحتاجه — انقر على زر النسخ بجانب أي صيغة.
- استخدم المعاينة — تظهر مساحة اللون اللون المحدد مع ملصق التباين.
الميزات الرئيسية
| الميزة | الفائدة |
|---|---|
| دعم 4 صيغ | HEX، RGB، HSL، CMYK — جميعها في وقت واحد |
| تحويل ثنائي الاتجاه | تحرير أي صيغة وتحديث بقية الصيغ |
| معاينة مباشرة | رؤية اللون المحدد مع ملصق HEX |
| أزرار نسخ لكل صيغة | نسخ بضغط زر واحد لكل صيغة |
| CMYK جاهز للطباعة | الحصول على قيم CMYK دقيقة لتطوير الطباعة |
فهم صيغ الألوان
HEX
تستخدم ملاحظة الألوان الست عشرية ستة شخصيات (0-9، A-F) لتمثيل قيم الأحمر، الأخضر، والأزرق:
#FF0000= أحمر بدرجة كاملة#3B82F6= أزرق Tailwind CSS blue-500
شائعة في CSS، HTML، والأدوات التصميمية. تبدأ دائمًا بـ #.
RGB (الأحمر، الأخضر، الأزرق)
نموذج الألوان الجمعي حيث يتراوح كل قناة من 0 إلى 255:
rgb(255, 0, 0)= أحمر نقيrgb(59, 130, 246)= أزرق Tailwind blue-500
تُستخدم في CSS (rgb() دالة) وغالبًا في السياقات البرمجية.
HSL (اللون، التشبع، السطوع)
نموذج أكثر سهولة لتعديل الألوان:
- اللون (0-360): موقع على عجلة الألوان (0=أحمر، 120=أخضر، 240=أزرق)
- التشبع (0-100%): شدة اللون (0%=رمادي، 100%=لون كامل)
- السطوع (0-100%): السطوع (0%=أسود، 50%=طبيعي، 100%=أبيض)
تُستخدم في CSS (hsl() دالة) وتفضّلها المصممون لخلق مجموعات ألوان.
CMYK (البرتقالي، الوردي، الأصفر، الأسود)
نموذج ألوان ناقص يستخدم في إنتاج الطباعة:
- كل قيمة تتراوح من 0% إلى 100%
- تمثل تغطية الحبر على الورق
- لا يمكن استخدامها مباشرة في CSS (تستخدم المتصفحات RGB داخليًا)
ضرورية لتجهيز التصاميم للطباعة المهنية.
مقارنة صيغ الألوان
| الصيغة | حالة الاستخدام | المثال | المدى |
|---|---|---|---|
| HEX | CSS عبر الإنترنت، HTML | #3B82F6 |
00-FF لكل قناة |
| RGB | CSS عبر الإنترنت، البرمجة | rgb(59, 130, 246) |
0-255 لكل قناة |
| HSL | التصميم، CSS | hsl(217, 91%, 60%) |
H: 0-360، S/L: 0-100% |
| CMYK | إنتاج الطباعة | cmyk(76%, 47%, 0%, 4%) |
0-100% لكل قناة |
حالات الاستخدام العملية
تصميم الويب
قم بنسخ القيمة HEX أو rgb() مباشرة إلى CSS الخاص بك. HSL مثالية لإنشاء مسويات ألوان (مثلاً، تغيير السطوع للحالات المطروحة).
أنظمة التصميم
قم بتحويل ألوان العلامة التجارية بين الصيغ. يعطي المصمم لك HSL من Figma — تحتاج إلى HEX لـ CSS. افعل ذلك بنقرة واحدة.
إنتاج الطباعة
قم بتحويل الألوان من الشاشة إلى CMYK قبل إرسالها إلى المطبعة. لاحظ أن بعض الألوان الزاهية في RGB لا يمكن إنتاجها تمامًا في CMYK (المدى أصغر).
الوصولية
استخدم قيمة السطوع في HSL لفحص ما إذا كان اللون يلبي متطلبات التباين WCAG. الألوان ذات السطوع قريب من 50% تميل إلى أن تكون ذات تباين متصور أعلى.
نصائح العمل مع الألوان
| النصيحة | التفسير |
|---|---|
| استخدم HSL لتكوين المجموعات | ثبت اللون، واقسم التشبع والسطوع لخلق مجموعات ألوان متناغمة. |
| HEX القصيرة تعمل | #3BF هي اختصار لـ #33BBFF. هذا المحول يدعمها. |
| تأكد من استخدام الألوان المناسبة | تحقق من توافق الألوان مع جميع الأجهزة والظروف. |
الأسئلة الشائعة
ما الفرق بين صيغة CMYK وRGB؟
صيغة CMYK تُستخدم في الطباعة، بينما صيغة RGB تُستخدم في الشاشات. CMYK تعتمد على الحبر، بينما RGB تعتمد على الضوء.
هل يتم تخزين بياناتي الشخصية عند استخدام هذا المُحول؟
لا. لا يتم تخزين أي بيانات شخصية أو معلومات عن الألوان التي تستخدمها عند استخدام هذا المُحول المجاني.