Herhangi bir temel renkten tonlar, gölgeler ve nüanslar oluşturun. Renk ölçekleri, tasarım sistemleri ve gradyanlar oluşturmak için mükemmel. Tamamen istemci tarafında — anında sonuçlar.
Daha açık versiyonlar (beyazla karışmış)
Daha koyu versiyonlar (siyahla karışmış)
Soluk versiyonlar (griyle karışmış)
Bu araç, herhangi bir temel renkten sistematik renk varyasyonları oluşturur. Tonlar, rengi beyazla karıştırarak daha açık versiyonlar oluşturur; gölgeler, siyahla karıştırarak daha koyu versiyonlar oluşturur; nüanslar ise griyle karıştırarak soluk versiyonlar oluşturur. Bu renk ölçekleri, tutarlı tasarım sistemleri, UI bileşenleri ve erişilebilir renk paletleri oluşturmak için gereklidir. Tüm işlemler tarayıcınızda gerçekleşir — hiçbir veri sunucuya gönderilmez.
Tonlar, rengi beyazla karıştırarak oluşturulur ve onu daha açık yapar. Gölgeler, siyahla karıştırılarak oluşturulur ve onu daha koyu yapar. Nüanslar, griyle karıştırılarak oluşturulur ve bu, doygunluğu azaltırken göreceli açıklığı korur. Birlikte tam bir renk ölçeği oluştururlar.
Çoğu tasarım sistemi için 10 adım yeterli ayrıntı sağlar (örneğin, Tailwind CSS'te 50–900). Daha basit projeler için 5 adım yeterlidir. Yüksek detaylı sistemler için 20 adıma kadar çıkabilirsiniz.
Evet! CSS değişkenleri olarak dışa aktarın ve stillerinizde referans verin, veya tasarım tokenlarına entegre etmek için JSON olarak dışa aktarın. Birçok geliştirici, renk sistemlerinin temeli olarak 10 adımlı ölçekleri (50, 100, 200, ..., 900) kullanır.
Renk ölçekleri, tutarlı UI bileşenleri oluşturmak için kullanılır — daha açık tonlar için hover durumları ve arka planlar, ana renk için birincil eylemler, daha koyu gölgeler için basılı durumlar ve metin. Tüm uygulamanızda görsel hiyerarşi ve erişilebilirlik sağlarlar.