مبدل فرمت رنگ هر رنگی را بین HEX، RGB، HSL، HSV و OKLCH تبدیل میکند. با color picker بومی یک رنگ انتخاب کنید، یک مقدار hex تایپ کنید، هر رشته رنگ CSS را بچسبانید یا لغزندههای RGB را تنظیم کنید — هر فرمت بهصورت زنده بهروزرسانی میشود و هر کدام دکمه Copy مخصوص خود را دارند.
CSS مدرن دهها روش برای نوشتن یک رنگ یکسان به شما میدهد: #7C3AED، rgb(124, 58, 237)، hsl(262, 83%, 58%)، oklch(55% 0.24 293)، بهعلاوه نسخههای آلفادار هر کدام. اغلب لازم است بین آنها تبدیل کنید — یک طراحی Figma یک OKLCH به شما میدهد، کدبیستان از HEX استفاده میکند، و متغیرهای تمتان برای تنظیمات hover ترجیحاً HSL میخواهند. مبدل فرمت رنگ تمام این تبدیلها را در یک پنل انجام میدهد. رنگی را از color picker بومی انتخاب کنید، یک رنگ موجود را در هر سینتکسی بچسبانید، یا لغزندههای RGB را بکشید تا رنگ موردنظر را تنظیم کنید. هر فرمت رایج همزمان رندر میشود: HEX (با آلفا)، rgb()/rgba()، hsl()/hsla()، hsv() و oklch() — بهعلاوه یک قطعهکد متغیر CSS و مقدار luminance محاسبهشده برای محاسبات سریع کنتراست. کانال آلفا سرتاسر پشتیبانی میشود. هر فرمت دکمه Copy مخصوص خود را برای استفاده با یک کلیک دارد، و parser نامهای رنگ بومی و هر چیزی که CSS پشتیبانی میکند را میپذیرد.
HEX، RGB/RGBA، HSL/HSLA، HSV و OKLCH را همزمان نمایش میدهد — هر فرمتی که کد مقصد شما نیاز دارد را بدون تبدیل مجدد هر بار انتخاب کنید.
HEX (#abc یا #aabbcc یا #aabbccff)، rgb()/rgba()، hsl()/hsla()، oklch() و نامهای رنگ بومی را میپذیرد. هر چیزی که CSS پشتیبانی میکند را بچسبانید.
فرمت جدید OKLCH که در CSS مدرن استفاده میشود را مدیریت میکند — فضای رنگ ادراکی یکنواخت که در حال تبدیل شدن به پیشفرض جدید سیستمهای طراحی است.
هر خروجی دکمه Copy مخصوص خود را دارد. کلیک کنید تا دقیقاً همان فرمتی که برای کدتان نیاز دارید را بدون انتخاب دستی بگیرید.
لغزندههای Red/Green/Blue/Alpha را برای تنظیم دقیق جابهجا کنید. هر فرمت همزمان با کشیدن، در لحظه بهروزرسانی میشود.
شفافیت در تمام فرمتها مدیریت میشود: #RRGGBBAA، rgba(...)، hsla(...). یک بار تنظیم کنید، همهجا تبدیل میشود.
Figma یک OKLCH یا HSL به شما میدهد — آن را بچسبانید، معادل HEX را برای کانفیگ Tailwind یا متغیرهای CSS بدون خروج از مرورگر کپی کنید.
لغزندهها را بکشید تا سایهها را کاوش کنید و مقادیر OKLCH را برای یک پالت سیستم طراحی منظم یادداشت کنید.
یک رنگ برند را به فرم HSL آن تبدیل کنید تا بتوانید از hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) برای حالتهای hover استفاده کنید.
فیلد luminance مقدار خام مورد استفاده در محاسبات کنتراست WCAG را به شما میدهد — مفید برای محاسبات دسترسپذیری.
یک oklch(...) را از یک فایل CSS که در حال خواندنش هستید بچسبانید و فوراً ببینید واقعاً چه رنگی تولید میکند.
روی آیکون Color Formats در داک DevSuite Pro کلیک کنید. پنلی با color picker، ورودی hex و لغزندههای RGB باز میشود.
از color picker استفاده کنید، یک hex تایپ کنید یا هر رشته رنگ CSS (rgb(...)، oklch(...) و غیره) را بچسبانید. رنگ فوراً پیشنمایش میشود.
هر فرمت در پایین رندر میشود: HEX، RGB، HSL، HSV، OKLCH، متغیر CSS و luminance. همگی با هر تنظیمی هماهنگ میمانند.
لغزندههای R/G/B/A را برای تنظیمات دقیق بکشید. عالی برای دستیابی به یک سایه خاص که با یک مشخصات طراحی مطابقت دارد.
روی Copy در ردیف فرمت موردنظر کلیک کنید — مقدار با سینتکس درست در کلیپبورد شما قرار میگیرد.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۶۴ ابزار توسعه را برای مرورگر خود باز کنید.
