استخراجگر پالت رنگ تصویر و استودیو طراحی تم رابط کاربری
رنگهای غالب تصویر را استخراج کنید، کنتراست WCAG را بررسی کنید و توکنهای CSS یا Tailwind را خروجی بگیرید.
استودیوی پیشرفته رنگ و موتور پوسته
برای استخراج رنگهای غالب واقعی و محاسبه کنتراست WCAG، یک تصویر آپلود کنید یا اینجا رها کنید.برای انتخاب فایل کلیک کنید یا تصویر را اینجا بکشید و رها کنید
از PNG، JPG و WEBP پشتیبانی میشود (حداکثر 5MB). یا یکی از نمونههای پیشفرض زیر را انتخاب کنید:
پالت رنگ غالب استخراجشده و هماهنگی رنگها
پیشنمایش زنده مؤلفههای تم رابط کاربری و محاسبهگر WCAG
نمونه رابط کاربری پویا
این ویجت زنده، نسبتهای واقعی کنتراستِ روشنایی را بر اساس رنگ اصلی استخراجشدهٔ شما محاسبه میکند.
مرکز خروجیگیری مدرن CSS و Tailwind نسخه ۴
دربارهٔ این ابزار
بهجای حدسزدن پالت رنگ، این استودیو با استفاده از API مربوط به HTML5 Canvas، دادههای واقعی پیکسلهای تصویر بارگذاریشده را میخواند و پنج رنگ غالب را که از نظر بصری بیشترین تفاوت را دارند استخراج میکند. روی هر نمونهرنگ استخراجشده کلیک کنید تا مقادیر HSL، رنگ مکمل و رنگهای مشابه آن را ببینید و کد HEX را کپی کنید.
پیشنمایش زنده ماکت رابط کاربری با رنگ انتخابی شما بهروزرسانی میشود و نسبت واقعی کنتراست WCAG را در برابر متن سفید و مشکی محاسبه میکند و به شما میگوید آیا این رنگ برای استفاده در متن، استانداردهای دسترسپذیری AA یا AAA را برآورده میکند یا نه.
در حال خروجی گرفتن از پالت شما
کل پالت را بهصورت ویژگیهای سفارشی CSS برای یک :root بلوک، Tailwind v4 @theme توکنها، یا یک آرایهٔ سادهٔ JSON — آماده برای استفاده در سیستم طراحی یا کدبیس.