Görselden Renk Paleti Çıkarıcı

Görselden Renk Paleti Çıkarıcı

Herhangi bir görseli yükleyin ve baskın renklerini anında çıkarın. Araç her pikseli okur, medyan kesim niceleme ile benzer renkleri gruplar ve hex kodları, RGB değerleri ve yüzdelik oranlarla sıralanmış bir renk paleti döndürür. Tüm işlem tarayıcınızda gerçekleşir.

Renk Paleti Çıkarıcı nedir?

Bir renk paleti çıkarıcı bir görüntüyü analiz eder ve baskın renklerini tanımlayarak her rengin hex kodlarını, RGB değerlerini ve temsil ettiği piksel yüzdesini içeren sıralı bir palet döndürür. Bu, bir logodan marka renklerini eşleştirmek, fotoğraflardan tutarlı tasarım temaları oluşturmak ve referans görüntülerden UI renk sistemleri oluşturmak için kullanışlıdır. En yaygın algoritma, 3D renk uzayında benzer pikselleri gruplayan ve her grubu ortalamaya alan median cut quantization’dır.

Nasıl Kullanılır

1. Bir görsel sürükleyip bırakın veya tıklayarak yükleyin (PNG, JPEG, WebP, GIF, BMP veya SVG)
2. Renk sayısını ayarlayın (2-16 renk)
3. Herhangi bir numunenin Kopyala butonuna tıklayarak hex kodunu kopyalayın
4. Paleti CSS değişkenleri veya JSON olarak dışa aktarın

Medyan Kesim Niceleme Nasıl Çalışır

Her pikselin rengi, kırmızı, yeşil ve mavi eksenlerinde 3 boyutlu bir noktadır. 800x800 boyutundaki bir görsel 640.000 nokta üretir. Medyan kesim, tüm bu noktaların etrafına bir sınırlayıcı kutu yerleştirir ve en uzun eksen boyunca medyandan ikiye böler. Her kutu, hedef kutu sayısına ulaşılana kadar tekrar tekrar bölünür. Her kutudaki piksellerin ortalaması alınarak tek bir numune rengi üretilir.

Bu yaklaşım, basit kümelemeden daha iyi renk kontrastı korur. Medyandan bölme, her kutunun yaklaşık olarak eşit sayıda piksel içermesini sağlar, böylece palet görselin gerçek renk dağılımını temsil eder.

Araç, nicelemeden önce saydam pikselleri (alfa < 25), siyaha yakın pikselleri (ortalama < 15) ve beyaza yakın pikselleri (ortalama > 240) filtreler. Bu pikseler nadiren yararlı palet bilgisi sağlar.

Farklı Renk Sayıları Ne Zaman Kullanılmalı

2-4 renk düz, posterleştirilmiş paletler üretir. Minimal logo renk çıkarma veya sadeleştirilmiş marka paletleri için kullanın.

6-8 renk çoğu görsel için dengeli bir temsil sağlar. Doğal ışıklı fotoğraflar, manzaralar ve ürün görselleri bu aralıkta iyi çalışır.

10-16 renk gradyanlar, gün batımları, kumaş dokuları ve geniş ton aralığına sahip diğer görsellerdeki ince renk değişimlerini yakalar.

CSS ve Tasarım İş Akışlarında Kullanım

CSS dışa aktarımı, her numuneye karşılık gelen adlandırılmış değişkenler üretir. Örnek 8 renkli palet çıktısı:

:root {
  --color-palette-1: #1a365d;
  --color-palette-2: #2b6cb0;
  --color-palette-3: #63b3ed;
  --color-palette-4: #bee3f8;
}

JSON dışa aktarımı, hex, RGB ve yüzdelik oran ile yapılandırılmış veri döndürür. Derleme sistemlerindeki tasarım tokenları için kullanışlıdır.

İlgili Araçlar

Tek bir rengi formatlar arasında dönüştürmeniz mi gerekiyor? Renk Dönüştürücü aracını kullanın. Paletinizden CSS gradyanları oluşturmak için CSS Gradyan Oluşturucu aracını deneyin. Renklerinizi arayüzlerde kullanmadan önce erişilebilirlik kontrastını WCAG Kontrast Denetleyicisi ile kontrol edin.