Utiliome

استخراج پالت رنگ از تصویر

پالت هماهنگ ۵ تا ۱۲ رنگ را از عکس یا تصویرسازی استخراج کنید، پیکسل دقیق را با قطره‌چکان بردارید و متغیر CSS، توکن Tailwind یا کارت PNG خروجی بگیرید.

بدون آپلودبدون ثبت‌نامپردازش دسته‌ای
5–12 Harmonious SwatchesClick-to-Pick EyedropperHEX / RGB / HSL / CSS / TailwindPNG Palette Card Export
دانلود
موتور آفلاین آماده استفضای کار ۱۰۰٪ خصوصی در مرورگر • بدون آپلود ابری
ابزارهایی که شاید لازم داشته باشید

ابزارهای مرتبط

استخراج‌گر رنگ غالب

رنگ غالب و درصد پوشش پیکسل را با خوشه‌بندی محلی K-Means پیدا کنید. پوسته، کنتراست WCAG و HEX/RGB را ببینید.

سازنده پالت رنگ

پالت رنگ و گرادیان زیبا بسازید، تنظیم کنید و برای پروژه رابط کاربری خروجی بگیرید.

بررسی‌گر رنگ دسترس‌پذیر

انطباق کنتراست WCAG 2.1 را بررسی کنید، کوررنگی را شبیه‌سازی کنید و جفت رنگ دسترس‌پذیر پیدا کنید.

سازنده پالت Material

پالت Material Design 3 و 2، سایه‌های تُن و پیش‌نمایش رابط را از هر رنگ یا تصویر بسازید.

سازنده گرادیان CSS

گرادیان زیبای CSS را دیداری بسازید و کد را فوری کپی کنید.

تبدیل SVG به PNG

تصویر برداری SVG را فوری و مستقیم در مرورگر به PNG باکیفیت تبدیل کنید.

۱۰۰٪ خصوصی • بدون آپلود فایل به سرور

چرا استخراج‌کننده پالت و قطره‌چکان Utiliome؟

از پایه برای حریم خصوصی سخت‌گیرانه، اجرای فوری و بدون اصطکاک ساخته شده. بدون اشتراک، دیوار پرداخت یا ثبت‌نام.

فیلتر فاصله ادراکی و هماهنگی

۵، ۶، ۸ یا ۱۲ نمونه متمایز با فیلتر فاصله ادراکی RGB استخراج می‌کند تا پالت روشن‌ترین، میان‌تن و سایه را بدون نمونه تقریباً تکراری بگیرد.

قطره‌چکان کلیک روی تصویر

هر جای عکس را کلیک کنید تا مقدار دقیق HEX/RGB/HSL همان پیکسل نمونه‌برداری شود، جلوی پالت سنجاق شود و در کلیپ‌بورد کپی شود.

پیش‌تنظیم حال‌وهوا (زنده، پاستل، گرم، سرد)

رنگ استخراج‌شده را با اشباع، روشنایی و زاویه فام HSL فیلتر کنید تا از همان عکس طرح زنده، پاستل نرم، گرم یا سرد بسازید.

CSS، Tailwind، JSON و کارت PNG با یک کلیک

ویژگی سفارشی :root، شیء colors در Tailwind یا آرایه JSON را یک‌کلیکی کپی کنید، یا کارت PNG پالت ۱۲۰۰×۸۰۰ با عکس و کد HEX دانلود کنید.

Utiliome در برابر جایگزین‌های ابری سنتی

موتور محلی WebAssembly ما را با ابزارهای ابری قدیمی مقایسه کنید.

ویژگی Utiliome (مرورگر محلی) مبدل‌های ابری قدیمی
قطره‌چکان پیکسل تعاملی هر جای بوم تصویر را کلیک کنید تا رنگ دقیق پیکسل سنجاق شود نمونه خودکار ثابت بدون انتخاب دستی پیکسل
هماهنگی و فیلتر حال‌وهوا ۵ تا ۱۲ نمونه به‌علاوه فیلتر متعادل، زنده، پاستل، گرم و سرد ۵ نمونه ایستا که اغلب خاکستری گل‌آلود پس‌زمینه را تکرار می‌کنند
خروجی توسعه‌دهنده و طراح HEX، RGB، HSL به‌علاوه متغیر :root، پیکربندی Tailwind، JSON و کارت PNG کپی تک‌تک HEX یا خروجی پشت دیوار پرداخت
حریم خصوصی و سرعت استخراج بوم HTML5 کاملاً سمت کلاینت (بدون آپلود) مودبورد و دارایی مشتری را به سرور ابری می‌فرستد
چگونه کار می‌کند

