Görselden Renk Seçici: HEX, RGB, HSL ve Palet

Dijital bir görseldeki her piksel bir rengi üç sayı olarak saklar: kırmızı, yeşil ve mavi. Bir renk seçici seçtiğiniz noktadaki bu sayıları okur ve tasarımcıların ve geliştiricilerin kullandığı biçimlerde gösterir. Bu, bir fotoğraftan, logodan veya ekran görüntüsünden göz kararı tahmin etmek yerine tam bir tonu yeniden kullanmayı kolaylaştırır.

Göz çevredeki renklerden ve ekran parlaklığından kolayca yanılır, bu yüzden aynı görünen iki ton kodda oldukça farklı olabilir. Doğrudan dosyadan seçmek tahmini ortadan kaldırır.

Bir rengi yazmanın üç yolu

HEX, RGB ve HSL arasında seçim yaparken hepsinin aynı rengi tanımladığını unutmayın. HEX, web tasarımında ve çoğu tasarım aracında kullanılan altı karakterlik kompakt bir koddur. RGB kırmızı, yeşil ve mavi değerlerini 0 ile 255 arasında listeler. HSL ton, doygunluk ve açıklığı tanımlar; bu, CSS'te bir rengi karakterini koruyarak açmak veya koyulaştırmak için en kolay biçimdir.

Bir görseli kutuya sürükleyerek, göz atarak veya bir ekran görüntüsü yapıştırarak ekleyin. İşaretçiyi resmin üzerinde gezdirin: altındaki renk aşağıda canlı gösterilir. Seçmek için tıklayın. Seçilen renk büyük bir renk örneği ve her birinin kendi kopyalama düğmesi olan HEX, RGB ve HSL kodlarıyla görünür.

Her seçim kısa bir geçmişe eklenir, böylece bir resimden birkaç renk toplayıp sonra kopyalayabilirsiniz. Kodlarını yeniden göstermek için geçmişteki herhangi bir renk örneğine tıklayın.

Bir kodu kopyalamak

Bir görselden HEX kodunu hızlıca almak için alan küçükse tarayıcınızı yakınlaştırın, tam piksele tıklayın ve HEX'i kopyala'ya basın. Kod bir diyez işaretiyle başlar ve doğrudan CSS, Figma, Canva ve diğer çoğu araçta çalışır.

Bir resim eklediğiniz anda araç küçük bir kopyasını analiz eder ve bir kümeleme yöntemiyle baskın renklerini bulur. Resmin ne kadarını kapladıklarına göre sıralanmış en fazla sekiz renk görünür. Tam kodları görmek için herhangi birine tıklayın veya tüm seti HEX değerleri listesi ya da bir stil dosyasına yapıştırmaya hazır CSS özel özellikleri olarak kopyalayın.

Bir fotoğraftan palet oluşturmak zaten uyumlu görünen bir renk şeması kurmanın hızlı bir yoludur, çünkü renkler gerçek bir sahneden gelir: bir gün batımı, bir orman veya iyi tasarlanmış bir oda.

Logolarla çalışmak

Bir logodan marka renklerini bulmak için renkleri biraz kaydırabilecek bir ekran görüntüsü veya sıkıştırılmış kopya yerine orijinal dosyayı kullanın. Renklerin arka plana karıştığı kenarlardan değil, logonun düz alanlarından seçin.

Bilgisayarlardaki Chrome, Edge ve diğer Chromium tarayıcıları ekran damlalığını destekler. Ekranın herhangi bir yerinden renk seç'e basın, işaretçi diğer uygulamalar dahil herhangi bir pencerenin üzerinde gezdirebileceğiniz bir büyüteçe dönüşür. Seçmek için tıklayın veya iptal için Escape'e basın. İhtiyacınız olan renk bir videoda, tasarım uygulamasında veya web sitesinde olduğunda bu kullanışlı bir ekran renk seçicidir.

Firefox ve Safari bu özelliği henüz sunmuyor, bu yüzden düğme orada gizlidir ve bunun yerine yüklenmiş bir görselden seçim yapabilirsiniz. Telefonlarda ekran görüntüsü kullanın: alın, ardından buraya yapıştırın veya seçin.

Fotoğraflar ve düz grafikler

Fotoğraflar gürültü ve geçişler içerir, bu yüzden komşu pikseller biraz farklı olabilir. Bir fotoğraftan temsili bir renk için palet çoğu zaman tek bir pikselden daha iyidir, çünkü benzer piksellerin ortalamasını alır. Logolar ve düz grafikler için tek bir tıklama tam sonuç verir.

Renk profilleri ve ekranlar

