colorize Fotoğraftan Renk Seçici star

Renk Seçme Nasıl Çalışır

Bir fotoğraf yüklendiğinde, tarayıcı içinde bir HTML5 <canvas> öğesine çizilir. Görselin herhangi bir yerine tıklamak, canvas API'sinin getImageData() fonksiyonunu tam o piksel konumunda çağırır; bu fonksiyon, tarayıcının o piksel için sakladığı ham kırmızı, yeşil, mavi ve alfa kanal değerlerini döndürür — bir ekran görüntüsünden örneklenen yaklaşık bir renk değil, tarayıcının görseli çizmek için kullandığı gerçek sayısal veridir. Bu ham değerler ardından eşzamanlı olarak hex (örn. #3a7bd5), RGB (örn. rgb(58, 123, 213)) ve HSL (ton, doygunluk, parlaklık) formatlarına dönüştürülüp gösterilir, böylece tasarım aracınızın ihtiyaç duyduğu formatı kopyalayabilirsiniz.

Bu şekilde işlenen her görsel sRGB renk uzayında çözülüp okunur — bu, dijital fotoğrafların, ekranların ve kameraların büyük çoğunluğunun kullandığı standart renk uzayıdır; görsel açıkça farklı bir renk profili gömmedikçe varsayılan kabul edilir, bu da neredeyse tüm tüketici fotoğrafçılığını ve web görsellerini kapsar.

HSL formatı, RGB'den farklı bir mantıkla çalışır: renk tonunu (hue, 0-360 derece), doygunluğu (saturation, yüzde) ve parlaklığı (lightness, yüzde) ayrı ayrı ifade eder; bu da özellikle bir rengin tonunu sabit tutup yalnızca açıklığını veya doygunluğunu değiştirmek isteyen tasarımcılar için RGB'den daha sezgiseldir. Web geliştirme, marka renk paleti oluşturma veya bir fotoğraftaki baskın renkleri tespit etme gibi işlerde bu üç format birbirini tamamlar: hex CSS'te en yaygın kullanılan, RGB programlama ortamlarında en doğrudan, HSL ise renk ayarlamalarında en kullanışlı olandır. Örneğin bir markanın ana rengini koruyup yalnızca daha açık veya koyu bir tonunu üretmek isteyen bir tasarımcı, HSL'deki parlaklık değerini değiştirmesi yeterli olduğundan RGB'nin üç kanalını tek tek hesaplamaktan çok daha hızlı sonuca ulaşır ve tutarlı bir renk ailesi oluşturmak kolaylaşır.

Bilinmesi Gerekenler

• Hiçbir şey hiçbir yere yüklenmez — görseli çizmekten piksel verisini okumaya kadar tüm süreç yerel olarak tarayıcının belleğinde gerçekleşir. Fotoğrafınızı hiçbir sunucu almaz.
• Okuma tahmini değil kesindir — getImageData() saklanan gerçek piksel değerini döndürdüğü için doğruluk yalnızca görselin kendi kalitesine ve tam olarak nereye tıkladığınıza bağlıdır; ekranınızın parlaklığı, kontrastı veya kalibrasyonu bunu etkilemez.
• Sıkıştırma "gerçek" rengi hafifçe kaydırabilir — JPEG sıkıştırması rengi küçük piksel bloklarında ortalar, bu yüzden ağır sıkıştırılmış bir fotoğraf, sahnenin orijinal renginden hafifçe farklı bir değer döndürebilir; PNG ve diğer kayıpsız formatlar yakalanan değeri tam olarak korur.
• Seçtiğiniz her renk görselin altında biriken bir palete eklenir, böylece tek bir fotoğraftan birkaç noktayı — bir gökyüzü, bir gömlek, bir duvar — örnekleyip tek oturumda küçük, uyumlu bir renk seti çıkarabilirsiniz.