Renk Seçici, bir web sayfasındaki herhangi bir öğeden — metin, arka planlar, resimler, gradyanlar veya herhangi bir görünür piksel — renkleri seçmek için piksel-hassas bir damlalık aracı sağlar. Tam rengi HEX, RGB ve HSL formatlarında aynı anda alın, hassas hedefleme için büyütülmüş bir piksel önizlemesi ile. Önceden seçilen renkler hızlı yeniden erişim için bir geçmiş şeridinde kaydedilir.
Bir web sayfasından tam renk değerlerini çıkarmak yaygın bir görevdir — bir marka rengini eşleştirmek, bir tasarıma başvurmak veya rakibin sitesinde kullanılan bir tonu kontrol etmek. Tarayıcı DevTools Stiller panelinde renkleri gösterir, ancak yalnızca açık CSS renk özelliklerine sahip öğeler için — resimler, gradyanlar veya miras alınan renkler için değil. Renk Seçici damlalığı piksel seviyesinde çalışır — o rengin nasıl oluştuğuna bakılmaksızın imlecinizin altındaki pikselin gerçek oluşturulmuş rengini okur. Bir kahraman resminde mavi gökyüzüne, bir gradyan ortasına veya yarı saydam bir kaplamaya tıklayın ve tam bileşik renk değerini alın. Büyütülmüş önizleme dairesi, çevreleyen piksellerin yakınlaştırılmış görünümünü gösterir, böylece istediğiniz tam pikseli hedefleyebilirsiniz. Üç format çıktısı (HEX, RGB, HSL) aynı anda gösterilir — kopyalamak için herhangi bir formata tıklayın. Son birkaç seçiminiz alttaki bir renk geçmiş şeridinde kaydedilir, böylece önceden seçilen bir renge kolayca dönebilirsiniz.
Büyütülmüş dairesel bir önizleme, tam piksel seçimi için artı imlecli hedeflemeyle imlecinizin etrafındaki yakınlaştırılmış pikselleri gösterir. Metin, arka planlar, resimler, gradyanlar, SVG'ler veya sayfadaki herhangi bir görünür pikselden renk seçin.
Seçilen her renk aynı anda üç formatta gösterilir: HEX (#7c3aed), RGB (rgb(124, 58, 237)) ve HSL (hsl(262, 83%, 58%)). Geçiş yapma veya dönüştürme yok — tüm formatlar hemen kullanılabilir.
Belirli değeri anında panonuza kopyalamak için herhangi bir format satırına (HEX, RGB veya HSL) tıklayın. Kısa bir "Kopyalandı!" animasyonu eylemi onaylar. Doğrudan CSS'nize, tasarım aracınıza veya renk belirtiminize yapıştırın.
Son seçtiğiniz renkler, renk örnekleri gösteren görsel bir geçmiş şeridinde kaydedilir. O rengi yeniden seçmek ve değerlerini yeniden görmek için herhangi bir örneğe tıklayın. Geçmiş oturumunuz boyunca devam eder — birden fazla sayfadan renk seçin.
Seçilen renk, format değerlerinin üstünde büyük bir örnek olarak görüntülenir, bu da rengi görmeyi ve doğrulamayı kolaylaştırır. Örnek, daha küçük boyutlarda aynı görünebilecek ince tonları göstermek için yeterince büyüktür.
Herhangi bir görünür pikselden renk seçer: CSS renkleri, CSS gradyanları, resimler (PNG, JPG, SVG), canvas öğeleri, video kareleri, yarı saydam kaplamalar (bileşik rengi seçer) ve hatta iframe'ler. Görebiliyorsanız, seçebilirsiniz.
Tasarımınızın veya içeriğinizin doğru tonu kullandığından emin olmak için bir şirketin web sitesinden tam marka rengini seçin. Göz kararıyla tahmin etmek veya marka yönergelerinde arama yapmak yerine hassas HEX değerini alın.
Doğrudan kahraman resimlerinden, ürün fotoğraflarından veya illüstrasyonlardan renk seçin. Tasarımınızda tamamlayıcı bir arka plan olarak kullanmak için bir fotoğraftan baskın bir rengi çıkarın.
Tasarım belirtimi düğmenin #7c3aed olması gerektiğini söylüyor. Eşleştiğini doğrulamak için uygulanan düğmeden rengi seçin. Çıplak gözle görünmeyen ince renk farklılıklarını yakalar.
Tasarım ilham sitelerine göz atın ve gözünüze çarpan renkleri seçin. Geçmiş şeridi, oturum sırasında seçtiğiniz renklerden bir palet oluşturur — kendi renk şemanız için bir başlangıç noktası olarak kullanın.
Her konumdaki tam rengi görmek için bir CSS gradyanı boyunca farklı noktalarda renk seçin. Gradyanları kopyalamak veya gradyan duraklarının nasıl karıştığını anlamak için kullanışlıdır.
DevSuite Pro yüzen yuvasını açın ve Renk Seçici simgesine tıklayın. İmleç, büyütülmüş bir önizleme dairesi olan bir damlalığa dönüşür.
İmlecinizi sayfanın üzerine hareket ettirin. Büyütülmüş önizleme, tam hedef pikselini gösteren artı imleciyle imlecinizin etrafındaki piksellerin yakınlaştırılmış görünümünü gösterir.
O pikseldeki rengi seçmek için sayfanın herhangi bir yerine tıklayın. Renk örneği, HEX, RGB ve HSL değerlerinin hepsi anında güncellenir.
Değeri panonuza kopyalamak için HEX, RGB veya HSL satırına tıklayın. Kısaca bir "Kopyalandı!" onayı görünür.
Daha fazla renk seçmek için tıklamaya devam edin. Her seçim geçmiş şeridine eklenir. O rengi hatırlamak için herhangi bir geçmiş örneğine tıklayın.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.
