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

۵ رنگ اصلی موجود در یک عکس را به‌صورت الگوریتمی محاسبه کنید.

۱۰۰٪ در مرورگر • ۱۰۰٪ رایگان

استخراج رنگ‌های غالب از تصویر

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

راهنمای فنی جامع•۸ دقیقه مطالعه•تیم مهندسی 2RUN
۱۰۰٪ در مرورگر • بدون آپلود

خوشه‌بندی K-Means و استخراج رنگی: راهنمای فنی تحلیل رنگ‌های غالب، کوانتیزه‌سازی و تم‌سازی رابط کاربری

⚡چگونه در ۳ گام ساده رنگ‌های غالب را استخراج کنیم

1

۱. عکس یا گرافیک خود را وارد کنید

تصویر JPEG، PNG، WebP، AVIF یا TIFF خود را مستقیماً به فضای کار استخراج بکشید یا برای مرور فایل‌های محلی کلیک کنید. تصویر شما فوراً بدون آپلود حتی یک بایت به سرورهای خارجی در RAM محلی مرورگر بارگذاری می‌شود.

2

۲. اندازه خوشه پالت را انتخاب کنید

تعداد خوشه هدف (۳، ۵، ۶، ۸ یا ۱۰ رنگ) را انتخاب کنید. الگوریتم K-Means برداری‌شده ما میلیون‌ها بردار پیکسل را در کمتر از ۳۰ میلی‌ثانیه پردازش و نمونه‌های رنگ متمایز را همراه با معیارهای دقیق درصد سطح نمایش می‌دهد.

3

۳. نمونه‌ها را کپی و توکن‌های CSS را خروجی بگیرید

نمونه‌های رنگ استخراج‌شده را بررسی، امتیازهای خوانایی متن WCAG را تأیید و برای کپی کدهای HEX، RGB یا HSL کلیک کنید. ویژگی‌های سفارشی CSS آماده تولید (`--color-primary`، `--color-secondary`) را با یک کلیک خروجی بگیرید.

درک هویت رنگی قطعی یک عکس، دارایی برند، اثر هنری یا عکس محصول تجاری، بنیان طراحی دیجیتال مدرن است. اگرچه یک عکس پروضوح ممکن است میلیون‌ها مقدار پیکسلی با تفاوت‌های ظریف داشته باشد، ادراک شناختی انسان به‌طور طبیعی این اقیانوس رنگ را به سلسله‌مراتبی هماهنگ از نمونه‌های تُنی تعیین‌کننده و غالب ترکیب می‌کند. در مهندسی رابط کاربری، تجارت الکترونیک و مدیریت هنری دیجیتال، شناسایی این رنگ‌های غالب اصلی به طراحان امکان می‌دهد تم‌های تطبیقی رابط بسازند، دسته‌بندی کاتالوگ محصولات را خودکار کنند و سیستم‌های برندینگ منسجم تدوین کنند.

اما نمونه‌برداری دستی رنگ با قطره‌چکان ذهنی، کند و مستعد خطای انسانی است، در حالی که رویکردهای الگوریتمی ساده — مانند شمردن صرف پرتکرارترین مقادیر پیکسل — همواره شکست می‌خورند، زیرا پس‌زمینه‌های تخت استودیو یا آسمان آبی را بیش از حد نمایندگی می‌کنند و رنگ‌های زنده سوژه اصلی را کاملاً نادیده می‌گیرند. افزون بر این، آپلود عکاسی اختصاصی محصول یا آثار منتشرنشده در APIهای تحلیل ابری شخص ثالث خطرات جدی برای مالکیت فکری دارد. ابزار «استخراج رنگ‌های غالب» ما که در مرورگر اجرا می‌شود، یادگیری ماشین بدون نظارت K-Means برداری‌شده را مستقیماً درون زبانه مرورگر شما به کار می‌گیرد. موتور ما با کار روی آرایه‌های پیکسلی خام در حافظه دستگاه شما، میلیون‌ها بردار رنگ را در نمونه‌های غالب دقیق ریاضی با توزیع درصدی دقیق، کدهای HEX/RGB/HSL و امتیازهای کنتراست دسترس‌پذیری WCAG خوشه‌بندی می‌کند — همه بدون هیچ آپلودی به سرور، بدون تأخیر شبکه و با حریم خصوصی کامل داده در سمت کاربر.

خواندن راهنمای فنی کامل

ریاضیات خوشه‌بندی رنگ K-Means در فضای سه‌بعدی RGB

