دليل شامل: كيف تحوّل الألوان بين HEX وRGB وHSL أونلاين مجانًا

لماذا بحاجة إلى تحوّل صيغ الألوان؟

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

الفرق بين HEX وRGB وHSL وCMYK

صيغة HEX تمثل اللون بستة أرقام سداسية عشرية (مثل #3B82F6) تنقسم لثلاث قيم متتالية للأحمر والأخضر والأزرق. صيغة RGB تكتب نفس القيم كأرقام عشرية من 0 إلى 255، مع إمكانية إضافة قيمة شفافية (Alpha) في صيغة RGBA. أما HSL فبتوصف اللون بطريقة أقرب لتفكير الإنسان: درجة اللون (Hue) من 0 إلى 360، والتشبع (Saturation) والإضاءة (Lightness) كنسب مئوية، وهذا يسهّل عليك تعدّل ظل اللون بدون ما تغيّر نوعه الأساسي. أما صيغة CMYK فبتُستخدم غالبًا في الطباعة وبتعتمد على نسب الحبر السماوي والأرجواني والأصفر والأسود.

خطوات تحويل اللون

الأداة تحوّل اللون بين كل الصيغ فورًا:

نصائح عملية

قبل أن تستخدم اللون في مشروعك، انتبه إلى هذه النقاط:

• تأكد من نسبة التباين بين لون الخلفية ولون النص لكي تحافظ على وضوح القراءة.
• إذا بحاجة إلى شفافية جزئية، استخدم RGBA أو HSLA بدلاً من أن تضيف طبقة شفافية منفصلة يدويًا.
• خزّن اللون الأساسي كمتغيّر CSS (Custom Property) لكي يمكنك أن تعدّله في مكان واحد لكل الموقع.
• إذا كان المشروع موجّهًا للطباعة، حوّل اللون لصيغة CMYK بدري لكي تتجنب فروق الألوان بعد الطباعة.

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

• تصميم واجهة مستخدم بألوان متسقة عبر كل الصفحات.
• كتابة متغيرات ألوان في CSS أو Sass بصيغة موحدة.
• تحويل لون شعار من صيغة شاشة (RGB) لصيغة طباعة (CMYK).
• مطابقة لون مأخوذ من صورة مع نظام تصميم (Design System) موجود بالفعل.

لماذا تختار Fastols؟

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