# Görselden Renk Paleti

> Color palette from image ile resimdeki renk kodunu bulma: görsel yükleyin, HEX ve RGB kodlarını kopyalayın, CSS paleti indirin.

- Kategori: [Görsel ve Fotoğraf](https://toolbrio.com/kategori/gorsel/index.md)
- Alt kategori: Düzenleme
- Son güncelleme: 2026-09-08
- Etkileşimli araç: [https://toolbrio.com/gorselden-renk-paleti/](https://toolbrio.com/gorselden-renk-paleti/)

## Görselden bir renk listesi çıkarın

Resimden renk kodu bulma için PNG, JPG veya WebP dosyanızı seçin. Araç görselin küçük bir örneğini inceler, sık görülen renk gruplarını sıralar ve her grup için HEX ile RGB kodu verir. Renk kartına basarak HEX kodunu, altındaki RGB düğmesine basarak üç kanallı değeri kopyalayabilirsiniz.

Renk sayısını 2 ile 12 arasında belirleyebilirsiniz. Bu sayı bir üst sınırdır: görsel örneğinde üç renk grubu varsa 6 seçtiğinizde de üç renk gösterilir. Az sayıda renk, bir tasarımın ana tonlarını hızlıca toplamak için uygundur. Daha uzun liste, görseldeki daha küçük renk gruplarını da ortaya çıkarabilir.

## Palet rengi ile tek pikselin rengi

Palet kartındaki renk, aynı gruba alınan piksellerin ortalamasıdır. Görseldeki belirli bir noktanın kodunu istiyorsanız önizlemeye tıklayın. **Bir pikselin kodunu seç** bölümünde X ve Y koordinatlarını klavyeyle de girebilirsiniz. Sol üst köşe 0, 0’dır; seçilen pikselin HEX, RGB ve alfa değeri ayrı gösterilir.

Bu seçim **küçültülmüş örneğe** aittir. Uzun kenarı 256 pikseli aşan görsel, oranı korunarak bu boyuta indirilir; küçük görsel büyütülmez. Dolayısıyla önizlemede seçilen bir nokta, büyük kaynak dosyanın tek bir pikselini temsil etmek zorunda değildir. Tarayıcıdaki [piksel okuma yöntemi](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData) örneğin renk kanallarını verir; kaynak çözünürlükte nokta ölçümü yapılmaz.

## Renk payları neden her zaman yüzde 100 etmez?

Her rengin payı, o grubun piksel sayısının hesaba katılan bütün örnek piksellere bölünmesiyle bulunur. Listeye girmeyen gruplar bu toplamdan çıkarılmaz. Örneğin 100 × 100 piksellik, tamamen opak bir görselde aşağıdaki dağılım olsun:

| Renk |  | Piksel sayısı |  | Örnek payı |

| Kırmızı, #FF0000 |  | 5.000 |  | %50 |

| Yeşil, #00FF00 |  | 3.000 |  | %30 |

| Mavi, #0000FF |  | 2.000 |  | %20 |

İki renk istediğinizde kırmızı ve yeşil seçilir; gösterilen payların toplamı %80 olur. Değerler %62,5 ve %37,5 olarak yeniden ölçeklenmez. Sonuçtaki **Paletin kapsadığı pay** satırı, seçtiğiniz renklerin örneğin ne kadarını anlattığını gösterir.

Şeffaflık da hesaba katılır: 0 ile 255 arasındaki alfa değeri 128’in altında olan pikseller paletten çıkarılır. Diğer pikseller eşit ağırlıkla sayılır. Böylece tamamen şeffaf bir arka plan, palete siyah renk olarak eklenmez. Uygun piksel kalmazsa araç renk uydurmak yerine uyarı verir.

## Yaklaşık palet nasıl oluşturulur?

Kırmızı, yeşil ve mavi kanalların her biri 16 değerlik aralıklara ayrılır. Aynı üç aralığa düşen pikseller bir grupta toplanır; grubun kanal ortalamaları yuvarlanarak temsil rengi hesaplanır. Gruplar piksel sayısına göre seçilir. Örneğin eşit sayıdaki (255, 0, 0) ve (241, 0, 0) pikselleri aynı gruptaysa temsil rengi (248, 0, 0), yani #F80000 olur.

Bu sayım, görselin konusunu tanımaz. Küçük bir logonun rengi, geniş bir arka planın gerisinde kalabilir. Küçültme sırasında renk sınırları karışabilir; dosyanın renk profili ve tarayıcının renk dönüşümü de sonucu etkileyebilir. Fotoğrafın EXIF yön bilgisi çözümleme sırasında kullanılır; bunun nasıl uygulandığı [görsel çözümleme belgelerinde](https://developer.mozilla.org/en-US/docs/Web/API/Window/createImageBitmap) açıklanır. Palet yaklaşık RGB ekran renkleri sunar; CMYK, Pantone veya boya eşleşmesi üretmez.

## Renkleri CSS’de kullanma

Resimden HTML renk kodu bulma sonrasında tek tek kodları alabilir veya paleti CSS dosyası olarak indirebilirsiniz. Dosyada renkler `--palette-1`, `--palette-2` biçiminde adlandırılır. Örneğin bir öğenin arka planında `background-color: var(--palette-1);` kullanabilirsiniz. [CSS değişkenleri](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties), aynı rengi farklı öğelerde tekrar kullanmayı sağlar.

Dosya sınırı 15 MB ve 40 milyon pikseldir. Görsel sunucuya gönderilmez; örnekleme ve renk çıkarma cihazınızda yapılır. Yeni görsel seçtiğinizde veya sıfırladığınızda önceki palet ve geçici indirme bağlantısı temizlenir. Daha önce indirdiğiniz CSS dosyası ise cihazınızda kalır.

## Sık sorulan sorular

### Palet neden birbirine çok benzeyen renkler içerebilir?

Renk grupları sayısal RGB aralıklarına göre oluşturulur; insan gözüne farklı görünme şartıyla seçilmez. Birbirine yakın iki ton farklı aralık sınırlarına düşebilir. Renk sayısını azaltarak daha kısa bir liste elde edebilirsiniz, fakat araç uyumlu veya birbirinden en uzak renkleri seçme garantisi vermez.

### Önizlemeden seçtiğim HEX kodu neden sekiz haneli?

Seçilen piksel kısmen şeffafsa HEX kodunun son iki hanesi alfa değerini taşır. Örneğin #FF000080, alfa değeri 128 olan kırmızıdır. Tam opak piksel altı haneli HEX ile gösterilir. Tamamen şeffaf pikselde görünür renk bulunmadığı için piksel kopyalama düğmeleri kapatılır.

### CSS dosyası yüklediğim fotoğrafı veya dosya adını içerir mi?

Hayır. İndirilen renk-paleti.css yalnızca :root içinde --palette-1, --palette-2 gibi renk değişkenlerini içerir. Kaynak görsel, piksel verisi ve dosya adı CSS çıktısına eklenmez.

### Palet fotoğrafın ışık ve beyaz ayarını düzeltiyor mu?

Hayır. Araç örnek görüntüde okunan renkleri kullanır; ışık, gölge veya beyaz dengesi düzeltmesi yapmaz. Aynı nesnenin farklı ışıkta çekilmiş iki fotoğrafından farklı paletler çıkabilir. Nesnenin fiziksel yüzey rengini ölçen bir cihazın yerine geçmez.