Herhangi Bir Pikselden Renk Bulmak İçin Renk Seçici Kullanma
Hızlı Yanıt
Renk seçmek için: Color Picker açın, resim yükleyin (veya screen eyedropper kullanın), rengini istediğiniz piksele tıklayın ve HEX, RGB ve HSL değerleri görünür. Tüm işleme yerel olarak olur.
giriiş
Color picker (eyedropper da denir), bir pikselin tam rengini bulmanızı sağlar. Bu, marka renklerini match etmek, resimlerden renk sample etmek veya foto'dan renk paleti oluşturmak için esastır. Browser tabanlı color picker'lar Canvas API ile yüklenen resimlerden renk okuyabilir ve EyeDropper API ekrandaki herhangi bir yerden renk seçebilir.
Adım adım
-
Renk Seçici aracını açın
Renk Seçici aracı sayfasına gidin. Araç, yüklenen görüntülerden ve desteklenen tarayıcılarda EyeDropper API aracılığıyla ekranın herhangi bir yerinden renk seçmeyi destekler.
-
Kaynağınızı seçin
Bir görselden seçim yapmak için: bir görseli yükleyin veya sürükleyip bırakın. Ekrandan seçim yapmak için (yalnızca Chrome/Edge): 'Ekrandan seç' düğmesini tıklayın, ardından ekranınızda herhangi bir yeri tıklayın.
-
Örneklemek için piksele tıklayın
Görsel seçmek için imlecinizi görselin üzerine getirin ve rengini istediğiniz piksele tıklayın. Araç, getImageData() işlevini kullanarak tuvalden piksel rengini okur. Büyüteç tam pikseli seçmenize yardımcı olabilir.
-
Renk değerlerini okuyun
Araç, seçilen rengi bir renk örneğiyle birlikte HEX, RGB ve HSL biçimlerinde görüntüler. Siz imleci hareket ettirdikçe değerler anında güncellenir.
-
Rengi kopyala
Renk değerini panonuza kopyalamak için herhangi bir formatın yanındaki Kopyala'yı tıklayın. CSS'nizde, tasarım aracınızda veya uygulamanızda kullanın.
Örnekler
Logodan marka rengini seçin
Giriş: logo.png, marka renk pikseline tıklayın
Çıkış: HEX: #1a73e8, RGB: rgb(26, 115, 232), HSL: hsl(217, %89, %51)
Fotoğraftan bir renk örnekleyin
Giriş: photo.jpg, bir gökyüzü pikseline tıklayın
Çıkış: HEX: #87ceeb, RGB: rgb(135, 206, 235), HSL: hsl(197, %71, %73)
Ekrandan seç (Chrome/Edge)
Giriş: 'Ekrandan seç'i tıklayın, ardından ekranınızdaki herhangi bir pikseli tıklayın
Çıkış: Söz konusu pikselin HEX değeri, örneğin #ff5733
Yaygın Sorunlar
- Kenar yumuşatma renkleri kenarlarda karıştırır; iki renk arasındaki kenardaki pikseller bir karışımdır. Doğruluk için düz renk alanının ortasından örnek alın.
- EyeDropper API desteklenmiyor; ekran seçici Chrome 95+ veya Edge 95+ gerektirir. Firefox ve Safari bunu desteklemiyor; bunun yerine resim yükleme yöntemini kullanın.
- JPEG sıkıştırma renkleri değiştirir —JPEG kayıplı sıkıştırma piksel renklerini biraz değiştirir. Tam marka renkleri için PNG veya orijinal vektör kaynağını kullanın.
- Renk profili farklılıkları — Gömülü renk profillerine (ICC) sahip görüntüler, ham piksel değerlerinin önerdiğinden farklı görüntülenebilir.
İpuçları
- Tam pikseli seçmek için büyüteci kullanın; yüksek yakınlaştırmada, harmanlanmış bir kenar yerine tek bir hassas pikseli seçebilirsiniz.
- Katı bir alandan birden fazla piksel örnekleyin ve sıkıştırmanın gürültüye neden olması durumunda bunların ortalamasını alın; bu, daha temsili bir renk verir.
- Yalnızca tarayıcıdaki görüntülerden değil, herhangi bir uygulamadan renk seçmek için EyeDropper API (Chrome/Edge) öğesini kullanın.
- Anında, özel renk örneklemesi için Renk Seçicimizi kullanın; görselleriniz tarayıcınızdan asla ayrılmaz.