این ابزار درست کار نمی‌کند؟

دربارهٔ ابزار «مبدل HEX به RGBA آنلاین»

این ابزار کدهای رنگ hex را به نمادگذاری RGBA تبدیل می‌کند، جایی که A کانال آلفا (شفافیت از ۰ تا ۱) است. کدهای hex مانند #FF5733 شفافیت را شامل نمی‌شوند؛ rgba(255, 87, 51, 0.5) به شما اجازه می‌دهد یک نوع نیمه‌شفاف برای overlayها، gradient stops، یا توکن‌های طراحی مشخص کنید.

نمادگذاری RGBA هنگام طراحی عناصر نیمه‌شفاف ضروری است: tooltips، پس‌زمینه‌های modal، نوارهای نمودار محو، و واترمارک‌ها همگی از شفافیت متفاوت استفاده می‌کنند. نمادگذاری hex ۸ رقمی (#FF5733FF) جایگزینی است اما RGBA به طور گسترده‌تری توسط طراحان درک می‌شود.

از آن برای اضافه کردن شفافیت به رنگ‌های برند هنگام طراحی حالت‌های UI، تاریک کردن یک رنگ اصلی برای دکمه‌های غیرفعال، یا ترکیب رنگ‌ها به صورت بصری با لایه‌بندی لایه‌های شفاف استفاده کنید.

چطور از این ابزار استفاده کنم؟

چطور رنگ hex (با alpha اختیاری) را به RGBA تبدیل کنم؟

  1. مقدار hex را وارد کنید

    مقدار hex را در فیلد «Hex (#RGB … #RRGGBBAA)» قرار دهید. چهار طول پشتیبانی می‌شود: `#RGB`، `#RGBA`، `#RRGGBB`، `#RRGGBBAA` — `#` ابتدا اختیاری است، حروف بزرگ/کوچک اهمیت ندارد.

  2. نحوهٔ parse alpha

    اگر hex شامل alpha باشد (۴ یا ۸ رقم) استفاده می‌شود؛ در غیر این صورت alpha پیش‌فرض ۱ (کاملاً مات) است. مقدار byte بر ۲۵۵ تقسیم می‌شود تا float ۰–۱ بدست آید، سپس به ۴ رقم اعشار trim می‌شود.

  3. «اجرا» را بزنید

    خروجی شامل `r`، `g`، `b` (۰–۲۵۵)، `a` (float ۰–۱)، `alphaByte` (۰–۲۵۵)، `hex` (۸-رقمی نرمال‌شده)، `hexRgb` (۶-رقمی بدون alpha) و `rgbaCss` (رشتهٔ آمادهٔ `rgba(r, g, b, a)`) است.

  4. از hex در برابر hexRgb درست استفاده کنید

    از `hex` (۸-رقمی) در CSS که hex 8-رقمی پشتیبانی می‌کند استفاده کنید. از `hexRgb` زمانی که نیاز به hex قدیمی ۶-رقمی به‌علاوه declaration جداگانه `opacity` یا `rgba()` دارید استفاده کنید.