Ücretsiz Görüntü Renk Paleti Çıkarıcı

Çalışılmış örnek

Bırakma alanının altındaki “Örneği dene”ye basın. Dosya çipi sample-image.png gösterir ve kaydırıcı “Renk sayısı (6)” der. Örnek, bir sıra pastel daire ve LibraTool sözcüğü olan turkuaz, gök mavisi ve mor bir geçiştir; bu yüzden renk örneklerinin çoğu mavidir. Test çalıştırmamızda liste %38.5’te #189AE3, %28.7’de #0D9CB6 ve %26.1’de #4C69EB ile başladı; ardından %3.1, %2.2 ve %1.4’lük üç küçük renk geldi. İlk renk örneği rgb(24, 154, 227) · hsl(202, 81%, 49%) · 38.5% yazar ve kontrast satırı siyah metin için 6.8:1, beyaz metin için 3.1:1 verir. Kaydırıcıyı 2’ye sürükleyin; %92.9’da #238DD7 ve %7.1’de #ADC0CA elde edersiniz. 6’ya dönün, “Dışa aktar” altında CSS’i seçin ve --color-1: #189ae3 ile başlayan bir :root bloğu için “Kodu kopyala”ya basın. “PNG şeritini indir” sample-image_palette.png dosyasını kaydeder. Hex kodlarınız birkaç basamak farklı olabilir, çünkü tarayıcılar örneğin metnini biraz farklı çizer.

Hangi ayarların kullanılacağı ve sınırlar

• Resmi en hızlı yoldan ekleyin. Alana bir dosya bırakın, “Dosyalara göz at”a basın ya da Ctrl+V ile bir ekran görüntüsü yapıştırın. Dokunmatik ekranlarda bırakma ve yapıştırma ipuçları gizlenir ve giriş yolu “Dosyalara göz at”tır. JPEG, PNG, WebP ve GIF kabul eder; bir iPhone HEIC fotoğrafı önce “iPhone fotoğrafınız dönüştürülüyor…” iletisiyle dönüştürülür. “Veya bir dosya URL’si yapıştırın”, resmi bir adresten getirir; bu yalnızca o site izin verirse çalışır. Bir resim açıkken yeniden yapıştırmak onun yerini alır. “Örneği dene” 1200 × 800 boyutunda bir test resmi yükler.
• “Renk sayısı”nı kaydırıcıyla ayarlayın. Kaydırıcı 2 ile 16 arasındadır ve 6’da başlar; etiketi “Renk sayısı (6)” gibi sayıyı gösterir. Düşük sayılar geniş paleti verir, yüksek sayılar küçük vurguları yakalar. Kaydırıcının dediğinden daha az renk örneği görebilirsiniz, çünkü aynı hex değerine yuvarlanan renkler birleştirilir ve boş gruplar atılır. Arama sabit bir tohumdan başladığı için aynı resim ve sayı her zaman aynı paleti verir. Her renk örneği, %38.5 gibi, resimdeki payını gösterir ve en büyük pay başta gelir.
• Renk örneklerinin ortalama olduğunu unutmayın. Resim en uzun kenarında en fazla 200 px olacak şekilde küçültülür, çoğunlukla saydam olan pikseller (alfa 128’in altında) yok sayılır ve geri kalanlar RGB’deki uzaklığa göre en fazla 20 turda gruplanır. Her renk örneği bir grubun ortalamasıdır. Bu, resminizin hiçbir yerinde tam olarak görünmeyebileceği ve ince bir vurgunun komşu bir grupla karışabileceği anlamına gelir. Tam bir renge ihtiyacınız olduğunda bir renk örneğine güvenmek yerine resme tıklayın.
• Tam bir pikseli seçmek için resme tıklayın. Resmin altında “Bir piksel rengi örneklemek için görüntüyü tıklayın” yazar. Her tıklama, önizleme özgünden küçük ya da boş kenar boşlukları olsa bile, küçültülmüş kopyadan değil tam boyutlu görüntüden bir piksel okur. Seçimler hex koduyla birer çip olarak görünür. Kopyalamak için bir çipe tıklayın ya da kaldırmak için × işaretine basın. Önceden seçtiğiniz bir renk iki kez eklenmez, yalnızca son 12 tanesi tutulur ve kenar boşluğuna tıklamak hiçbir şey yapmaz. Seçimler renk örneklerinden ayrıdır ve dışa aktarmaların parçası değildir.
• Metin rengi seçmek için kontrast satırını kullanın. Her renk örneğinin altındaki kontrast satırı, o renk üzerindeki siyah metin ve beyaz metin için oranı bir ondalıkla verir. Oranlar WCAG göreli parlaklık formülünü kullanır. Sitenin Renk Paleti Oluşturucusu 4.5:1’i AA olarak derecelendirir; bu yüzden onu gövde metni için bir taban sayın. Örnekte #4C69EB siyahla 4.5:1, beyazla 4.6:1 alır, yani ikisi de rahat değildir; #DAEFFB ise siyahla 17.7:1 alır.
• Kodunuza uyan dışa aktarmayı seçin. “Dışa aktar” altında CSS, Tailwind, SCSS veya JSON seçin, önizleme kutusuna bakın, sonra “Kodu kopyala”ya basın. CSS --color-1 ve sonrası adlı :root değişkenlerini, SCSS $color-1 ve sonrasını, Tailwind ise palette-1 ve sonrasını verir; hepsi küçük harfli hex olarak. JSON her rengi büyük harfli hex, rgb sayıları ve bir ondalıklı payla verir. “Tüm paleti kopyala” hex kodlarını virgüllerle kopyalar. “PNG şeritini indir”, her rengin payı kadar geniş olduğu, photo_palette.png gibi adlandırılmış 1000 × 200 bir görüntü kaydeder.

