Əsas rəngləri çıxar

Fotodakı 5 əsas rəng nümunəsini alqoritmik olaraq hesablayın.

100% brauzerdə • 100% pulsuz

Şəkildən əsas rəngləri çıxar

Şəklinizi bura sürükləyin, fayllardan seçin və ya birbaşa buferdən yapışdırın.

Ətraflı texniki bələdçi•8 dəq oxu•2RUN Mühəndislik Komandası
100% brauzerdə • Sıfır yükləmə

K-Means klasterləşdirmə və xromatik çıxarma: əsas rəng təhlili, kvantlaşdırma və UI mövzulaşdırması üzrə texniki bələdçi

⚡Əsas rəngləri 3 sadə addımda necə çıxarmaq olar

1

1. Fotonuzu və ya qrafikanızı yükləyin

JPEG, PNG, WebP, AVIF və ya TIFF şəklinizi birbaşa çıxarma iş sahəsinə sürükləyin və ya yerli faylları seçmək üçün klikləyin. Şəkliniz xarici serverlərə heç bir bayt yükləmədən dərhal yerli brauzer RAM-ına yüklənir.

2

2. Palitra klaster ölçüsünü seçin

Hədəf klaster sayınızı seçin (3, 5, 6, 8 və ya 10 rəng). Vektorlaşdırılmış K-Means alqoritmimiz milyonlarla piksel vektorunu 30 millisaniyədən az müddətdə emal edir və dəqiq səth faiz göstəriciləri ilə yanaşı fərqli rəng nümunələrini göstərir.

3

3. Nümunələri kopyalayın və CSS tokenlərini ixrac edin

Çıxarılmış rəng nümunələrini yoxlayın, WCAG mətn oxunaqlılığı ballarını təsdiqləyin və HEX, RGB və ya HSL kodlarını kopyalamaq üçün klikləyin. İstehsala hazır CSS xüsusi xassələrini (`--color-primary`, `--color-secondary`) bir kliklə ixrac edin.

Fotonun, brend aktivinin, təsvirin və ya kommersiya məhsul çəkilişinin qəti xromatik kimliyini anlamaq müasir rəqəmsal dizaynın təməlidir. Tək yüksək ölçülü foto milyonlarla incə fərqli piksel dəyəri ehtiva edə bilsə də, insanın koqnitiv qavrayışı bu rəng okeanını təbii olaraq müəyyənedici, dominant ton nümunələrinin ahəngdar iyerarxiyasına sintez edir. İstifadəçi interfeysi mühəndisliyində, e-ticarət merçendayzinqində və rəqəmsal bədii rəhbərlikdə bu əsas dominant rəngləri müəyyən etmək dizaynerlərə adaptiv UI mövzuları yaratmağa, məhsul kataloqu kateqoriyalaşdırmasını avtomatlaşdırmağa və ahəngdar brendinq sistemləri formalaşdırmağa imkan verir.

Lakin rəngləri damcı ilə əl ilə nümunələmək subyektiv, yavaş və insan səhvlərinə meyllidir, sadəlövh alqoritmik yanaşmalar — məsələn, sadəcə ən çox rast gəlinən piksel dəyərlərini saymaq — isə düz studiya fonlarını və ya mavi səmaları həddindən artıq təmsil edərək əsas obyektin canlı rənglərini tamamilə nəzərə almadan ardıcıl uğursuz olur. Bundan əlavə, xüsusi məhsul fotoqrafiyasını və ya yayımlanmamış təsvirləri üçüncü tərəf bulud təhlil API-lərinə yükləmək ciddi intellektual mülkiyyət riskləri yaradır. Brauzerdə işləyən Əsas rəngləri çıxar alətimiz vektorlaşdırılmış K-Means nəzarətsiz maşın öyrənməsini birbaşa brauzer tabınızda tətbiq edir. Cihazınızın yaddaşında xam piksel massivləri üzərində işləyən mühərrikimiz milyonlarla rəng vektorunu dəqiq faiz paylanmaları, HEX/RGB/HSL kodları və WCAG əlçatanlıq kontrast balları ilə riyazi cəhətdən ciddi dominant nümunələrə klasterləşdirir — hamısı sıfır server yükləməsi, sıfır şəbəkə gecikməsi və tam brauzer tərəfli məlumat məxfiliyi ilə.