Kodlar, tarayıcınızın çözdüğü şekliyle görsel verisinden gelir. Çok geniş gamlı görseller farklı ekranlarda biraz farklı görünebilir, ama kodlar rengi web ve tasarım araçlarında yeniden üretmek için ihtiyacınız olan şeydir.

Sıkıştırılmış görseller

Yoğun sıkıştırılmış JPEG'ler kenarlarda bloklu bozulmalar oluşturur. Düz bir alanın ortasından seçin veya varsa görselin daha yüksek kaliteli bir sürümünü kullanın.

Görseliniz tarayıcı belleğinizde kalır; hiçbir şey yüklenmez, kaydedilmez veya saklanmaz. JPG, PNG, WebP, GIF ve BMP dosyaları desteklenir ve palet oluşturulurken şeffaf alanlar yok sayılır.

Araç ücretsiz ve sınırsızdır, filigran eklemez ve EnhancerPro kredilerini kullanmaz. Seçtiğiniz bir paleti logoya veya simgeye dönüştürmek istiyorsanız favicon oluşturucumuz ve görselden SVG'ye dönüştürücümüz iyi sonraki adımlardır.

Renkleri CSS'te kullanmak

HEX kodlarını doğrudan renk özelliklerine yapıştırın veya paleti CSS değişkenleri olarak kopyalayıp var(--color-1) ile başvurun. HSL değerleri açıklık yüzdesini artırarak daha açık tonlar oluşturmayı kolaylaştırır.

Güçlü bir renkle başlayın

İyi şemaların çoğu genellikle bir logodan veya önemli bir fotoğraftan alınan tek bir ana renkle başlar. Onu burada seçin, ardından arka planlar ve metin için açık ve koyu bir nötr renge karar verin. HSL bunu kolaylaştırır: ton ve doygunluğu koruyun, ardından arka plan tonu için açıklığı artırın veya koyu bir vurgu için azaltın.

Paletten destekleyici renkler

Çıkarılan palet genellikle bir veya iki canlı renk ve birkaç yumuşak renk içerir. Yumuşak renkler arka planlar, kenarlıklar ve ikincil düğmeler için iyi çalışırken canlı renkler eylem çağrılarına ve vurgulara uyar. Aynı resimden geldikleri için doğal olarak bir arada dururlar.

Kontrastı kontrol edin

Metin herkes için okunur olmalıdır. Açık bir ton üzerinde koyu metin veya koyu bir renk üzerinde beyaz metin genellikle işe yarar. Yayımlamadan önce, özellikle düğmeler ve küçük metinler için önemli kombinasyonları bir kontrast denetleyicisiyle kontrol edin. Bir fotoğrafta canlı görünen bir renk beyaz bir sayfadaki metin için fazla açık olabilir.

Kayıt tutun

Son kodları bir stil rehberine veya CSS değişkenleri olarak kaydedin. Paleti CSS özel özellikleri olarak kopyalamak size primary, accent ve surface gibi yeniden adlandırabileceğiniz hazır bir başlangıç noktası verir, böylece sitenizin her sayfası tam olarak aynı tonları kullanır.

Baskı için renkler

Ekran renkleri RGB, yazıcılar CMYK mürekkepleri kullanır. Buradaki kodlar ekranlar için mükemmeldir; basılı materyal için matbaanızdan bunları dönüştürmesini veya basılı bir renk örneğiyle eşleştirmesini isteyin, çünkü bazı parlak ekran renkleri tam olarak basılamaz.

Renkleri bir ekiple paylaşmak

Tasarımcılar, geliştiriciler ve müşteriler renkleri çoğu zaman farklı şekillerde tanımlar: bir tasarım dosyasında hex kodu, bir sunumda RGB değeri, bir stil dosyasında HSL değeri. Üçünü de aynı seçimden kopyalamak, değerler elle dönüştürüldüğünde ortaya çıkan küçük uyumsuzlukları önler. Kodları kaynak görselle birlikte proje notlarınıza yapıştırın, böylece herkes her rengin nereden geldiğini görebilir ve palet ayarlanması gerekirse sonradan yeniden seçebilir.

Mevsimsel ve atmosfer paletleri

Fotoğraflar harika bir atmosfer kaynağıdır. Sıcak sonbahar yaprakları turuncular ve koyu kırmızılar, bir plaj sahnesi kumsal nötrler ve turkuaz, gece şehir manzarası ise neon vurgulu koyu maviler verir. İstediğiniz hisse uyan birkaç resimden palet çıkarmayı deneyin, ardından tekrar tekrar görünen renkleri saklayın. Tekrarlanan bu set genellikle güçlü, tutarlı bir şemaya dönüşür.