در محاسبات آماری و بینایی رایانه‌ای، خوشه‌بندی رنگ داده‌های پیکسلی تصویر را به‌صورت یک ابر نقطه‌ای پرچگال درون فضای رنگ اقلیدسی سه‌بعدی $\mathbb{R}^3$ مدل می‌کند که در آن هر پیکسل $i$ به‌صورت یک بردار مختصات مکانی نمایش داده می‌شود: $\mathbf{p}_i = [R_i, G_i, B_i]^T$. الگوریتم K-Means به‌جای شمردن مقادیر یکسان گسسته، $N$ بردار پیکسل را با کمینه کردن مجموع مربعات درون‌خوشه‌ای (WCSS) که اینرسی خوشه نیز نامیده می‌شود، به $k$ خوشه متمایز $S = \{S_1, S_2, \dots, S_k\}$ افراز می‌کند: $$\underset{S}{\arg\min} \sum_{j=1}^{k} \sum_{\mathbf{p}_i \in S_j} \|\mathbf{p}_i - \boldsymbol{\mu}_j\|^2$$ در اینجا $\boldsymbol{\mu}_j$ میانگین ریاضی (مرکزوار) خوشه $S_j$ است. موتور ما این فرایند خوشه‌بندی را از طریق یک چرخه تکراری دومرحله‌ای بهینه می‌کند:

۱. مقداردهی اولیه K-Means++: بذرگذاری تصادفی ساده اغلب به کمینه‌های محلی نابهینه می‌انجامد. موتور ما از الگوریتم بذرگذاری احتمالاتی K-Means++ استفاده می‌کند و مرکزوارهای اولیه خوشه را تا حد ممکن دور از یکدیگر در فضای رنگ اقلیدسی انتخاب می‌کند و همگرایی سریع و پایدار را تضمین می‌کند. ۲. امید-بیشینه‌سازی (الگوریتم Lloyd): در گام تخصیص، هر پیکسل بر اساس کمینه فاصله اقلیدسی به نزدیک‌ترین مرکزوار خوشه اختصاص می‌یابد. در گام به‌روزرسانی، مرکزوارها به‌عنوان مرکز جرم پیکسل‌های اختصاص‌یافته دوباره محاسبه می‌شوند: $\boldsymbol{\mu}_j = \frac{1}{|S_j|} \sum_{\mathbf{p}_i \in S_j} \mathbf{p}_i$. این چرخه تا زمانی تکرار می‌شود که مختصات مرکزوارها کمتر از آستانه همگرایی $\epsilon$ جابه‌جا شوند. خوشه‌های حاصل، خانواده‌های رنگی اصیل تصویر را جدا می‌کنند — و رنگ‌های زنده سوژه پیش‌زمینه، تُن‌های ظریف پوست و سایه‌های غنی را با دقت ریاضی از هم متمایز می‌سازند.

کوانتیزه‌سازی مقایسه‌ای: K-Means در برابر Median Cut و Octree

برای درک برتری خوشه‌بندی K-Means در تولید پالت زیبایی‌شناختی، مقایسه آن با الگوریتم‌های تاریخی کوانتیزه‌سازی رنگ مفید است: ۱. الگوریتم Median Cut: که از نظر تاریخی برای تولید پالت GIF ‏۸ بیتی به کار می‌رفت، مکعب رنگ RGB را بارها در امتداد میانه بلندترین بعدش تقسیم می‌کند. اگرچه از نظر محاسباتی سریع است، جعبه‌های محدودکننده را دلبخواهانه می‌بُرد، اغلب خوشه‌های رنگی طبیعی را دو نیم می‌کند و میانگین‌های میانی گل‌آلود تولید می‌کند. ۲. کوانتیزه‌سازی رنگ Octree: فضای RGB را به‌صورت درختی سلسله‌مراتبی و هشت‌شاخه مدل می‌کند که گره‌های برگ آن نماینده سبدهای رنگ‌اند. کوانتیزه‌سازی Octree برای تولید جدول‌های جست‌وجوی ۲۵۶ رنگی فوق‌العاده کم‌مصرف از نظر حافظه است، اما ظرافت ادراکی لازم برای استخراج پالت‌های طراحی کوچک و بسیار متمایز ۳ تا ۸ نمونه‌ای را ندارد. ۳. خوشه‌بندی K-Means: چون K-Means واریانس مکانی را به‌صورت تکراری بهینه می‌کند، سرخوشه‌ها را به‌طور طبیعی روی گروه‌بندی‌های رنگی متراکم متمرکز می‌کند. چه یک نقاشی رنگ روغن با درجه‌بندی‌های ظریف قلم‌مو را تحلیل کنید چه رندر شیک یک محصول سازمانی را، K-Means نمونه‌های غالب متمایز و از نظر بصری چشمگیری تولید می‌کند که ادراک انسان را دقیقاً بازتاب می‌دهند.

