محول الألوان مجاناً

كيف تحول الألوان

1. أدخل قيمة لون HEX أو RGB أو HSL
2. الصيغ الأخرى تتحدّث تلقائياً
3. اضغط على الألوان الجاهزة لاستخدام سريع

HEX وRGB وHSL — ما هي كل واحدة

الثلاثة تصف نفس الألوان، بس تعبّر عنها بطرق مختلفة، وكل واحدة مريحة لمهمة مختلفة.

HEX

رمز ست عشري كل زوج من حروفه يمثّل قناة الأحمر ثم الأخضر ثم الأزرق: فـ #3B82F6 يعني 3B أحمر و82 أخضر وF6 أزرق. وكل زوج يتراوح من 00 (لا شيء) إلى FF (كامل). أما الاختصار بثلاثة حروف مثل #F00 فيتوسّع بمضاعفة كل حرف — أي أنه يعني #FF0000، الأحمر الصافي.

RGB

نفس القنوات الثلاث لكن بأرقام عشرية من 0 إلى 255. أسهل بالتعامل داخل الكود لأنك تقدر تجمع وتضرب وتستوفي القيم مباشرة. أما صيغة rgba() فتضيف قناة شفافية من 0 (شفاف تماماً) إلى 1 (معتم تماماً).

HSL

نموذج مختلف: درجة اللون (Hue) كزاوية على عجلة الألوان من 0 إلى 360، والتشبّع (Saturation) كنسبة مئوية للكثافة، والإضاءة (Lightness) كنسبة من الأسود إلى الأبيض. وHSL هي الصيغة التي يلجأ لها المصممون عند بناء لوحة ألوان، لأنك تقدر تثبّت درجة اللون والتشبّع وتغيّر الإضاءة فقط لتوليد مجموعة متناسقة من الدرجات — وهذا شي يحتاج تخميناً لو اشتغلت بـ HEX.

ليش نحوّل بينها؟

• دليل الهوية يعطيك HEX، والكود يحتاج RGB. أي شفافية بـ CSS تتطلب rgba()، فلون العلامة التجارية بصيغة HEX لازم يتحوّل قبل ما تقدر تخفّف شفافيته.
• تحتاج درجة أفتح أو أغمق. حوّل لـ HSL، عدّل نسبة الإضاءة، وارجع — أضمن بكثير من التخمين بأرقام HEX.
• أدوات التصميم تختلف فيما بينها. فيجما وفوتوشوب وCSS كل واحد يعتمد صيغة افتراضية مختلفة، ونقل لون بينها يعني تحويلاً.

ملاحظة حول سهولة الوصول

تحويل اللون لا يغيّر أبداً مدى وضوحه للقراءة. إذا كنت تختار ألوان نصوص، تحقق من نسبة التباين مع الخلفية: معيار WCAG AA يتطلب 4.5:1 لنص المتن العادي و3:1 للنص الكبير. والنص الرمادي الفاتح على أبيض خطأ شائع — يتحوّل بين الصيغ بشكل مثالي بينما يبقى غير مقروء لكثير من المستخدمين.

محول الألوان يترجم الألوان بين HEX و RGB و HSL فوريًا. أساسي لمصممي الويب والجرافيك والمطورين. حول ألوان علامتك التجارية أو اختر من الألوان الجاهزة.