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

حوّل الألوان بين HEX وRGB وHSL مع معاينة مباشرة.

جارٍ تحميل الأداة…

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

ما هي محوّل الألوان؟

Color Converter هو محوّل ألوان مجاني عبر الإنترنت من HEX إلى RGB إلى HSL للمطوّرين والمصمّمين. اكتب لونًا بأي صيغة — HEX (‏#rrggbb أو الصيغة المختصرة ‏#rgb)، أو RGB (مثل "255, 100, 0" أو "rgb(255 100 0)")، أو HSL (مثل "220, 91%, 64%") — وتتحدّث كل الصيغ الأخرى فورًا بجوار عيّنة معاينة مباشرة كبيرة. تتيح لك أداة انتقاء الألوان الأصلية اختيار درجة لون بصريًا، ولكل قيمة زر نسخ بنقرة واحدة، فهو مفيد كلما احتجت إلى مطابقة ألوان العلامة التجارية أو تحويل قيم ألوان CSS بين الكود وأدوات التصميم.

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

  1. اكتب لونًا أو الصقه في حقل HEX أو RGB أو HSL، أو انقر على عيّنة أداة انتقاء الألوان لاختيار درجة لون بصريًا.
  2. راقب الحقلين الآخرين وعيّنة المعاينة الكبيرة وهي تتحدّث فورًا لتعكس اللون نفسه.
  3. اقرأ بطاقات الملخّص R / G / B وH / S / L وHEX أدناه للاطلاع على قيم القنوات المحوّلة.
  4. انقر على زر النسخ بجوار حقل لنسخ قيمته: ينسخ HEX سلسلة ‏#rrggbb، بينما ينسخ RGB وHSL سلاسل rgb(...) وhsl(...) جاهزة للاستخدام.
  5. إذا رُفضت قيمة، تحقّق من الخطأ المضمّن وأعد إدخالها بالصيغة المعروضة في تلميح الحقل.

أمثلة

من HEX إلى RGB وHSL

المدخل

#ff6400

المخرج

RGB 255, 100, 0 / HSL 24, 100%, 50%

توسيع الصيغة المختصرة ‏#rgb

المدخل

#fff

المخرج

HEX #ffffff / RGB 255, 255, 255 / HSL 0, 0%, 100%

اختيار لون بصريًا

انقر على العيّنة لفتح أداة انتقاء الألوان الأصلية، واسحب لاختيار أي درجة لون، وتُملأ حقول HEX وRGB وHSL تلقائيًا بالقيم المطابقة.

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

ما صيغ الألوان التي يدعمها هذا المحوّل؟
يحوّل بين ثلاث صيغ: HEX (‏#rrggbb الكامل والصيغة المختصرة ‏#rgb)، وRGB (0-255 لكل قناة)، وHSL (تدرّج اللون بالدرجات، والتشبّع والإضاءة بالنسبة المئوية). لا يدعم حاليًا ألفا/الشفافية أو HSV أو CMYK أو أسماء ألوان CSS.
لماذا يظهر للوني خطأ "Invalid HEX color" أو "Invalid RGB color" أو "Invalid HSL color"؟
القيمة لا تطابق الصيغة المتوقّعة أو خارج النطاق. يجب أن يكون HEX مكوّنًا من 3 أو 6 أرقام ست عشرية، ويجب أن تكون قنوات RGB ضمن 0-255، ويجب أن يكون التشبّع والإضاءة في HSL ضمن 0-100%. أعد إدخالها وفق التلميح أسفل ذلك الحقل.
هل يمكنني لصق قيمة CSS كاملة مثل rgb(255 100 0)؟
نعم. يكتفي حقلا RGB وHSL باستخراج الأرقام من النص، لذا يعمل كلٌّ من "255, 100, 0" و"rgb(255 100 0)"، وتُخرج أزرار النسخ سلاسل rgb(...) وhsl(...) جاهزة للاستخدام.
هل تُقرّب القيم المحوّلة؟
نعم. تُقرّب قنوات RGB وقيم HSL إلى أعداد صحيحة، لذا قد يختلف التحويل ذهابًا وإيابًا بمقدار وحدة واحدة عن الأصل. يكون خرج HEX دائمًا برقمين لكل قناة (‏#rrggbb).
هل تُرفع بيانات ألواني إلى أي مكان؟
لا. يجري التحويل بالكامل محليًا في متصفّحك باستخدام JavaScript — لا يُرسَل أي شيء إلى خادم ولا تُرفع أي قيم ألوان، لذا يعمل بخصوصية وحتى دون اتصال بالإنترنت بمجرّد تحميل الصفحة.

أدوات ذات صلة