Renk Paleti bir web sayfasındaki her öğeyi tarar ve kullanılan tam renk setini çıkarır — metin ve arka planlardan kenarlıklara, gölgelere ve vurgulara. Renkler sıklığa göre (en çok kullanılan önce) sıralanmış görsel örnekler olarak görüntülenir, her biri HEX değerini ve kullanım sayısını gösterir. Kopyalamak için herhangi bir örneğe tıklayın veya tüm paleti bir renk kodu listesi olarak dışa aktarın.
İyi tasarlanmış her web sitesinin tutarlı bir renk paleti vardır — genellikle 3-8 birincil renk artı bazı nötr renkler. Renk Paleti, her öğenin hesaplanmış color, background-color, border-color ve box-shadow değerlerini tarayarak bu paleti otomatik olarak çıkarır. Sonuç, sayfadaki her rengin sıklığa göre sıralanmış bir koleksiyonudur ve size sitenin renk sisteminin tam resmini verir. Baskın renkler (birincil marka rengi, arka plan rengi, metin rengi) yüksek kullanım sayılarıyla önce görünür. Vurgu renkleri ve tek seferlik değerler daha aşağıda görünür. Bu tasarım araştırması için paha biçilmezdir — herhangi bir web sitesini ziyaret edin ve tam renk paletini saniyeler içinde çıkarın. Ayrıca kendi sitenizi denetlemek için de yararlıdır: tasarım sisteminize ait olmayan başıboş renkler var mı? Tasarım belirtimi yalnızca 3 tanımlarken 5 biraz farklı gri tonu mu kullanıyorsunuz? Renk Paleti tüm renk kullanımını görünür ve sayılabilir hale getirir.
Sayfadaki her görünür öğeyi tarar ve hesaplanmış özelliklerden renkleri çıkarır: color, background-color, border-color, box-shadow color, outline-color ve text-decoration-color. Sayfada kullanılan her renk yakalanır.
Renkler kullanım sayısına göre sıralanır — en çok kullanılan renk önce görünür. Baskın marka renkleri ve arka planlar üste çıkar, tek seferlik vurgu renkleri ise sonda görünür. Sayfanın birincil, ikincil ve vurgu renklerini anında görün.
Her renk, altında HEX kodu ve kullanım sayısı görüntülenen büyük bir görsel örnek olarak oluşturulur. Örnekler ince ton farklılıklarını (#333 ve #2a2a2a gibi) ayırt edecek kadar büyüktür.
Herhangi bir renk örneğine tıklayarak HEX değerini hemen panonuza kopyalayın. Renk paneli veya ikincil iletişim kutusu açmaya gerek yok — tek tık, kopyalandı, iş bitti.
Tüm paleti biçimlendirilmiş bir HEX renk kodları listesi olarak kopyalamak için "Tümünü Dışa Aktar"a tıklayın. Bir tasarım aracına, CSS değişkenleri dosyasına veya renk belgelerine yapıştırın. Liste sıklık sıralama sırasını korur.
Renkler normalleştirilir (aynı rengin rgb ve hex temsilleri birleştirilir) ve yinelemeler kaldırılır. Palet yalnızca benzersiz renkleri gösterir, yinelenen temsiller için birleşik kullanım sayılarıyla.
Güzel renk şemalarına sahip web sitelerini ziyaret edin ve tam paletlerini çıkarın. Renkleri kendi tasarımınız için bir başlangıç noktası olarak kullanın — veya hangi renk kombinasyonlarının birlikte iyi çalıştığını belgeleyin.
Marka rengi tutarlılığını doğrulamak için kendi sitenizde Renk Paleti'ni çalıştırın. 1 olması gereken yerde 4 biraz farklı mavi var mı? Marka dışı renkler sızıyor mu? Sıklık sıralaması tutarsızlıkları belirgin kılar.
Paleti dışa aktarın ve CSS özel özelliklerine (--color-primary, --color-secondary, vb.) dönüştürün. Sıklığa göre sıralanmış çıktı hangi renklerin birincil, ikincil ve vurgu rollerini hak ettiğini söyler.
Marka konumlandırmalarını anlamak için rakip web sitelerinden renk paletleri çıkarın. Sıcak renkler ve soğuk renkler, yüksek kontrast ve sessiz — palet kasıtlı tasarım seçimlerini ortaya çıkarır.
Tüm metin renklerini arka plan renkleriyle birlikte görün. Çok düşük kontrastlı metin-arka plan kombinasyonları var mı? Palet size WCAG kontrast gereksinimlerine karşı kontrol edilecek tam renk setini verir.
DevSuite Pro yüzen yuvasını açın ve Renk Paleti simgesine tıklayın. Araç sayfadaki her öğeyi tarar ve tüm renk değerlerini çıkarır.
Kullanım sıklığına göre sıralanmış bir renk örnekleri ızgarası görünür. En çok kullanılan renkler üsttedir. Her örnek, HEX kodunu ve o rengi kullanan öğe sayısını gösterir.
HEX değerini panonuza kopyalamak için herhangi bir örneğe tıklayın. Kısa bir onay görünür.
Her rengi biçimlendirilmiş bir liste olarak kopyalamak için "Tümünü Dışa Aktar"a tıklayın. CSS değişkenleri dosyanıza, tasarım aracınıza veya belgelere yapıştırın.
Aynı sitedeki farklı sayfalara gidin ve site genelinde renk tutarlılığını doğrulamak için paletleri çıkarı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.