استخراج پالت رنگ از تصویر در ۳ گام

نیازی به نصب نرم‌افزار نیست. همه‌چیز مستقیم داخل مرورگر اجرا می‌شود.

1

یک یا چند عکس یا تصویرسازی را رها کنید

هر تصویر JPG، PNG، WebP، SVG یا AVIF را در ناحیه رها کنید. Utiliome پیکسل را محلی در RAM مرورگر رمزگشایی می‌کند.

2

تعداد نمونه، حال‌وهوا و پیکسل سفارشی

۵، ۶، ۸ یا ۱۲ نمونه را انتخاب کنید، حال‌وهوای پالت (متعادل، زنده، پاستل، گرم یا سرد) را فیلتر کنید، یا مستقیم روی تصویر کلیک کنید تا پیکسل تأکیدی سنجاق شود.

3

HEX / CSS / Tailwind را کپی کنید یا کارت PNG بگیرید

روی نمونه بزنید تا HEX، RGB یا HSL کپی شود، متغیر :root یا توکن Tailwind را از نوار کناری خروجی بگیرید، یا کارت PNG قابل اشتراک دانلود کنید.

کوانتیزه ادراکی رنگ چگونه پالت هماهنگ از عکس می‌سازد

پاسخ کوتاه: شمارش خام پیکسل اغلب ۶ سایه تقریباً یکسان آبی آسمان یا خاکستری سایه برمی‌گرداند. Utiliome هیستوگرام سه‌بعدی RGB را با فیلتر فاصله اقلیدسی (ΔRGB >= 34) و قید حال‌وهوای HSL ترکیب می‌کند تا هر نمونه از نظر بصری متمایز باشد.

وقتی عکس ۱۲ میلیون پیکسل دارد، اغلب بیش از ۷۰٪ آن‌ها به یک گرادیان پس‌زمینه تعلق دارند (آسمان آبی، پس‌زمینه استودیو یا شاخ‌وبرگ). مرتب‌سازی ساده بسامد پالت یکنواخت می‌سازد و تأکید زنده ۳٪ کانون ترکیب را از دست می‌دهد.

موتور پالت هماهنگ Utiliome این را در سه مرحله حل می‌کند:

  1. کوانتیزه مکانی ۲۴گامه نمونه‌کاهی: پیکسل غیرشفاف (alpha >= 128) را روی شبکه بوم نرمال نمونه‌گیری می‌کند و RGB واقعی را در هر سطل میانگین می‌گیرد تا نمونه بازتاب تن عکاسی باشد نه نقطه میانی مصنوعی شبکه.
  2. فیلتر حال‌وهوا و کرومای HSL:سطل نامزد را به فام (0°–360°)، اشباع (0%–100%) و روشنایی (0%–100%) تبدیل می‌کند تا هماهنگیزنده(S >= 35%)،پاستل نرم(L >= 60%, S <= 75%)،گرم(H <= 70° یا H >= 310°) یاسرد (70° < H < 310°) جدا شود.
  3. حداقل فاصله اقلیدسی رنگ (ΔE / ΔRGB): جدایی برداری سه‌بعدی RGB بین نمونه‌های انتخاب‌شده را الزام می‌کند تا روشن‌ترین، میان‌تن و تأکید همه نمایندگی شوند.

خروجی پالت به تولید: ویژگی CSS، Tailwind و کارت طراحی

پاسخ کوتاه: پس از استخراج یا تنظیم پالت با قطره‌چکان روی بوم، می‌توانید فوری آن را به‌صورت متغیر :root، شیء theme.extend.colors در Tailwind، آرایه JSON یا کارت ارائه ۱۲۰۰×۸۰۰ خروجی بگیرید.

رفتن از الهام بصری به کد فرانت یا مودبورد مشتری نباید یعنی کپی شش کد هگز یکی‌یکی:

هدف خروجی قالب بهترین کاربرد
کلیک نمونه تکی #HEX، rgb(r, g, b) یا hsl(h, s%, l%) چسباندن رنگ تکی در Figma، Photoshop، Canva یا Illustrator
متغیر CSS (:root) --palette-1: #...; --palette-2: #...; پوسته‌گذاری CSS خام، Astro، Svelte و Web Components
پیکربندی Tailwind CSS colors: { "brand-100": "#...", ... } قرار دادن مستقیم در tailwind.config.mjs یا بلوک @theme
کارت نمونه PNG PNG وضوح بالا 1200 × 800 px با عکس و برچسب HEX اشتراک مودبورد در Slack، Notion، ارائه و راهنمای برند