Tam texniki bələdçini oxu

3D RGB fəzasında K-Means rəng klasterləşdirməsinin riyaziyyatı

Statistik hesablama və kompüter görməsində rəng klasterləşdirməsi şəklin piksel məlumatını üçölçülü Evklid rəng fəzası $\mathbb{R}^3$ daxilində yüksək sıxlıqlı nöqtə buludu kimi modelləşdirir; burada hər piksel $i$ məkan vektor koordinatı kimi təqdim olunur: $\mathbf{p}_i = [R_i, G_i, B_i]^T$. Diskret eyni dəyərləri saymaq əvəzinə K-Means alqoritmi $N$ piksel vektorunu klaster daxili kvadratlar cəmini (WCSS), həmçinin klaster ətaləti kimi tanınan göstəricini minimuma endirməklə $k$ fərqli klasterə $S = \{S_1, S_2, \dots, S_k\}$ bölür: $$\underset{S}{\arg\min} \sum_{j=1}^{k} \sum_{\mathbf{p}_i \in S_j} \|\mathbf{p}_i - \boldsymbol{\mu}_j\|^2$$ Burada $\boldsymbol{\mu}_j$ $S_j$ klasterinin riyazi ortasını (sentroidini) ifadə edir. Mühərrikimiz bu klasterləşdirmə prosesini iki fazalı iterativ dövrə ilə optimallaşdırır:

1. K-Means++ işə salınması: Sadəlövh təsadüfi toxumlama tez-tez suboptimal yerli minimumlara gətirib çıxarır. Mühərrikimiz K-Means++ ehtimal toxumlama alqoritmindən istifadə edir və ilkin klaster sentroidlərini Evklid rəng fəzasında bir-birindən mümkün qədər uzaq seçir, sürətli və sabit konvergensiyaya zəmanət verir. 2. Gözlənti-Maksimallaşdırma (Lloyd alqoritmi): Təyinat addımında hər piksel minimum Evklid məsafəsinə görə ən yaxın klaster sentroidinə təyin edilir. Yeniləmə addımında sentroidlər təyin edilmiş piksellərin kütlə mərkəzi kimi yenidən hesablanır: $\boldsymbol{\mu}_j = \frac{1}{|S_j|} \sum_{\mathbf{p}_i \in S_j} \mathbf{p}_i$. Bu dövrə sentroid koordinatları konvergensiya həddi $\epsilon$-dan az sürüşənə qədər təkrarlanır. Nəticədə alınan klasterlər şəklin həqiqi xromatik ailələrini ayırır — canlı ön plan obyekt boyalarını, incə dəri tonlarını və zəngin kölgələri riyazi dəqiqliklə fərqləndirir.

Müqayisəli kvantlaşdırma: K-Means, Median Cut və Octree alqoritmləri

Estetik palitra yaradılması üçün K-Means klasterləşdirməsinin üstünlüyünü qiymətləndirmək üçün onu tarixi rəng kvantlaşdırma alqoritmləri ilə müqayisə etmək faydalıdır: 1. Median Cut alqoritmi: Tarixən 8 bitlik GIF palitrası yaradılması üçün istifadə olunan Median Cut RGB rəng kubunu ən uzun ölçüsünün medianı boyunca təkrar bölür. Hesablama baxımından sürətli olsa da, hüdud qutularını ixtiyari kəsir, tez-tez təbii rəng klasterlərini ikiyə bölür və bulanıq aralıq ortalamalar yaradır. 2. Octree rəng kvantlaşdırması: RGB fəzasını yarpaq düyünlərinin rəng qutularını təmsil etdiyi iyerarxik səkkizbudaqlı ağac kimi modelləşdirir. Octree kvantlaşdırması 256 rəngli axtarış cədvəlləri yaratmaq üçün müstəsna dərəcədə yaddaşa qənaətcildir, lakin kiçik, yüksək dərəcədə fərqli 3–8 nümunəli dizayn palitralarını çıxarmaq üçün lazım olan qavrayış incəliyindən məhrumdur. 3. K-Means klasterləşdirməsi: K-Means məkan dispersiyasını iterativ optimallaşdırdığı üçün klaster başlıqlarını təbii olaraq sıx xromatik qruplaşmaların mərkəzinə yerləşdirir. İstər incə fırça keçidləri olan yağlı boya rəsmini, istərsə də zərif korporativ məhsul renderini təhlil edin — K-Means insan qavrayışını dəqiq əks etdirən fərqli, vizual olaraq təsirli dominant nümunələr verir.

