Renk seçiciye otomatik palet çıkarma özelliğini neden ekledik

Renk seçicimiz her zaman bir resim yükleyip herhangi bir piksele tıklayarak tam HEX, RGB ve HSL değerini almanıza izin verdi. Bu, “bu belirli nokta hangi renk?” sorusuna cevap verir — kullanışlıdır, ama çoğu insanın bir fotoğraf yüklerken gerçekte aklındaki soru bu değildir. Genellikle soru şudur: “bu resmin genel renk şeması nedir?” — bir logodan marka paletini çıkarmak veya bir web sitesinin renk şeması için referans bir fotoğrafın havasını yakalamak gibi.

Tek piksel örneklemesi buna cevap veremez. Bu yüzden palet çıkarma özelliğini ekledik: bir resim yükleyin, araç artık en baskın sekiz rengi otomatik olarak çıkarıp tıklanabilir renk örnekleri olarak gösteriyor.

Nasıl çalışır

Herhangi bir yapay zeka modeli kullanılmıyor ve hiçbir şey hiçbir yere yüklenmiyor — birkaç milisaniyede çalışan basit bir frekans sayma algoritması bu:

1. Resim 80×80’lik bir tuvale küçültülür. Renk istatistikleri için tam çözünürlüğe gerek yoktur ve küçültme, büyük fotoğraflarda bile her şeyi anında tutar.
2. Her piksel, renginin kabalaştırılmış bir versiyonuna göre kovaya atanır — her RGB kanalının en üst 5 biti, böylece görsel olarak neredeyse aynı olan pikseller her biri ayrı bir renk olarak sayılmak yerine aynı kovaya düşer.
3. Kovalar, içine kaç piksel düştüğüne göre sıralanır ve en büyük sekizi palet olur, her biri o kovadaki her şeyin ortalama rengi olarak gösterilir.

Hepsi bu kadar. Makine öğrenmesi yok, harici servis yok — sadece küçültme ve sayma, bu yüzden anında gerçekleşir ve tarayıcınızdan asla dışarı çıkmaz.

Bir örneğe tıklayın, kodu alın

Her palet örneği tıklanabilir: birine tıklayın ve aracın aktif rengi olsun, HEX, RGB ve HSL otomatik doldurulsun ve hex değeri aynı tıklamayla panonuza kopyalansın. Tüm paleti virgülle ayrılmış bir liste olarak istiyorsanız “tümünü kopyala” düğmesi de var — doğrudan bir tasarım aracına veya CSS özel özellikler bloğuna yapıştırmak için kullanışlı.

Deneyin

Renk seçici sayfasında herhangi bir resim — ekran görüntüsü, logo, fotoğraf — yükleyin, palet otomatik olarak altında görünecektir.