RevealTheme logo

محوّل الألوان (HEX/RGB/HSL)

حوّل الألوان بين صيغ HEX و RGB و HSL. اختر لونًا بصريًا أو أدخل القيم يدويًا.

HEX
#535beb
RGB
rgb(83, 91, 235)
HSL
hsl(237, 79%, 62%)

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

  1. 1

    Click the color swatch to open your operating system's color picker and choose a color visually.

  2. 2

    Or type a 6-digit HEX value (such as #535beb, with or without the leading #) into the text field.

  3. 3

    Read the matching rgb(R, G, B) and hsl(H, S%, L%) strings in the result cards below.

  4. 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؟
عند التصميم: يتيح لك HSL ضبط الإضاءة أو الإشباع بشكل مستقل. ثم حوّله إلى HEX للكود.
وماذا عن OKLCH ومساحات الألوان الحديثة؟
OKLCH موحّد إدراكيًا وأفضل لإمكانية الوصول. وهو مدعوم في CSS Color Level 4 (جميع المتصفحات الحديثة).

أدوات ذات صلة