Adaptiv UI mövzulaşdırması və dinamik məzmuna həssas interfeyslər

Əsas rənglərin çıxarılması müasir adaptiv rəqəmsal istifadəçi təcrübələrini təmin edən təməl texnologiyadır: 1. Dinamik media pleyerləri: Dünya səviyyəli yayım tətbiqləri (Spotify və Apple Music kimi) albom üz qabığı təsvirindən dominant rəngləri real vaxtda çıxarır, media pleyer fon qradiyentlərini, trek irəliləyiş panellərini və naviqasiya başlıqlarını dinamik rəngləyir. Bu, hər alboma xüsusi hiss olunan cəlbedici, məzmuna həssas təqdimat yaradır. 2. E-ticarət məhsul səhifələri: Yüksək konversiyalı onlayn mağazalar hərəkətə çağırış düymələrini, nişan vurğularını və reklam banner fonlarını avtomatik üslublamaq üçün dominant məhsul çalarlarını çıxarır və təqdim olunan məhsul ilə ətraf interfeys arasında ani vizual harmoniya yaradır. 3. Avtomatlaşdırılmış WCAG kontrast yoxlaması: Mühərrikimiz hər çıxarılmış dominant rəngi avtomatlaşdırılmış Veb Məzmun Əlçatanlığı Qaydaları (WCAG 2.1) kontrast təhlili ilə cütləşdirir. Nisbi parlaqlığı ($L = 0.2126R + 0.7152G + 0.0722B$) hesablayaraq alət ağ və ya qara örtük mətninin məcburi 4.5:1 (AA) və ya 7:1 (AAA) kontrast nisbətlərinə çatıb-çatmadığını göstərir və əlçatan interfeys dizaynına ilkin olaraq zəmanət verir.

E-ticarət kataloqunun avtomatlaşdırılması və vizual faset təsnifatı

Korporativ pərakəndə kataloq idarəetməsində minlərlə daxil olan geyim, ayaqqabı və ev dekoru məhsulunu rəngə görə kateqoriyalaşdırmaq böyük əməliyyat xərcidir. Əl ilə insan teqləməsi yavaş, subyektiv və qeyri-ardıcıldır (məsələn, bir merçendayzer geyimi 'zeytun', digəri isə 'xaki' kimi teqləyir).

Əsas rəng çıxarma mühərrikimiz kataloq faset təsnifatını avtomatlaşdırır. Əsas dominant klasteri çıxarıb onun koordinatlarını standart rəng adlandırma taksonomiyalarına (Pantone, ISCC-NBS və ya CSS rəng adları) xəritələməklə e-ticarət backendləri dəqiq axtarış fasetlərini avtomatik təyin edə bilər. Bundan əlavə, faiz paylanması göstəricisi merçendayzerlərə bütöv birrəngli geyimləri çoxrəngli naxışlı geyimlərdən dərhal ayırmağa imkan verir və axtarış filtrləmə dəqiqliyini yaxşılaşdırır.

Əsas rəng kimliyi və dizayn sistemi axını

Xam foto təhlilini ahəngdar dizayn sisteminə çevirmək üçün Əsas rəngləri çıxar alətini 2run.tools dəsti üzrə nizamlı yaradıcı zəncirə inteqrasiya edin: 1. Şəkli kəs ilə obyektin ayrılması: Fotonuzda geniş əhəmiyyətsiz kənarlar və ya diqqəti yayındıran studiya qarışıqlığı varsa, əvvəlcə əsas obyektinizə qədər sıx kəsin. 2. Əsas rəngləri çıxar ilə dominant klasterlərin çıxarılması: Dəqiq səth faiz bölgüsünü müşahidə edərək ən yaxşı 3, 5, 6, 8 və ya 10 dominant rəng klasterini çıxarın. 3. Rəng palitrası yarat ilə harmonik genişlənmə: Tamamlayıcı, analoji və triad keçidləri qurmaq üçün çıxarılmış əsas brend rənginizi Rəng palitrası yarat alətinə ötürün. 4. Brendli qrafik çərçivələmə: Vizual olaraq vahid marketinq aktivləri yaratmaq üçün çıxarılmış fon nümunənizi Çərçivə əlavə et və ya Rəng tonu örtüyü daxilində istifadə edin. 5. Məxfilik təmizlənməsi və veb çatdırılması: EXIF və GPS metadatasını sil ilə həssas kamera metadatasını silin, sonra veb aktivlərini Şəkli sıx və ya PNG-dən WebP-yə ilə sıxın.

