محوّل الألوان (HEX/RGB/HSL)
حوّل الألوان بين صيغ HEX و RGB و HSL. اختر لونًا بصريًا أو أدخل القيم يدويًا.
#535bebrgb(83, 91, 235)hsl(237, 79%, 62%)كيفية استخدام هذه الأداة
- 1
Click the color swatch to open your operating system's color picker and choose a color visually.
- 2
Or type a 6-digit HEX value (such as #535beb, with or without the leading #) into the text field.
- 3
Read the matching rgb(R, G, B) and hsl(H, S%, L%) strings in the result cards below.
- 4
Copy whichever format you need straight into your CSS or design file.
ما هو محوّل الألوان (HEX/RGB/HSL)؟
HEX و RGB و HSL ثلاث طرق للتعبير عن اللون نفسه. HEX (#RRGGBB) هو الأكثر شيوعًا في CSS وأدوات التصميم. RGB (rgb(R,G,B)) يفصل القنوات عدديًا. HSL (hsl(H,S%,L%)) أكثر بداهةً للبشر: التدرّج اللوني (hue) هو اللون، والإشباع هو الكثافة، والإضاءة (lightness) هي السطوع. استخدم HSL عند تصميم لوحات الألوان؛ وحوّله إلى HEX عند التنفيذ.
حالات الاستخدام الشائعة
Translating a brand HEX code from a style guide into the rgb() values a legacy stylesheet or email template requires.
Grabbing the HSL form of a color so you can nudge its lightness or saturation while keeping the same hue for a palette.
Checking the exact RGB channels of a color picked from a screenshot or mockup before writing it into CSS.
Confirming what a designer's HEX swatch becomes in RGB for a canvas, SVG, or charting library that wants numeric channels.
Teaching or learning how hexadecimal color notation maps to decimal RGB and to the HSL model.
Quickly sampling a color visually with the picker and reading all three CSS-ready notations at once.
الأسئلة الشائعة
متى ينبغي أن أستخدم HSL بدلًا من HEX؟▼
وماذا عن OKLCH ومساحات الألوان الحديثة؟▼
أدوات ذات صلة
مولّد box-shadow في CSS
أنشئ قيم box-shadow في CSS بصريًا. عاين في الوقت الفعلي وانسخ الـ CSS المولَّد.
مولّد التدرّجات اللونية في CSS
أنشئ تدرّجات CSS خطية وشعاعية. اختر الألوان بصريًا وانسخ كود CSS الناتج.
مولّد منحنيات التسارع cubic-bezier
أنشئ منحنيات تسارع (easing) بصيغة cubic-bezier لـ CSS. يتضمن إعدادات مسبقة قياسية.
مولّد لوحات الألوان
أنشئ لوحات ألوان متناغمة انطلاقًا من أي لون أساسي. يدعم الأنظمة المكمّلة والمتشابهة والثلاثية والأحادية اللون.
مولّد border-radius في CSS
أنشئ قيم border-radius معقّدة في CSS بصريًا. تحكّم مستقل في كل زاوية.
مولّد CSS Clamp()
أنشئ قيم CSS مرنة ومتجاوبة باستخدام clamp(). تتدرّج بسلاسة بين الحدين الأدنى والأقصى عبر نطاقات إطار العرض (viewport).