تم‌سازی تطبیقی رابط کاربری و رابط‌های پویای آگاه از محتوا

استخراج رنگ غالب فناوری بنیادینی است که تجربه‌های کاربری دیجیتال تطبیقی مدرن را پشتیبانی می‌کند: ۱. پخش‌کننده‌های رسانه پویا: اپلیکیشن‌های پخش جریانی در سطح جهانی (مانند Spotify و Apple Music) رنگ‌های غالب را در زمان واقعی از طرح جلد آلبوم استخراج و گرادیان‌های پس‌زمینه پخش‌کننده، نوارهای پیشرفت قطعه و سربرگ‌های ناوبری را به‌صورت پویا رنگ‌آمیزی می‌کنند. این کار ارائه‌ای فراگیر و آگاه از محتوا می‌سازد که برای هر آلبوم اختصاصی به نظر می‌رسد. ۲. صفحات فرود محصولات تجارت الکترونیک: ویترین‌های آنلاین پربازده، فام‌های غالب محصول را استخراج می‌کنند تا دکمه‌های فراخوان، تأکیدهای نشان و پس‌زمینه بنرهای تبلیغاتی را به‌طور خودکار سبک‌دهی کنند و هماهنگی بصری فوری میان کالای ویژه و رابط پیرامون آن ایجاد کنند. ۳. راستی‌آزمایی خودکار کنتراست WCAG: موتور ما هر رنگ غالب استخراج‌شده را با تحلیل خودکار کنتراست رهنمودهای دسترس‌پذیری محتوای وب (WCAG 2.1) همراه می‌کند. ابزار با محاسبه روشنایی نسبی ($L = 0.2126R + 0.7152G + 0.0722B$) نشان می‌دهد که آیا متن پوششی سفید یا سیاه به نسبت‌های کنتراست الزامی ۴.۵:۱ ‏(AA) یا ۷:۱ ‏(AAA) می‌رسد یا خیر و طراحی رابط دسترس‌پذیر را از ابتدا تضمین می‌کند.

خودکارسازی کاتالوگ تجارت الکترونیک و طبقه‌بندی ویژگی بصری

در مدیریت کاتالوگ خرده‌فروشی سازمانی، دسته‌بندی هزاران قلم ورودی پوشاک، کفش و دکور خانه بر اساس رنگ هزینه عملیاتی بزرگی است. برچسب‌گذاری دستی انسانی کند، ذهنی و ناهماهنگ است (مثلاً یک کارشناس کالا لباسی را «زیتونی» و دیگری آن را «خاکی» برچسب می‌زند).

موتور استخراج رنگ غالب ما طبقه‌بندی ویژگی‌های کاتالوگ را خودکار می‌کند. با استخراج خوشه غالب اصلی و نگاشت مختصات آن به طبقه‌بندی‌های استاندارد نام‌گذاری رنگ (Pantone، ‏ISCC-NBS یا نام‌های رنگ CSS)، بک‌اندهای تجارت الکترونیک می‌توانند به‌طور خودکار ویژگی‌های جست‌وجوی دقیق اختصاص دهند. افزون بر این، معیار توزیع درصدی به کارشناسان کالا اجازه می‌دهد پوشاک تک‌رنگ یکدست را فوراً از پوشاک طرح‌دار چندرنگ تشخیص دهند و دقت فیلتر جست‌وجو بهبود یابد.

خط لوله اصلی هویت رنگی و سیستم طراحی

برای تبدیل تحلیل خام عکاسی به یک سیستم طراحی منسجم، «استخراج رنگ‌های غالب» را در یک زنجیره خلاقانه منظم در مجموعه 2run.tools ادغام کنید: ۱. جداسازی سوژه با «برش تصویر»: اگر عکس شما حاشیه‌های پهن نامرتبط یا شلوغی حواس‌پرت‌کن استودیو دارد، ابتدا به‌طور تنگ روی سوژه اصلی برش دهید. ۲. استخراج خوشه‌های غالب با «استخراج رنگ‌های غالب»: ۳، ۵، ۶، ۸ یا ۱۰ خوشه رنگ غالب برتر را استخراج کنید و تفکیک دقیق درصد سطح را مشاهده کنید. ۳. گسترش هارمونیک با «ساخت پالت رنگ»: رنگ اصلی برند استخراج‌شده را به «ساخت پالت رنگ» بفرستید تا شیب‌های مکمل، آنالوگ و سه‌گانه ساخته شوند. ۴. قاب‌بندی گرافیک برنددار: از نمونه پس‌زمینه استخراج‌شده درون «افزودن حاشیه» یا «پوشش رنگی» استفاده کنید تا دارایی‌های بازاریابی یکپارچه بصری بسازید. ۵. پاک‌سازی حریم خصوصی و تحویل وب: فراداده حساس دوربین را با «حذف فراداده EXIF و GPS» پاک کنید و سپس دارایی‌های وب را با «فشرده‌سازی تصویر» یا «تبدیل PNG به WebP» فشرده کنید.

