- Tailwind CSS paletleriyle çalışmaya tek bir Hex değerinden başlayıp bunu 50’den 950’ye kadar 11 adımlı renge hızla genişletebilirsiniz
- Varsayılan referans durak 500’dür; gerekirse 50~950 aralığındaki başka bir konumu referans renk olarak belirleyebilirsiniz
- Doygunluk ve Hue ayarlanarak yalnızca parlaklık değişiminden daha doğal paletler oluşturulabilir
- Lightness/Luminance minimum ve maksimum değerleri ile mod geçişine göre beyaz ve siyah yönündeki renk dağılımı değişir
- API şu anda temel Hex değeri tabanlı palet döndürmeye odaklanır; HSL ayar seçenekleri henüz sunulmaz
Tailwind CSS Paleti Oluşturma
- Palette Creator, geçerli bir onaltılık renk değerini başlangıç değeri olarak alıp Tailwind CSS için 11 adımlı bir palet üretir
- Varsayılan referans durak 500 olsa da, 50~950 arasındaki başka bir durağa değiştirerek istediğiniz rengi paletin merkezine yerleştirebilirsiniz
-
Renk ayarlama yöntemi
- %100 Saturation renklerde, palete çeşitlilik katmak için Hue Shift yukarı veya aşağı uygulanabilir
- Doygunluğu düşük temel renklerde, iki uçta Saturation artırılırsa daha ilgi çekici bir palet elde edilir
- Minimum/Maximum Lightness veya Luminance ayarlanarak kalan renkler beyaz ve siyah uçlara kadar yayılabilir
- Lightness ile Luminance arasında geçiş yapıldığında uçlardaki renk dağılımı farklı şekilde üretilir
- Renk tasarımı ilkeleri Adam Wathan ve Steve Schoger’ın Refactoring UI kitabından ilham almıştır; söz konusu kitap otomasyon araçlarının kullanılmasını önermemektedir
- Bu araç, bitmiş doğru cevabı sizin yerinize üretmekten çok yeni bir palet oluşturmaya hızlı başlamaya odaklanır
API ve çıktının kullanımı
- Palette API ile birden fazla palet seti alınabilir
- Yalnızca tek bir Hex değeriyle 50~950 paleti oluşturması gereken tasarım araçlarında kullanılabilir
- Mevcut API yalnızca temel Hex değeri tabanlı paletler döndürür; HSL tweak seçenekleri sunmaz
- Oluşturulan paletler, Tailwind yapılandırması için CSS’e yapıştırılabilecek biçimde sunulur
- Örnek çıktı,
@themebloğu içinde--color-yellow-50den--color-yellow-950ye kadar OKLCH renk değişkenlerini içerir
- Örnek çıktı,
1 yorum
Hacker News görüşleri
Bu tür araçlarda erişilebilirlik geliştirici deneyiminin varsayılan olarak yer alması iyi olurdu
Renk paleti tanımlarken, yalnızca renk adlarına bakarak kombinasyonun erişilebilir olup olmadığını anlayabilmekten bahsediyorum
Örneğin USWDS tasarım sisteminde blue-30 on gray-80 kombinasyonunun erişilebilir (WCAG AA) olduğunu anlayabiliyorsunuz; çünkü iki değer arasındaki fark 50 veya daha fazla
Bu biraz dar kavram hakkında daha önce bir yazı yazmıştım: https://darekkay.com/blog/accessible-color-palette/
Herkes bir gün kalıcı ya da geçici bir engel yaşayacak ve Streamlit gibi harika araçlar bile erişilebilirlik yüzünden çoğu zaman kullanılamıyor
https://www.radix-ui.com/colors
WorkOS'ta çalışıyorum ve Radix, bizim yönettiğimiz açık kaynak bir proje
Ancak bu kavramı kullanarak yeni paletler üreten bir araç hâlâ bilmiyorum
Renklerle oynamayı seviyorum, bu da güzel bir araç
Diğer iyi alternatifler arasında https://adevade.github.io/color-scheme-generator/, https://colorcolor.in var; bunlar doğrudan Tailwind üretmiyor ama oldukça iyi yapılmışlar, ayrıca http://colormind.io, https://uicolors.app/create de var
Bu kütüphanenin sunduğu seviyeye kadar ileri düzeyde işlem yapabilen bir araç istiyorum: https://colorjs.io/
Benzer araçlarda görmediğim kadar kendine özgü bir arayüzü var ve grafik üzerinden paletin tamamındaki renklerin göreli L/C/H değerlerini görebiliyorsunuz
Bu sayede daha tutarlı paletler oluşturmak kolaylaşıyor
Benim sık kullandığım, daha genel renk teorisi bağlantılarını da ekleyeyim: https://paletton.com/ renk teorisine dayalı paletler oluşturup genel renk düzenleri üretebiliyor
https://medialab.github.io/iwanthue/ ise k-means kullanarak renkleri ayırıyor; grafik renkleri ve kontrast sağlamak için iyi
Kısa süre önce bir tane yaptım
Çok daha basit ve zevklerimi daha güçlü yansıtıyor ama Tailwind yapılandırması üretebiliyor: https://ghola.dev masaüstü ya da iPad'de en iyi deneyimi veriyor
Bunu web component olarak nasıl yaptığımı anlattığım uzun bir yazı da var: https://www.naildrivin5.com/blog/2024/01/24/web-components-i...
Aynı anda yalnızca tek bir renkle uğraşan şeye palet oluşturucu demek bana pek doğru gelmiyor ya da en azından benim aradığım şey bu değil
Uygulamalar için renk kümeleri üreten bir palet oluşturucuya ihtiyacım var ve bu araç o tarafa daha yakın
Harika
Tek bir logodan başlayıp bir dakikadan kısa sürede bir palet oluşturdum ve geçen sefer bunu elle yapmak için harcadığım 30 dakikadan daha iyi bir sonuç çıktı
Hoşuma gitti
Bu renkleri Figma ile senkronize etmenin en kolay yolu ne olur merak ediyorum
Profesyonel tasarımcılar belki de bu tür renkleri üretip Tailwind'e aktaran bir eklenti kullanıyordur
Birkaç kez düzgün kullanmaya çalıştım ama o kadar manuel ve zahmetli ki sonunda vazgeçiyorum
Güzel bir araç
Kod tabanımda kullandığım başka bir yaklaşım da renk paletini CSS değişkenleri ile tanımlayıp Tailwind yapılandırmasının bu değişkenlere işaret etmesini sağlamak
Böylece çalışma zamanında farklı renk temalarını yerleştirebiliyorum
Çok kullanışlı bir araç
Tek bir renkten bir renk paleti oluşturup ardından sonucu https://palettte.app içine atıyor, her rengi elle ayarlayarak kullanıyorum
Demodaki brand örneğinin insanların tipik yapılandırmalarda gerçekten bu şekilde kullandığı bir şey olup olmadığını merak ediyorum
Varsayılan renkleri değiştirmeyi ya da primary, secondary gibi yeni değişkenler oluşturmayı beklerdim
brand renk seti, blogum simeongriggs.dev'de kullandığım renk ve gerçekten de bu araçta
500örnek değerini verip geri kalanını ürettimGradient'ler için kullanışlı görünüyor
Kimsenin Paletton'dan bahsetmemesi garip; renk seçerken benim temel aracım odur: https://paletton.com/
Bir temel renkten başlarsanız, palette birbirine komşu renkler arasında uzanan gradient'ler de elde edebilirsiniz
Özellikle triadic ve tetradic düzenler faydalı
renk kaydırmayı nasıl uygulayacağımı aktif olarak aramış olmama rağmen, bunu çözmem epey zaman aldı