Tonlar ve Gölgeler Oluşturucu
21 renk
#ffffffrgb(255, 255, 255)#ebf3fergb(235, 243, 254)#d8e6fdrgb(216, 230, 253)#c4dafcrgb(196, 218, 252)#b1cdfbrgb(177, 205, 251)#9dc1fbrgb(157, 193, 251)#89b4fargb(137, 180, 250)#76a8f9rgb(118, 168, 249)#629bf8rgb(98, 155, 248)#4f8ff7rgb(79, 143, 247)#3b82f6rgb(59, 130, 246)#3575ddrgb(53, 117, 221)#2f68c5rgb(47, 104, 197)#295bacrgb(41, 91, 172)#234e94rgb(35, 78, 148)#1e417brgb(30, 65, 123)#183462rgb(24, 52, 98)#12274argb(18, 39, 74)#0c1a31rgb(12, 26, 49)#060d19rgb(6, 13, 25)#000000rgb(0, 0, 0)Teknik ayrıntılar
Tonlar ve Gölgeler Oluşturucu Nasıl Çalışır
Araç Ne Yapar
Tonlar ve Gölgeler Oluşturucu, herhangi bir temel renkten daha açık tonlar (beyazla karıştırılmış) ve daha koyu gölgeler (siyahla karıştırılmış) üretir. Bir renk girin ve varyasyonların pürüzsüz bir gradyanını oluşturmak için adım sayısını seçin. Her adım HEX, RGB değerlerini ve karışım yüzdesini gösterir; bu da UI tasarımı, markalama ve veri görselleştirme için tutarlı renk ölçekleri oluşturmayı kolaylaştırır.
Yaygın Geliştirici Kullanım Senaryoları
Geliştiriciler, tasarım token ölçekleri (örn. blue-100’den blue-900’e), etkileşimli öğeler için hover ve active durumları, erişilebilir renk hiyerarşileri ve açık/koyu temalar için tutarlı arka plan ve yüzey renkleri oluştururken ton ve gölge oluşturucularını kullanır. Araç, Tailwind CSS özel renk paletleri veya Material Design renk sistemleri oluşturmak için vazgeçilmezdir.
Tonlar ve Gölgeler Nasıl Çalışır
Bir ton, bir rengi beyazla karıştırarak oluşturulur ve açıklığını artırır. Bir gölge ise siyahla karıştırılarak oluşturulur ve açıklığı azaltır. Tonlar için formül: new = base + (255 - base) × factor. Gölgeler için: new = base × (1 - factor). Adımlar, temel renk ile saf beyaz (tonlar) ya da saf siyah (gölgeler) arasında eşit şekilde dağıtılır ve renk değerlerinin doğrusal bir gradyanını üretir.
Yaygın Hatalar ve Sınır Durumları
Beyaz veya siyahla doğrusal karıştırma, bazı tonlar için soluk tonlar veya çamurlu gölgeler üretebilir. Sarılar koyulaştırıldığında yeşilimsi görünebilir ve maviler açıldığında canlılığını kaybedebilir. Algısal olarak daha uniform ölçekler için OKLCH veya CIELAB renk uzaylarını kullanmayı değerlendirin. En açık tonlarınızın ve en koyu gölgelerinizin, hedeflenen arka planlarına karşı yeterli kontrastı koruduğunu her zaman doğrulayın.
Bu Aracı Ne Zaman Kullanmalı, Ne Zaman Kod Yazmalı
Tasarım çalışmaları sırasında hızlı keşif ve renk ölçekleri üretmek için bu tarayıcı aracını kullanın. Üretim düzeyindeki tasarım sistemleri için, algısal olarak uniform renk uzaylarını destekleyen ve tasarım token’larını herhangi bir formatta çıktılayabilen chroma.js veya culori gibi renk kütüphaneleriyle tonları ve gölgeleri programatik olarak üretin.