💡نکات حرفه‌ای برای تحلیل رنگ غالب در سطح استودیو

  • •۵ خوشه رنگ استخراج کنید تا قاعده کلاسیک ۶۰-۳۰-۱۰ طراحی داخلی و رابط کاربری رعایت شود: ۶۰٪ پایه غالب، ۳۰٪ ساختار ثانویه و ۱۰٪ تأکید.
  • •اگر سوژه شما در مقایسه با پس‌زمینه عظیم استودیو کوچک است، ابتدا از «برش تصویر» استفاده کنید تا محصول برای وزن‌دهی دقیق‌تر خوشه‌ها جدا شود.
  • •نشان‌های کنتراست WCAG را روی هر نمونه بررسی کنید تا فوراً بدانید متن سفید یا سیاه روی آن پس‌زمینه دسترس‌پذیر است یا خیر.
  • •ویژگی‌های سفارشی CSS خروجی‌گرفته را مستقیماً در شیوه‌نامه Tailwind، ‏Next.js یا CSS خود کپی کنید تا تم فوراً هم‌گام شود.
  • •از توزیع درصدی استفاده کنید تا تأیید کنید محصول اصلی شما در ترکیب‌بندی کلی سلسله‌مراتب بصری کافی دارد.

🛡️زیرنمونه‌برداری بوم، الگوریتم Lloyd برداری‌شده و حریم خصوصی سمت کاربر

تکرار خوشه‌بندی K-Means روی یک عکس خام ۲۴ مگاپیکسلی (بیش از ۲۴ میلیون بردار سه‌بعدی) به میلیاردها محاسبه فاصله ممیز شناور نیاز دارد و توقف‌های اجرایی شدیدی در مرورگر ایجاد می‌کند. موتور «استخراج رنگ‌های غالب» ما این چالش را از طریق زیرنمونه‌برداری مکانی هوشمند حل می‌کند. هنگام دریافت تصویر، موتور یک نماینده تحلیل HTML5 Canvas خارج از صفحه با مقیاس شبکه بهینه $150 \times 150$ ‏(۲۲٬۵۰۰ بردار پیکسل نماینده) رندر می‌کند. در آمار مکانی، یک نمونه یکنواخت ۲۲٬۵۰۰ پیکسلی در سراسر تصویر، هیستوگرام رنگی واقعی و توزیع چگالی خوشه‌ها را با اطمینان آماری بیش از ۹۹.۸٪ حفظ می‌کند. مقداردهی اولیه K-Means++ و حلقه‌های امید-بیشینه‌سازی Lloyd با استفاده از TypedArrayهای تخت و پیوسته (`Float32Array` برای مرکزوارها، `Uint8Array` برای تخصیص‌ها) پیاده‌سازی می‌شوند. چون محاسبات فاصله اقلیدسی برداری در خطوط پیوسته کش L1 پردازنده و بدون تخصیص شیء انجام می‌شوند، الگوریتم در کمتر از ۲۵ میلی‌ثانیه به همگرایی دقیق می‌رسد. نکته مهم اینکه همه زیرنمونه‌برداری، تکرارهای خوشه‌بندی و تبدیل‌های فضای رنگ ۱۰۰٪ به‌صورت محلی درون سندباکس حافظه مرورگر دستگاه شما اجرا می‌شوند. نمونه‌های اولیه محصول منتشرنشده، آثار هنری اختصاصی و دارایی‌های محرمانه مشتریان هرگز با سرورهای ابری خارجی تماس پیدا نمی‌کنند. حریم خصوصی مطلق سمت کاربر و امنیت داده سازمانی تضمین می‌شود.

فناوری: WebAssembly • Web Workers چندرشته‌ای • HTML5 Canvas API

حریم خصوصی: فایل‌ها از دستگاه شما خارج نمی‌شوند و در فضای ابری ذخیره نمی‌شوند؛ آمار فقط با رضایت شما اجرا می‌شود.

چرا ابزارهای مبتنی بر مرورگر؟