Yaygın sorunlar ve nasıl düzeltileceği

“Görüntü yüklenemedi. Dosya bozuk veya desteklenmeyen bir biçimde olabilir.” yazıyor.

Tarayıcı dosyayı kabul etti ama bir resim olarak kodunu çözemedi. Olağan nedenler hasarlı ya da yarım indirilmiş bir dosya veya tarayıcınızın çizemediği bir resimdir. Özgün dosyayı başka bir programda açın ve JPEG ya da PNG olarak yeniden kaydedin veya dışa aktarın, sonra yeni dosyayı ekleyin. Bu ileti görünürken renk örneği listesi boş kalır.

“report.pdf, bu aracın açamadığı bir PDF dosyasıdır.” yazıyor (kendi dosya adınız ve türünüzle).

Bırakma alanı bir dosyanın ilk baytlarını okur, bu yüzden bir PDF’yi .jpg olarak yeniden adlandırmak işe yaramaz. Bu araç JPEG, PNG, WebP, GIF ve iPhone HEIC fotoğraflarını açar. AVIF, BMP, TIFF ve SVG dosyaları reddedilir. Tanımlanamayan bir dosya “Dosya türü desteklenmiyor” ve adını alır. Resmi önce JPEG veya PNG’ye dönüştürün. İletiyi dosyayı açan bir araca bağlantı izleyebilir. Çoğunlukla bir OneDrive veya iCloud yer tutucusu olan 0 baytlık bir dosya, önce onu indirmenizi isteyen kendi iletisini alır.

“O site, diğer web sitelerinin dosyalarını indirmesine izin vermiyor. Önce dosyayı cihazınıza indirin, sonra buraya bırakın.” yazıyor.

Bu, “Veya bir dosya URL’si yapıştırın” ve “Getir”den sonra görünür. Tarayıcınız resmi diğer siteden ister ve çoğu site başka bir web sitesinin dosyalarını indirmesine izin vermez. Resmi cihazınıza kaydedin ve bunun yerine bırakma alanına bırakın. Kendi durum numaranızla farklı bir ileti, “Bağlantı bir hata döndürdü (HTTP 404)”, adresin kendisinin başarısız olduğu anlamına gelir; bu yüzden onu kontrol edin ya da dosyayı kaydedip buraya bırakın.

Kaydırıcı “Renk sayısı (12)” diyor ama daha az renk örneği görünüyor.

Aynı hex değerine yuvarlanan renkler birleştirilir ve boş gruplar atılır; bu yüzden logolar, ekran görüntüleri ve basit grafikler gibi düz resimler kaydırıcının istediğinden daha az renk örneği verir. Yanlış giden bir şey yok. Çoğunlukla saydam pikseller de yok sayılır ve tümüyle saydam bir resim hiç renk örneği vermez. Daha sade bir palet için kaydırıcıyı düşürün. Daha ince tonlar için bir fotoğrafta 16’ya kadar yükseltin.

“Panoya kopyalanamadı.” yazıyor.

Tarayıcı kopyalamayı reddetti; bu, sayfa güvenli olmadığında, bir çerçevede gösterildiğinde ya da tarayıcı pano erişimini engellediğinde olabilir. İleti, kaydırıcıyı oynatana ya da başka bir resim yükleyene kadar kalır. Sayfaya bir kez tıklayıp yeniden deneyin. Hâlâ başarısız olursa “Dışa aktar” altındaki önizleme kutusundaki metni seçip elle kopyalayın ya da paleti bunun yerine bir resim olarak kaydetmek için “PNG şeritini indir”i kullanın.

Nasıl karşılaştırılır

Bir tasarım uygulamasının damlalığı tam pikselleri okur ve bu araç her tıklamada bunu yapar. Eklediği şey, tüm resmin renklerini gruplayarak bulunan baskın renk listesidir. Tüm resmi kullanır, bu yüzden büyük bir arka plan listeye egemen olur ve bir alan seçmenin ya da önce arka planı kaldırmanın yolu yoktur. En fazla 200 px’lik bir kopyayla çalışır, renklere ad vermez ve tona göre sıralamaz. Resim tarayıcıda okunduğu için renkler cihazınızda kalır. Bir fotoğraf yerine tek bir renkten palet oluşturmak için Renk Paleti Oluşturucu’yu kullanın.