Tek bir rengi eksiksiz açık ton, koyu ton ve kırık ton ölçeklerine dönüştürün ve tarayıcınızda CSS değişkeni olarak dışa aktarın.
Bir tasarım sistemi nadiren tek bir renge ihtiyaç duyar: bir aileye ihtiyaç duyar. Açık tonlar, koyu tonlar ve kırık tonlar, tek bir renk tonundan bu aileyi kurmanın üç klasik yoludur. Açık ton, rengin beyazla karışımıdır; arka planlar, üzerine gelme yüzeyleri ve devre dışı durumlar için kullanılan daha açık, daha yumuşak sürümler verir. Koyu ton, rengin siyahla karışımıdır; açık arka plan üzerindeki metin, kenarlıklar ve basılı durumlar için kullanılan daha koyu sürümler verir. Kırık ton ise rengin griyle karışımıdır; doygunluğu düşürür ama açıklığı o kadar sert değiştirmez — üçünün en az bilineni ve saf açık ile koyu tonların veremeyeceği o dingin, editoryal görünümü üretenidir.
Buradaki matematik bilinçli olarak basit ve öngörülebilir: her adım, ana renginizle hedef (beyaz #ffffff, siyah #000000 ya da orta gri #808080) arasında RGB kanallarının %10'luk artışlarla doğrusal ara değerlemesidir; böylece onuncu adım tam olarak hedefe oturur. Bu, klasik açık ve koyu ton üreteçlerinin kullandığı düzenin aynısıdır ve her değeri yeniden üretilebilir kılar — herhangi bir örneği elle yeniden hesaplayabilirsiniz. Ödünleşmeyi bilmekte fayda var: ara değerleme OKLCH gibi algısal bir uzayda değil sRGB'de yapıldığı için, algılanan açıklık adımları özellikle çok doygun sarı ve camgöbeği tonlarında tam olarak eşit değildir. Arayüz ölçekleri için bu genellikle sorun olmaz, hatta tercih edilir, çünkü sonuçlar özgün renk tonuna yakın kalır.
Bunu asıl pratik kılan kısım dışa aktarmadır. Tek tıklama paleti :root bloğuna yapıştırmaya hazır CSS özel özellikleri olarak ya da bir tasarım aracı için düz bir hex listesi olarak kopyalar. Tailwind tarzı adlandırmayı açmak, paleti tanıdık 50–900 ölçeğine yeniden eşler — 50'den 400'e açılan, 500 ana renginiz, 600'den 900'e koyulaşan — ve doğrudan bir Tailwind temasına ya da aynı düzeni izleyen herhangi bir token dosyasına oturur. Paleti .css dosyası olarak da indirebilirsiniz. Tüm hesaplamalar ve dosyanın kendisi %100 tarayıcınızda üretilir; seçtiğiniz renk hiçbir zaman bir sunucuya gönderilmez.
Açık ton renginizin beyazla, koyu ton siyahla, kırık ton ise griyle karışımıdır. Açık ve koyu tonlar açıklığı değiştirir; kırık tonlar temelde doygunluğu düşürür ve benzer açıklıkta daha dingin bir sonuç verir.
Her adım, ana renginizle beyaz, siyah ya da %50 gri arasında RGB kanallarının %10'luk artışlarla doğrudan doğrusal karışımıdır — yani onuncu açık ton saf beyaz, onuncu koyu ton saf siyahtır. Değerler tümüyle yeniden üretilebilir.
Evet. Tailwind tarzı adları açın; dışa aktarma 50–900 ölçeğini, 500 ana renginiz olacak şekilde kullanır ve tema yapılandırmanıza ya da bir CSS değişkenleri dosyasına yapıştırmaya hazır olur.
Otomatik olarak değil. Ölçek matematiksel olarak eşittir, algısal olarak değil; bu yüzden metin ve arka plan çiftlerini WCAG kontrast eşiklerine karşı yine de denetlemeniz gerekir — pratik bir kural olarak en açık tonları en koyu tonlarla eşleştirin.
Hayır. Palet, CSS dışa aktarımı ve indirilen dosya cihazınızda JavaScript ile yerel olarak üretilir — hiçbir şey iletilmez ya da bir sunucuda saklanmaz.
Vai.la, herhangi bir URL'yi tıklama istatistikleri, QR Code ve kendi biolink'inizle birlikte kısa bir bağlantıya dönüştürür.
Vai.la, araçların nasıl kullanıldığından veya sonuçlarına dayanarak alınan kararlardan sorumlu değildir.