Yükleme yok, %100 yerel, hesap yok

Renk Paleti Çıkarıcı

Baskın renklerini çıkarmak için bir görüntü yükleyin. Her renk örneği için HEX kodları alın, tek tıkla kopyalayın. Her şey tarayıcınızda çalışır.

Renk paleti çıkarıcı nasıl çalışır

Renk Paleti Çıkarıcı, Canvas'taki piksel verileri üzerinde k-ortalamalar kümeleme algoritması çalıştırarak görüntünüzdeki en görsel açıdan baskın renkleri analiz eder ve belirler. Sonuç, tek tek kopyalayabileceğiniz HEX değerleriyle birlikte renk örnekleri kümesidir. Tarayıcınızdan görüntü baytı çıkmaz; piksel örnekleme ana iş parçacığı duyarlı kalırken Web Worker'da yerel olarak çalışır.

Çıkarma işlemi, yüz binlerce bireysel piksel rengini daha az sayıda temsili kümeye gruplandırır. Çıktı renk sayısı yapılandırılabilirdir; böylece beş rengen oluşan sıkı bir palet veya daha geniş on iki renk kümesi çıkarabilirsiniz. Bu, bir logodan marka renklerini hızla çekmek, bir fotoğrafın baskın tonlarını ilham panosu için belirlemek veya kullanıcı yüklemeli bir görüntüde hangi renklerin göründüğünü kontrol etmek için kullanışlıdır.

Yazan: Bastien Sulyan

Renk paleti çıkarıcı nasıl kullanılır, adım adım

  1. Görüntünüzü yükleme alanına sürükleyin veya göz atmak için tıklayın.
  2. Çıkarmak istediğiniz renk sayısını ayarlayın (genellikle 5 ile 12 arasında).
  3. Çıkar'a tıklayın. Piksel kümeleme Web Worker'da yerel olarak çalışır.
  4. Ortaya çıkan renk örneklerine ve HEX değerlerine bakın.
  5. HEX kodunu panoya kopyalamak için herhangi bir örneğe tıklayın.

Yaygın kullanım örnekleri

  • Bir tasarımcı, yeni pazarlama materyallerinin mevcut renk hikayesiyle eşleştiğinden emin olmak için bir marka fotoğrafından baskın paleti çıkarıyor.
  • Bir geliştirici, eşleşen bir UI aksan rengi dinamik olarak oluşturmak için kullanıcı yüklemeli bir avatardaki ana renkleri belirliyor.
  • Bir sanatçı, birkaç referans görüntüden paletler çıkarıp çıkarılan HEX kodlarını karşılaştırarak referans ilham panosu oluşturuyor.
  • Bir blog yazarı, bir gönderi düzeni için tamamlayıcı metin ve düğme renkleri seçmek üzere başlık fotoğrafının beş baskın tonunu çıkarıyor.

Sık sorulan sorular

Renk çıkarma algoritması nasıl çalışır?

Araç, Canvas.getImageData() aracılığıyla görüntüden tüm piksel değerlerini okur, hız için bunları örnekler, ardından k-ortalamalar kümeleme çalıştırır. Her küme merkezı çıktı renklerinden biri olur. K-ortalamalar pikselleri renk yakınlığına göre gruplandırır, böylece baskın görsel tonlar merkez renkleri olarak ortaya çıkar.

Renkleri çıkarmak için görüntüyü yüklemek gerekiyor mu?

Hayır. Piksel örnekleme tarayıcınızdaki bir Web Worker içinde gerçekleşir. Görüntü yerel diskinizden okunur, bir OffscreenCanvas'a çizilir ve piksel dizisi bellekte işlenir. Veri cihazınızdan çıkmaz.

Neden çıkarılan renkler görüntüde gördüklerimden biraz farklı görünüyor?

K-ortalamalar merkezleri, piksel renkleri kümesinin matematiksel ortalamasını temsil eder. Çok yaygın olan ancak biraz değişen bir renk (hafif gradyan değişimleriyle mavi bir gökyüzü), işaret edebileceğiniz herhangi bir tam piksel değeri yerine ortalama rengi olan bir merkez üretir. Sonuç, belirli bir pikselin örneği değil, temsili bir ortalamadır.

Saydamlığa sahip fotoğraflardan palet çıkarabilir miyim?

Tamamen saydam pikseller (alfa = 0), Canvas arka plan dolgusuna bağlı olarak çıkarılan renkleri siyah veya beyaza yönlendirmesini önlemek için kümelemenin dışında tutulur. Yarı saydam pikseller alfa değerleriyle ağırlıklandırılarak örneğe dahil edilir.

Renk kodları hangi formatta?

Araç HEX kodları çıktılar (#3A7BD5 gibi). RGB, HSL veya diğer formatlara ihtiyacınız varsa, HEX değerini tüm yaygın renk modellerine dönüştüren Renk Dönüştürücü aracına kopyalayın.

İlgili araçlar

Her şeyi yerel tutun, tamamlayıcı araçları keşfedin.

Tüm görsel araçları