استخراج پالت در برابر رنگ غالب: کدام را استفاده کنیم؟

پاسخ کوتاه: وقتی طرح متنوع و متعادل ۵ تا ۱۲ رنگ با فیلتر حال‌وهوا، قطره‌چکان و خروجی CSS/Tailwind می‌خواهید از استخراج پالت استفاده کنید. وقتی درصد پوشش آماری K-Means و تحلیل کنتراست پوسته WCAG می‌خواهید از استخراج رنگ غالب استفاده کنید.

Utiliome دو ابزار تخصصی تحلیل رنگ تصویر برای کار خلاق و مهندسی متفاوت دارد:

ویژگی / هدف استخراج پالت رنگ (این ابزار) استخراج رنگ غالب
الگوریتم اصلی تنوع فاصله ادراکی به‌علاوه فیلتر حال‌وهوای HSL (Balanced، Vibrant، Pastel، Warm، Cool) خوشه‌بندی K-Means (k = 3..8) با اندازه‌گیری پوشش پیکسل %
قطره‌چکان دستی پیکسل کلیک هر جای عکس برای نمونه‌برداری و سنجاق رنگ دقیق مرکز خوشه آماری خودکار
خروجی اصلی ۵ تا ۱۲ نمونه هماهنگ به‌علاوه :root / Tailwind و کارت PNG نمودار پوشش % رتبه‌بندی‌شده به‌علاوه پیش‌نمایش کارت اصلی/ثانویه/تأکید و نسبت WCAG
مناسب برای طراح گرافیک، تصویرساز، مودبورد برند و ساخت پالت CSS/Tailwind پوسته‌گذاری پویا رابط، حسابرسی پس‌زمینه عکس محصول و تحلیل توزیع رنگ
پرسش‌های رایج

پرسش‌های رایج پالت رنگ تصویر و راهنمای توکن طراحی

هرچه برای استفاده از استخراج پالت رنگ از تصویر رایگان و آنلاین Utiliome لازم است.

چگونه رنگ جزئی کوچک تصویر را بردارم؟

مستقیم روی همان بخش تصویر در بوم ویرایشگر کلیک کنید. قطره‌چکان داخلی پیکسل دقیق ۱×۱ زیر نشانگر را نمونه‌برداری می‌کند، آن را نمونه اول پالت می‌گذارد و کد رنگ را در کلیپ‌بورد کپی می‌کند.

فرق فیلتر متعادل، زنده و پاستل چیست؟

متعادل کامل، متمایزترین رنگ‌ها را در کل طیف روشنایی و اشباع استخراج می‌کند. زنده خاکستری مات و نزدیک سیاه/سفید را حذف می‌کند (اشباع حداقل ۳۵٪) و پاستل نرم تن‌های روشن و ملایم را ترجیح می‌دهد.

آیا می‌توان پالت را مستقیم به Tailwind CSS یا متغیر CSS خروجی گرفت؟

بله. در نوار کناری زیر بخش قالب کد، «کپی متغیر CSS» یا «کپی پیکربندی Tailwind» را بزنید تا بلوک آماده همه نمونه‌ها کپی شود.

دانلود کارت PNG پالت چه می‌سازد؟

کارت ارائه تمیز ۱۲۰۰×۸۰۰ پیکسل می‌سازد که اثر شما را روی بوم استودیوی تیره بالای ردیف نمونه گرد با کد HEX دقیق نشان می‌دهد؛ آماده ارائه مشتری، سند Notion یا پست شبکه اجتماعی.

کی از استخراج پالت و کی از رنگ غالب استفاده کنم؟

وقتی طرح الهام‌بخش ۵ تا ۱۲ نمونه، فیلتر حال‌وهوا و قطره‌چکان می‌خواهید از پالت استفاده کنید. وقتی درصد آماری دقیق پوشش هر خوشه رنگ با K-Means را می‌خواهید از رنگ غالب استفاده کنید.

آیا عکس‌ها برای استخراج رنگ به سرور فرستاده می‌شوند؟

هرگز. نمونه‌برداری پیکسل، کوانتیزه هیستوگرام و رندر کارت PNG کاملاً محلی در مرورگر با API بوم دوبعدی HTML5 انجام می‌شود.