Resimden Renk Paleti

Nasıl kullanılır?

1. Bir fotoğraf seçin düğmesine tıklayın ya da kutuya bir görsel sürükleyin. Fotoğraf cihazınızda okunur.
2. Renk sayısını 5 ile 10 arasında seçin. Karmaşık bir fotoğraf daha fazla renk ister.
3. Her rengin hex kodunu, RGB ve HSL değerlerini ve resimdeki payını okuyun. Rengin yanındaki kopyala düğmesiyle hex kodunu kopyalayın.
4. Paleti dışa aktar altında CSS değişkeni olarak kopyala, Liste olarak kopyala ya da Renk şeridini indir (PNG) seçeneğini kullanın.

Renkler nasıl bulunur

Her piksel CIE L*a*b* renk uzayına çevrilir. Bu uzayda iki renk arasındaki uzaklık, gözün ayırt ettiği farka yakındır. Pikseller seçtiğiniz sayıda gruba k-means kümeleme yöntemiyle ayrılır; her grubun merkezi, piksellerin merkeze olan uzaklığı en küçük olacak şekilde yerleştirilir.

Başlangıç merkezleri k-means++ yöntemiyle, sabit bir tohum sayısıyla seçilir; bu yüzden aynı fotoğraf her zaman aynı paleti verir. Her renk, grubundaki piksellerin ortalamasıdır; payı ise grubun piksel sayısının tüm piksellere oranıdır.

Piksel → (L*, a*, b*)
Gruplar: her piksel en yakın merkeze katılır; merkez, piksellerinin ortalamasıdır
Renk = gruptaki ortalama RGB; pay = gruptaki piksel ÷ tüm pikseller

• Fotoğraf yaklaşık 2 megapiksele kadar bir kopyasıyla çözümlenir; büyük fotoğraflar da hızlı çalışır.
• Birbirine çok yakın tonlar tek renk olabilir. Fotoğrafta bir rengin çok tonu varsa, 10 renkli bir palet o rengi iki parçaya bölebilir.

Kodlar, paylar ve anlamları

Hex kodu, rengin kırmızı, yeşil ve mavi değerlerinin onaltılık sayılarla üç çift hâlde yazılmış biçimidir; RGB değerleri aynı sayılardır, onluk sistemde. HSL rengin tonunu renk çemberindeki açı olarak (0 kırmızı, 120 yeşil, 240 mavi), doygunluğunu gücü, parlaklığını ise ne kadar açık olduğu olarak verir.

Pay, rengin resmin pikselleri içindeki oranıdır, yani kapladığı alan. Küçük ve parlak bir nokta düşük paylı bir renk olabilir; büyük ve yumuşak bir arka plan ise birbirine benzeyen birçok tondan oluşan tek bir büyük pay verebilir.

• CSS değişkenlerini kopyalayarak renkleri bir web sayfasında ya da tasarımda kullanın: her renk --color-1, --color-2 gibi bir ad alır.
• PNG şeridi bir ilham panosu ya da çıktı için uygundur: her renk için bir örnek ve altında hex kodu.

Sık sorulan sorular