Monu Tools

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

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

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

  1. 01

    أدخل لونًا بصيغة HEX، مثل #ff8800.

  2. 02

    شاهده محوّلًا إلى RGB وHSL على الفور.

  3. 03

    انسخ أي صيغة تحتاجها.

What it does

This is a color converter for web and design work that translates a color between the three formats you use most: HEX, RGB and HSL, with a live swatch so you can see exactly what you are working with.

This is the everyday glue between design and code: matching a brand color from a mockup to a CSS variable, converting a value a designer gave you in one format to the one your framework wants, or finding a slightly lighter shade for a hover state.

Everything runs in your browser, so it is instant and nothing you enter is sent anywhere.

How the formats differ

Each format describes the same color differently. HEX (like #ff8800) is the compact form used throughout CSS and HTML. RGB states the red, green and blue channels directly, which is how screens and code such as canvas think about color. HSL describes hue, saturation and lightness, which is far more intuitive when you want to nudge a color: change the hue to shift it around the wheel, or the lightness to make it darker without picking a new code by hand.

How the conversion works

Enter a HEX value and the RGB and HSL equivalents update instantly, so you can grab whichever format the tool or codebase in front of you expects.

What is not covered yet

For now the tool focuses on opaque colors in HEX, RGB and HSL; alpha (opacity) support is not included yet.

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

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

HEX (بصيغة ‎#rgb أو ‎#rrggbb) وRGB وHSL. أدخل قيمة HEX وتتحدّث الصيغ الأخرى مباشرة.

هل تدعمون الشفافية (alpha)؟

ليس بعد. تركّز هذه الأداة على HEX وRGB وHSL المعتمة. يمكن إضافة دعم الشفافية لاحقًا.

المصادر

ضمّن هذه الأداة

أضف هذه الأداة إلى موقعك الخاص. انسخ المقتطف أدناه، ويبقى محدّثاً تلقائياً.

<iframe src="https://monu.tools/embed/ar/color-converter" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>

أدوات ذات صلة