وقتی در 2run tools تصویری را فشرده یا PDFی را ادغام می‌کنید، کد با استفاده از WebAssembly و Web Workers داخل زبانه مرورگر شما اجرا می‌شود. ما هرگز فایل‌های شما را به سرور دوردست ارسال نمی‌کنیم. گزارش‌های مالی، عکس‌های شخصی و قراردادهای شما از دستگاهتان خارج نمی‌شوند.

حریم خصوصی کاملدر مرورگر
پردازش فوریرم سریع
واقعاً نامحدودبدون محدودیت

پرسش‌های متداول درباره استخراج رنگ‌های غالب

خوشه‌بندی K-Means چه تفاوتی با شمردن پرتکرارترین پیکسل‌ها دارد؟▾

شمردن پرتکرارترین پیکسل‌ها فقط مقادیر رنگ یکسان را شناسایی می‌کند که پس‌زمینه‌های تختی مانند دیوارهای سفید استودیو یا آسمان آبی را بیش از حد نمایندگی می‌کند. K-Means سایه‌های مشابه را در فضای رنگ سه‌بعدی با هم خوشه‌بندی می‌کند و خانواده‌های رنگ غالب واقعی مانند تُن پوست، لباس و تأکیدهای سوژه را حتی اگر مساحت فیزیکی کمتری داشته باشند شناسایی می‌کند.

چند خوشه رنگ باید استخراج کنم؟▾

استخراج ۵ رنگ برای طراحی گرافیک و برندینگ استاندارد است، زیرا یک پایه غالب (پس‌زمینه)، یک رنگ ساختاری ثانویه و سه تُن تأکیدی فراهم می‌کند. برای کارت‌های ساده رابط ۳ رنگ کافی است؛ برای آثار هنری پیچیده، ۸ رنگ جزئیات اتمسفریک عمیقی فراهم می‌کند.

ابزار تفکیک درصدی هر رنگ را چگونه محاسبه می‌کند؟▾

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

نشان‌های دسترس‌پذیری WCAG که کنار هر نمونه نمایش داده می‌شوند چیست؟▾

نشان‌های WCAG نسبت کنتراست میان نمونه رنگ استخراج‌شده و متن سیاه (#000000) یا سفید (#FFFFFF) استاندارد را محاسبه می‌کنند. این به توسعه‌دهندگان فرانت‌اند می‌گوید که آیا آن رنگ برای استفاده به‌عنوان پس‌زمینه دکمه یا بنر طبق قوانین دسترس‌پذیری ایمن است یا خیر.

آیا می‌توانم رنگ‌های استخراج‌شده را به‌صورت متغیرهای CSS برای توسعه وب خروجی بگیرم؟▾

بله! ابزار ما خروجی یک‌کلیکی برای توکن‌های ویژگی سفارشی CSS (مانند `--color-primary`، `--color-secondary`) فراهم می‌کند و چسباندن پالت استخراج‌شده را مستقیماً در پروژه‌های وب یا پیکربندی‌های Tailwind شما آسان می‌کند.

آیا می‌توانم چند تصویر را پشت سر هم در مرورگر تحلیل کنم؟▾

بله. می‌توانید هر زمان تصاویر جدید را به استودیو بکشید. همه پردازش‌ها به‌صورت محلی روی پردازنده دستگاه شما در چند میلی‌ثانیه اجرا می‌شوند و به شما اجازه می‌دهند بدون تأخیر سرور از ده‌ها دارایی پالت استخراج کنید.

آیا عکس‌های محصول خصوصی یا آثار هنری من روی سروری آپلود می‌شوند؟▾

هرگز. 2run.tools تحت معماری حریم خصوصی سازش‌ناپذیر سمت کاربر کار می‌کند. همه رمزگشایی تصویر، زیرنمونه‌برداری مکانی و یادگیری ماشین K-Means ‏۱۰۰٪ به‌صورت محلی در حافظه مرورگر دستگاه شما اجرا می‌شوند. فایل‌های شما هرگز با سرورهای خارجی یا پایگاه‌داده‌های ابری تماس پیدا نمی‌کنند.

سایت‌هایی با بارگذاری زیر ۰٫۸ ثانیه
مهندسی وب با امتیاز ۱۰۰/۱۰۰ Lighthouse
بررسی
بازوی توسعه برای آژانس‌های طراحی
White-label • NDA دوطرفه
همکاری
سئوی فنی با کد
Schema عمیق • بدون هدررفت
گسترش سئو
وب‌اپ‌ها و SaaS سفارشی
مالکیت ۱۰۰٪ کد • مقیاس Edge
ساخت
بازدید را به فروش تبدیل کنید
+۳۴٪ افزایش فروش • رفع گلوگاه‌ها
بررسی