palette Renk Ton Skalası Üretici (Tint & Shade) star

Skala Nasıl Oluşturulur

Renk teorisi, HSL modelinde bir ana rengi sistematik olarak değiştirmenin üç yolunu tanımlar: tint (beyaza doğru karıştırma, Lightness'ı (açıklık) yükseltir — renk daha soluk görünür), shade (siyaha doğru karıştırma, Lightness'ı düşürür — renk daha koyu ve derin görünür) ve tone (griye doğru karıştırma, Lightness'ı büyük ölçüde sabit tutup Saturation'ı (doygunluk) düşürür — renk "kirlenmiş" veya donuk görünür). Bu üretici, üçlünün tint/shade yarısını üretir: taban renginizden başlayarak açık duraklar için Lightness'ı beyaza doğru, koyu duraklar için siyaha doğru kademeli olarak değiştirir; böylece Tailwind ve Material gibi tasarım sistemlerinin kullandığı 50-900 aralığındaki on adımlık skalayı üretir ve orijinal marka rengi 500 civarına yerleşir.

Somut bir örnek: hsl(217, %91, %60) civarındaki bir maviden başlayınca, 50. adım hsl(217, %91, %97) civarına düşer — neredeyse beyaz, tonun yalnızca bir fısıltısı kalır — 900. adım ise hsl(217, %60, %20) civarına düşer — çok koyu, renk siyaha yaklaşırken doygunluk sıkışır. Her durak hem bir hex kodu hem de kullanıma hazır bir CSS değişkeni alır; herhangi bir renk örneğine tıklamak onu kopyalar.

Elle birkaç ton tahmin etmek yerine tam bir skala üretmenin pratik faydası tutarlılıktır: her durak aynı ana tondan, aynı karışım kuralıyla türetilir; bu yüzden 200. adımdaki bir kart kenarlığıyla 100. adımdaki bir hover durumu, aylar sonra farklı bir tasarımcı veya farklı bir bileşen aynı marka renginin yeni bir tonuna ihtiyaç duyduğunda bile hep aynı renk ailesine ait gibi hissettirir.

Bilinmesi Gerekenler

• Tint, shade ve tone aynı işlem değildir: bu araç yalnızca tint ve shade — yani Lightness değişimleri — uygular. Gerçek bir tone, Lightness'ı büyük ölçüde sabit tutarken Saturation'ı azaltır ve rengi daha açık veya koyu değil, donuk bir versiyona dönüştürür; bu ayrı işlem, bu üreticinin uyguladığı şey değildir.
• Her durak nerede kullanılır: 50-100 sayfa arka planları ve hover dolguları için, 200-300 kenarlıklar ve ayırıcılar için, 500-600 buton ve bağlantılar (marka renginin kendisi) için, 700-900 açık zeminde gövde metni için.
• Kontrast otomatik değildir: ≥700 bir adımı ≤100 bir adımla eşlemek genelde WCAG AA kontrastını geçer, ama "genelde" "her zaman" demek değildir — yayınlamayı planladığınız kesin çifti özel bir kontrast denetleyiciyle doğrulayın.
• Tailwind'in kendi paletleriyle birebir aynı değildir: Tailwind'in yerleşik renkleri tasarım gereği ton ton elle ayarlanmıştır; bu üretici ise herhangi bir girdiye tek, tutarlı bir karışım formülü uygular — özel marka renklerinde öngörülebilir, gerçek arayüzler için yeterince yakındır.
• Karanlık mod genelde skalayı ters çevirir: açık modda 50. adımı kullanan bir arka plan, karanlık modda genelde 900. adıma yakın bir şeye karşılık gelir ve tam tersi de geçerlidir — tam skalayı baştan üretmek, her iki temanın da zaten kapsanmış olması demektir.