CodeKitHubBu Araç Nedir?
Ton skalası, farklı parlaklık seviyelerinde bir rengin bir dizi varyasyonudur; hover durumları, devre dışı durumlar, kenarlıklar ve bir marka rengiyle ilişkili olması gereken ama onunla aynı olmaması gereken arka planlar gibi UI tasarımında sıkça kullanılır.
Bu araç, ana renginizi HSL'ye dönüştürür, ton ve doygunluğu sabit tutar ve parlaklığı yaklaşık %95'ten (beyaza yakın açık ton) yaklaşık %10'a (siyaha yakın koyu ton) kadar kademeli olarak değiştirir; orijinal renginiz skalanın ortasındaki doğal konumuna yerleştirilir.
Neden Kullanmalısınız?
- Sabit bir hazır paletle sınırlı kalmadan, herhangi bir tek renkten tasarım sistemi tarzında bir skala (Tailwind'in 50/100/200.../900 ölçeği gibi) oluşturur.
- Skalanın ne kadar ayrıntılı olmasını istediğinize bağlı olarak 7, 9 veya 11 adım seçin.
- Her adım, tam HEX kodunu ve parlaklık yüzdesini gösterir — kopyalamak için tıklayın.
- Skala boyunca ton ve doygunluğu sabit tutar, böylece tüm tonlar griye kaymak yerine açıkça ana renkle ilişkili görünür.
- Ücretsiz, anında ve tamamen yerel.
Nasıl Kullanılır
- Renk seçiciyi kullanarak veya bir HEX kodu yazarak ana renginizi seçin.
- Skalada kaç adım istediğinizi seçin (7, 9 veya 11).
- Her tonun HEX kodunu ve parlaklık yüzdesini doğrudan örneğinin üzerinde okuyun.
- HEX kodunu kopyalamak için herhangi bir örneğe tıklayın.
Örnek
Giriş
#3B82F6 (orta mavi), 9 adımÇıkış
Beyaza yakın bir açık tondan (~%95 parlaklık) siyaha yakın bir koyu tona (~%10 parlaklık) kadar 9 ton, #3B82F6'nın kendisi orta adım olarak konumlandırılmışTüm 9 adım boyunca ton ve doygunluk sabit kalır — sadece parlaklık değişir — böylece her ton açıkça aynı renk ailesinin parçası olarak görünür.
Sıkça Sorulan Sorular
Bu, Tailwind CSS'in renk ölçekleri için kullandığı sistemle aynı mı?
Temel fikir aynıdır (sabit ton/doygunluk, değişken parlaklık) ancak Tailwind'in belirli paletinin tam bir kopyası değildir — Tailwind'in 50-900 ölçekleri tasarımcılar tarafından elle ayarlanmıştır, tek bir formülle oluşturulmamıştır. Bu araç, seçtiğiniz herhangi bir renkten oluşturulan karşılaştırılabilir bir yapı sunar; bu, ana renginiz Tailwind'in hazır renklerinden biri olmadığında kullanışlıdır.
Rengim neden iki bitişik adımda neredeyse aynı görünüyor?
Bu, skalanın çok açık veya çok koyu uçlarına yakın yerlerde olabilir; burada algılanan parlaklık, sayısal yüzdenin önerdiğinden daha yavaş değişir (insan renk algısının bilinen bir özelliği, bu araca özgü değil). Daha az adım seçmek (11 yerine 7) parlaklık değerlerini birbirinden daha fazla uzaklaştırır ve neredeyse aynı örnekleri azaltır.
Bu tonları doğrudan CSS özel özellikleri olarak kullanabilir miyim?
Evet — her HEX kodunu kopyalayıp CSS değişkenlerinize yapıştırın (örn. --color-brand-100'den --color-brand-900'e kadar), skala konumunu projenizin kullandığı adlandırma ölçeğiyle eşleştirerek.
Bunu mu yoksa Renk Karıştırıcı'yı mı kullanmalıyım?
Bir rengin daha açık ve daha koyu versiyonlarını yapıyorsanız — hover durumları, ince arka planlar, bir marka rengiyle ilişkili kenarlıklar — bu ton oluşturucuyu kullanın. Bunun yerine iki farklı renk arasındaki rengi istiyorsanız (diyelim ki ana maviniz ile ikincil turuncunuz arasında bir adım), bir rengin parlaklığını değiştirmek yerine iki rengin RGB kanallarını herhangi bir oranda enterpolasyon yapan Renk Karıştırıcı'yı kullanın.
Ana renk zaten çok açık veya çok koyuysa ne olur?
Ana renk her zaman orta sırada yer alır; açık tonlar üstünde yaklaşık %95 parlaklığa kadar, koyu tonlar altında yaklaşık %10'a kadar kademelenir. Ana renginiz zaten beyaza yakınsa, skalanın açık ton yarısı dar bir parlaklık aralığına sıkışır (neredeyse aynı satırlar) ve koyu ton yarısı geniş bir şekilde yayılır — çok koyu bir ana renk için ise tam tersi olur. En eşit aralıklı skala için, renginizin orta parlaklıktaki bir versiyonundan (yaklaşık %40-60 parlaklık) başlayın.
Tonlar (rengin griyle karıştırılmış hali) da oluşturabilir mi?
Hayır — bu araç yalnızca doygunluğu sabit tutarken parlaklığı değiştirir, bu da açık ve koyu tonlar üretir ama tonlar üretmez. Daha yumuşak bir skala istiyorsanız, önce ana renginizin doygunluğunu azaltın (renk seçicide daha grimsi bir versiyonunu seçin) ve skalayı bundan oluşturun; her adım daha düşük doygunluğu miras alacaktır.