الألوان والبكسل

تحويل لون HEX إلى RGB لـ CSS

الصق قيمة HEX أو RGB أو HSL لمعاينة اللون الدقيق والتحويل بين التنسيقات.

أمثلة
Aa
  • HEX#e63946
  • RGBrgb(230, 57, 70)
  • HSLhsl(355, 78%, 56%)

كيفية تحويل لون HEX إلى RGB لاستخدامه في CSS

تحويل لون HEX إلى RGB لـ CSS. Paste a HEX, RGB or HSL value to preview the exact color and convert between formats. الصق قيمة HEX أو RGB أو HSL وشاهد اللون الدقيق فوراً — بدون أي صورة. تحقق من لون نُسِخ من CSS أو دليل العلامة التجارية قبل النشر. عينة حية مع قراءات HEX وRGB وHSL متزامنة، قابلة للنسخ بنقرة.

تتم جميع المعالجة محلياً في متصفحك. لا تُرفع صورك إلى أي خادم إطلاقاً.

الميزات الرئيسية

  • اكتشاف تلقائي لصيغ HEX وRGB(A) وHSL(A) أثناء الكتابة
  • تحويل متزامن بين التنسيقات الثلاثة
  • قناة شفافية وHEX من 3/4/6/8 خانات

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

  • التحويل بين HEX وRGB وHSL لأدوات CSS
  • معاينة الألوان على خلفيات فاتحة وداكنة
  • فحص تباين WCAG لإمكانية الوصول

آخر تحديث: 5 أغسطس 2026

دليل الاستخدام

كيفية استخدام هذه الأداة

يحوّل «البحث عن لون بالكود» قيمة اللون النصية إلى لون تراه فعلياً. الصق أي رمز HEX أو RGB أو HSL — من CSS أو مواصفات التصميم أو دليل العلامة التجارية أو رسالة دردشة — وستعرض الأداة اللون الدقيق فوراً مع مكافئاته في التنسيقين الآخرين.

كيفية الاستخدام

اكتب أو الصق رمز اللون في الحقل. يتعرف المحلّل على التنسيق تلقائياً: HEX مع أو بدون # (3/4/6/8 خانات)، وrgb()/rgba() بفواصل أو مسافات أو شرطة مائلة، وhsl()/hsla() بوحدات deg/rad/turn. تتحدث النتيجة مع كل ضغطة مفتاح دون الحاجة إلى أي زر.

تعرض المعاينة عيّنة كبيرة للون الناتج وقائمة بقيم HEX وRGB وHSL. لكل صف زر نسخ خاص، ويضع «نسخ الكل» القيم الثلاث في الحافظة دفعة واحدة.

  • اكتشاف التنسيق تلقائياً أثناء الكتابة
  • تحويل HEX وRGB وHSL في عرض واحد
  • قناة شفافية مع قراءة بالنسبة المئوية
  • نسخ بنقرة لكل قيمة أو للثلاث معاً

استخدامات عملية

غالباً ما تختلط الترميزات في تسليمات التصميم: دليل العلامة يستخدم HEX، والمطور يكتب rgb() في CSS، وأداة الحركة تصدّر HSL. الصق كل قيمة هنا للتأكد أنها جميعاً تؤدي إلى اللون نفسه قبل وصول الفرق إلى الإنتاج.

عند تصحيح لون واجهة «مختلف قليلاً»، الصق القيمة المشبوهة من DevTools وقارن العيّنة بالتصميم؛ إنها أسرع طريقة لمعرفة إن كانت المشكلة في القيمة نفسها أو في الطبقة التي فوقها.

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

كيف أحول لون HEX مثل #FF5733 إلى قيمة RGB لـ CSS؟

الصق رمز HEX وستعرض الأداة فوراً قيم RGB وHSL التي يمكن نسخها إلى CSS بصيغة `rgb(...)` أو `rgba(...)`. يمكنك أيضاً التحويل العكسي من RGB إلى HEX لتسليم التصميم.

ما الصيغ المدعومة؟

HEX مع أو بدون # (3/4/6/8 خانات)، وrgb()/rgba() بفواصل أو مسافات أو شرطة مائلة، وhsl()/hsla() بوحدات deg/rad/turn.

هل المعاينة دقيقة؟

نعم: تحويل sRGB قياسي يرسمه المتصفح مباشرة دون تقريب إضافي.

هل يفحص إمكانية الوصول؟

نعم، يعرض نسبة التباين مع مؤشرات WCAG AA/AAA.

عدة ألوان دفعة واحدة؟

حالياً لون واحد في المرة.

هل هذه الأداة مجانية؟

نعم، مجانية بالكامل بدون تسجيل أو علامات مائية أو حدود يومية. المعالجة محلية.

هل يجب اختيار تنسيق الإدخال؟

لا. يكتشف المحلّل صيغ HEX وRGB(A) وHSL(A) تلقائياً ويحوّل بين التنسيقات الثلاثة دفعة واحدة.

هل يدعم HEX من 8 خانات؟

نعم. تُعامَل الخانتان الأخيرتان كقناة شفافية وتظهران في القيم المحوّلة وكنسبة مئوية.