💡Studiya səviyyəli əsas rəng təhlili üçün peşəkar tövsiyələr

  • •Klassik 60-30-10 interyer və UI dizayn qaydasına əməl etmək üçün 5 rəng klasteri çıxarın: 60% dominant baza, 30% ikinci dərəcəli struktur və 10% vurğu.
  • •Obyektiniz böyük studiya fonu ilə müqayisədə kiçikdirsə, daha dəqiq klaster çəkisi üçün məhsulu ayırmaq məqsədilə əvvəlcə Şəkli kəs alətindən istifadə edin.
  • •Həmin fon üzərində ağ və ya qara mətnin əlçatan olub-olmadığını dərhal bilmək üçün hər nümunədəki WCAG kontrast nişanlarını yoxlayın.
  • •Ani mövzu sinxronizasiyası üçün ixrac edilmiş CSS xüsusi xassələrini birbaşa Tailwind, Next.js və ya CSS üslub cədvəlinizə kopyalayın.
  • •Əsas məhsulunuzun ümumi kompozisiyada kifayət qədər vizual iyerarxiyaya malik olduğunu yoxlamaq üçün faiz paylanmasından istifadə edin.

🛡️Kətan alt nümunələməsi, vektorlaşdırılmış Lloyd alqoritmi və brauzer tərəfli məxfilik

K-Means klasterləşdirməsini xam 24 meqapiksellik foto (24 milyondan çox 3D vektor) üzrə iterasiya etmək milyardlarla üzən nöqtəli məsafə hesablaması tələb edər və ciddi brauzer icra dayanmalarına səbəb olardı. Əsas rəngləri çıxar mühərrikimiz bu problemi ağıllı məkan alt nümunələməsi ilə həll edir. Şəkil yükləndikdə mühərrik optimal $150 \times 150$ şəbəkəyə (22,500 təmsilçi piksel vektoru) miqyaslanmış ekrandan kənar HTML5 Canvas təhlil proksisi göstərir. Məkan statistikasında şəkil üzrə 22,500 pikseldən ibarət vahid nümunə həqiqi xromatik histoqramı və klaster sıxlıq paylanmasını 99.8%-dən yüksək statistik etibarlılıqla qoruyur. K-Means++ işə salınması və Lloyd gözlənti-maksimallaşdırma dövrələri bitişik düz TypedArray-lərdən (sentroidlər üçün `Float32Array`, təyinatlar üçün `Uint8Array`) istifadə etməklə həyata keçirilir. Vektor Evklid məsafə hesablamaları obyekt ayrılmaları olmadan fasiləsiz CPU L1 keş xətlərində işlədiyi üçün alqoritm 25 millisaniyədən az müddətdə ciddi konvergensiyaya çatır. Ən əsası, bütün alt nümunələmə, klasterləşdirmə iterasiyaları və rəng fəzası çevirmələri 100% cihazınızın brauzer yaddaşı sandboxunda yerli icra olunur. Yayımlanmamış məhsul prototipləri, xüsusi təsvirlər və məxfi müştəri aktivləri heç vaxt xarici bulud serverlərinə toxunmur. Mütləq brauzer tərəfli məxfilik və korporativ məlumat təhlükəsizliyi təmin olunur.

Texnologiya: WebAssembly • Çoxaxınlı Web Workers • HTML5 Canvas API

Məxfilik: Fayllar cihazınızı tərk etmir və buludda saxlanmır; analitika yalnız razılığınızla işləyir.

Niyə brauzer əsaslı alətlər?

