Herhangi bir görselden kontrast denetleyiciyle renk paleti alın

Renkler nasıl seçilir

Araç, görselinizin en uzun kenarı en fazla 160 piksel olan küçük bir kopyasını çizer ve saydam olmayan her pikseli sayar. Ardından benzer pikselleri k-means kümelemesiyle gruplar ve her grubun ortalama rengini, en büyük gruptan başlayarak bildirir. Her örnek üzerindeki yüzde, o grubun görselin ne kadarını kapladığını gösterir.

Başlangıç noktası rastgele değil sabittir: en yaygın renkle başlar, sonra elindekilere en uzak rengi eklemeye devam eder. Böylece aynı görsel her seferinde aynı paleti verir ve beyaz bir kutu üzerindeki kırmızı logo gibi küçük parlak bir vurgu, arka plana karışmak yerine kendi örneğini alır.

5 ila 8 renk isteyin. Düz zeminde çekilmiş bir ürün fotoğrafı genellikle 5 veya 6 renge ihtiyaç duyar. Yoğun bir yaşam tarzı fotoğrafı 8 renkle daha iyi okunur. Görselde istediğinizden daha az farklı renk varsa, araç bunu belirtir ve bulduğu renkleri gösterir.

Kontrast matrisini okumak

Her renk, diğer tüm renklerle ve ayrıca düz beyaz ve siyahla eşleştirilir; her hücre, satır rengindeki metnin sütun rengindeki arka plan üzerindeki kontrast oranını gösterir. Oran WCAG tanımını izler: (L1 + 0.05) / (L2 + 0.05); burada L1 ve L2, daha açık ve daha koyu rengin bağıl parlaklığıdır. 1:1 (aynı rengin iki kez kullanılması) ile 21:1 (beyaz üzerine siyah) arasında değişir.

Etiketler, WCAG'nin belirlediği eşiklerdir:

• AA: normal metin için en az 4.5:1, büyük metin için 3:1 (Başarı Ölçütü 1.4.3).
• AAA: normal metin için en az 7:1, büyük metin için 4.5:1 (Başarı Ölçütü 1.4.6).
• Büyük metin, en az 18 punto ya da 14 punto kalın anlamına gelir (WCAG'nin büyük ölçek tanımı).

AA büyük olarak işaretlenmiş bir hücre, büyük bir başlık için uygun ama bir alt yazı için fazla soluktur. W3C'nin 1.4.3 açıklaması ayrıca oranın yuvarlanmaması gerektiğini söyler, yani 4.499:1 değeri 4.5:1'i karşılamaz. Araç tam sayıyı değerlendirir ve iki ondalığa kesilmiş olarak gösterir, asla yukarı yuvarlamaz.

Çözümlü bir örnek

Diyelim ki fotoğraf size #1a3c6e lacivertini ve #fdf6e3 kremini veriyor. Lacivertin bağıl parlaklığı yaklaşık 0,046, kreminki ise yaklaşık 0,923 çıkar. Oran (0.923 + 0.05) / (0.046 + 0.05) olur; bu yuvarlanmış değerlerle yaklaşık 10,1:1, tam değerlerle 10,16:1'dir. Bu, tüm metinler için AAA'yı geçer; yani krem bir kapanış kartı üzerindeki lacivert metin her boyutta güvenlidir. Aynı kremin üzerine #e07a2e gibi orta tonda bir turuncu koyarsanız oran 2,78:1'e düşer ve büyük metin için bile başarısız olur. Turuncuyu, üzerinde siyah metin bulunan bir düğme için (6,99:1; bu AA'dır ama AAA'ya kıl payı yetişmez) veya üzerinde yazı olmayan bir şekil için saklayın.

Dışa aktarmayı kullanma

CSS dışa aktarması, özel özelliklerden oluşan bir :root bloğudur; görselin en çoğunu kaplayan renk için --color-1 ve aşağıya doğru devam eder. JSON'da her rengin hex, RGB, HSL değerleri ve görseldeki payı bulunur; bir tasarım token dosyasına yapıştırması veya bir betiğe vermesi kolaydır. Hangi rengin arka plan, hangisinin metin, hangisinin vurgu olduğunu öğrendikten sonra değişkenleri yeniden adlandırın.

Bu aracın yapmadıkları

Hangi renklerin markanıza ait olduğunu bilmez. Ürününüzün ahşap masa üzerindeki bir fotoğrafı masayı da içerir. Yalnızca ürünün renklerini istiyorsanız önce ürüne veya ambalaja kadar kırpın. Ayrıca kesin baskı renklerini de söyleyemez: sayılar, kameranızdan ve düzenlemeden sonra dosyadaki piksellerdir; dolayısıyla yayınlamadan önce bunları marka rehberinizle karşılaştırın. Ve yalnızca metin kontrastını değerlendirir. WCAG'nin simgeler ve arayüz bileşenleri için ayrı kuralları vardır; bu matris bunları değerlendirmez.

Bunu elle yapmamayı tercih ederseniz

Hermoso otomatik pilotta pazarlamadır: pazarınızda hâlihazırda işe yarayan reklamları araştırır, markanıza uygun görsel ve video reklamlar oluşturur, gönderileri zamanlar ve kendi reklam hesaplarınızda ücretli kampanyalar yürütür. Markanızı web sitenizden eklediğinizde ürünlerinizi, logonuzu ve paletinizi öğrenir ve alt yazı ve kapanış kartı renklerini hex kodlarıyla ayarlayabilirsiniz. Web uygulamasında veya MCP sunucusu aracılığıyla Claude, ChatGPT ve Cursor içinde çalışır.

Ücretsiz araçlar: Sosyal medya boyut kılavuzu · Instagram Izgara Oluşturucu · Open Graph oluşturucu

Sık sorulan sorular

Bir fotoğraftan nasıl renk paleti alırım?

Fotoğrafı araca bırakın ve 5 ila 8 arasında kaç renk istediğinizi seçin. Benzer pikselleri gruplar ve her grubun ortalama rengini HEX, RGB ve HSL olarak, en büyüğü önce gelecek şekilde, her birinde bir kopyalama düğmesiyle gösterir.

Metin için hangi kontrast oranı gerekir?

WCAG 2.2 AA düzeyi normal metin için en az 4.5:1, büyük metin için 3:1 ister. AAA düzeyi 7:1 ve 4.5:1 ister. Büyük metin en az 18 punto ya da 14 punto kalındır.

4.49:1, AA'yı geçecek kadar yakın mı?

Hayır. W3C, bir eşikle karşılaştırılırken hesaplanan oranın yuvarlanmaması gerektiğini söyler; dolayısıyla 4.499:1, 4.5:1'i karşılamaz. Araç tam sayıyı değerlendirir.

Neden her seferinde aynı paleti alıyorum?

Kümeleme sabit bir noktadan, en yaygın renkten başlar ve ardından zaten seçilmiş olanlardan en uzak rengi ekler. Rastgele bir başlangıç yoktur; bu yüzden bir görsel her zaman tek bir sonuç verir.

Görselim yükleniyor mu?

Hayır. Tarayıcınızın kendi dosya okuyucusuyla okunur ve cihazınızda bir tuval üzerinde sayılır. Hiçbir şey herhangi bir yere gönderilmez veya saklanmaz.