محول الألوان

رائج 🔥

تحويل الألوان بين HEX و RGB و HSL

أدوات المطوّرين

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

  1. 1أدخل قيمة اللون بأي صيغة مدعومة
  2. 2يُحوَّل فورًا إلى جميع الصيغ الأخرى
  3. 3راجع معاينة اللون المباشرة

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

محوّل الألوان هو أداة شاملة لتحويل قيم الألوان بين صيغ HEX وRGB وRGBA وHSL وHSLA. يعرض معاينة مباشرة للون مع جميع قيمه في وقت واحد. مفيد للمصممين ومطوري الواجهات.

المميزات الرئيسية لـ محول الألوان

  • تحويل فوري بين 5 صيغ
  • معاينة مباشرة للون
  • دعم قيم ألفا للشفافية
  • نسخ بنقرة واحدة
  • عرض جميع الصيغ معًا
  • Handles alpha/transparency channel in RGBA and HSLA
  • One-click copy for each color format
  • Works entirely in-browser — no server requests

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

صيغ الإدخال

HEX (#RRGGBB, #RGB)RGB (rgb(r, g, b))RGBA (rgba(r, g, b, a))HSL (hsl(h, s%, l%))HSLA (hsla(h, s%, l%, a))

صيغ الإخراج

HEXRGBRGBAHSLHSLA

الألوان المسماة في CSS مثل cornflowerblue غير مدعومة كإدخال.

أمثلة

تحويل HEX إلى RGB

تحويل لون HEX بسيط

المدخلات

#FF5733

النتيجة

RGB: rgb(255, 87, 51)
HSL: hsl(11, 100%, 60%)

Add transparency to an RGB color

Get the RGBA equivalent of a solid color with 50% opacity for a semi-transparent overlay.

المدخلات

rgb(0, 0, 0) with alpha 0.5

النتيجة

RGBA: rgba(0, 0, 0, 0.5) | HEX with alpha: #00000080

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

  • تصميم واجهات المستخدم
  • تطوير أنظمة التصميم
  • تحويل ألوان العلامة التجارية
  • العمل مع أطر CSS
  • تعلم نماذج الألوان
  • Quickly checking the RGB values of a HEX color in a design spec

استكشاف الأخطاء

صيغة HEX غير صالحة

الحل

HEX يجب أن يبدأ بـ # ويتكون من 3 أو 6 أرقام سداسية

قيم RGB خارج النطاق

الحل

قيم RGB يجب أن تكون بين 0 و255

Alpha value in RGBA/HSLA is not working

الحل

Alpha is a value from 0 (fully transparent) to 1 (fully opaque). Values like 0.5 represent 50% opacity. Do not enter a percentage — use a decimal between 0 and 1.

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

ما الفرق بين HSL وRGB؟

RGB يصف الألوان بمكونات الضوء الأحمر والأخضر والأزرق، بينما HSL يستخدم درجة اللون والتشبع والإضاءة — وهو أكثر سهولة للمصممين.

هل تدعم الألوان المسماة؟

لا، فقط الصيغ الرقمية مدعومة حالياً.

When should I use RGBA instead of HEX?

Use RGBA when you need transparency (alpha channel). HEX does not natively support transparency in all browsers (HEX with alpha is #RRGGBBAA). RGBA is the most universally compatible format for transparent colors in CSS.

What does the alpha value in RGBA represent?

Alpha (the fourth value in RGBA) represents opacity: 0 is fully transparent, 1 is fully opaque. Values like 0.5 give 50% transparency, allowing the background to show through.

Can I convert CSS named colors like "cornflowerblue"?

Named CSS colors are not currently supported as input. You can find the HEX value of any named color from a CSS reference and enter the HEX value to convert to other formats.

Is there a difference between HEX shorthand (#RGB) and full HEX (#RRGGBB)?

#RGB is shorthand for #RRGGBB where each digit is doubled. #F80 equals #FF8800. Both represent the same color; shorthand is only valid when both digits of each pair are identical.

Is my data sent to a server?

No. All conversions are performed locally in your browser using JavaScript math. No data is transmitted anywhere.

Can I use this to find the HSL lightness of a color?

Yes. Enter the HEX or RGB value and the HSL output shows the lightness percentage. You can then adjust the lightness in your CSS to create lighter or darker variants of the same hue.