2run tools-da şəkli sıxdıqda və ya PDF birləşdirdikdə kod WebAssembly və Web Workers vasitəsilə brauzer tabınızda işləyir. Fayllarınızı heç vaxt uzaq serverə göndərmirik. Maliyyə hesabatlarınız, şəxsi fotolarınız və müqavilələriniz cihazınızı tərk etmir.

Tam məxfilikBrauzerdə
Ani emalSürətli RAM
Həqiqətən limitsizLimitsiz

Əsas rənglərin çıxarılması haqqında tez-tez verilən suallar

K-Means klasterləşdirməsi ən çox rast gəlinən pikselləri saymaqdan nə ilə fərqlənir?▾

Ən çox rast gəlinən pikselləri saymaq yalnız eyni rəng dəyərlərini müəyyən edir; bu, ağ studiya divarları və ya mavi səmalar kimi düz fonları həddindən artıq təmsil edir. K-Means oxşar çalarları 3D rəng fəzasında birlikdə klasterləşdirir və daha az fiziki sahə tutsalar belə dəri tonları, geyim və obyekt vurğuları kimi həqiqi dominant rəng ailələrini müəyyən edir.

Neçə rəng klasteri çıxarmalıyam?▾

5 rəng çıxarmaq qrafik dizayn və brendinq üçün standartdır, çünki dominant baza (fon), ikinci dərəcəli struktur rəngi və üç vurğu tonu təmin edir. Sadə UI kartları üçün 3 rəng kifayətdir; mürəkkəb təsvirlər üçün isə 8 rəng dərin atmosfer detalı təmin edir.

Alət hər rəng üçün faiz bölgüsünü necə hesablayır?▾

Klasterləşdirmə konvergensiyaya çatdıqdan sonra şəkildəki hər piksel ən yaxın klaster sentroidinə təyin edilir. Faiz həmin klasterə aid piksellərin ümumi sayının şəklin ümumi piksel sayına bölünməsini ifadə edir.

Hər nümunənin yanında göstərilən WCAG əlçatanlıq nişanları nədir?▾

WCAG nişanları çıxarılmış rəng nümunəsi ilə standart qara (#000000) və ya ağ (#FFFFFF) mətn arasındakı kontrast nisbətini hesablayır. Bu, frontend tərtibatçılarına rəngin əlçatanlıq qanunları çərçivəsində düymə və ya banner fonu kimi istifadə üçün təhlükəsiz olub-olmadığını bildirir.

Çıxarılmış rəngləri veb tərtibatı üçün CSS dəyişənləri kimi ixrac edə bilərəmmi?▾

Bəli! Alətimiz CSS xüsusi xassə tokenləri (`--color-primary`, `--color-secondary` kimi) üçün bir kliklə ixrac təqdim edir və çıxarılmış palitranı birbaşa veb layihələrinizə və ya Tailwind konfiqurasiyalarınıza yapışdırmağı asanlaşdırır.

Brauzerimdə bir neçə şəkli ardıcıl təhlil edə bilərəmmi?▾

Bəli. İstənilən vaxt yeni şəkilləri studiyaya sürükləyə bilərsiniz. Bütün emal cihazınızın prosessorunda millisaniyələr ərzində yerli icra olunur və sıfır server gecikməsi ilə onlarla aktivdən palitra çıxarmağa imkan verir.

Şəxsi məhsul fotolarım və ya təsvirlərim hər hansı serverə yüklənirmi?▾

Heç vaxt. 2run.tools güzəştsiz brauzer tərəfli məxfilik arxitekturası altında işləyir. Bütün şəkil dekodlaması, məkan alt nümunələməsi və K-Means maşın öyrənməsi 100% cihazınızın brauzer yaddaşında yerli icra olunur. Fayllarınız heç vaxt xarici serverlərə və ya bulud verilənlər bazalarına toxunmur.

0.8 saniyədən sürətli saytlar
100/100 Lighthouse veb mühəndisliyi
Yoxla
Dizayn agentlikləri üçün dev qolu
White-label • Qarşılıqlı NDA
Tərəfdaş
Kodla texniki SEO
Dərin Schema • Sıfır israf
SEO-nu böyüt
Fərdi veb tətbiqlər və SaaS
100% kod sahibliyi • Edge miqyası
Qur
Trafiki satışa çevirin
+34% satış artımı • Darboğazları düzəldin
Yoxla