Renk Paleti Üreteci
Bir renk seç ya da vitrin fotoğrafını sürükle. Gerisini araç çıkarır. 50'den 900'e ton skalası, beş uyum paleti, çalışmaya hazır arayüz teması ve tek tıkla CSS, Tailwind, SCSS veya JSON çıktısı.
ya da
Görsel sürükle ya da tıkla
Ton skalası (50 → 900) arayüz tasarımının belkemiği
Analog komşu renkler; huzurlu, uyumlu
Tamamlayıcı karşıt renk: vurgu ve buton için
Bölünmüş tamamlayıcı kontrast var, ama daha yumuşak
Üçlü uyum canlı ve dengeli üçlü
Dörtlü uyum zengin; dikkatli kullan
Hazır arayüz seti bu renkle çalışan tam bir tema
Paleti dışa aktar CSS, Tailwind, SCSS, JSON
Her renge tıklayınca HEX kodu panoya kopyalanır. Rozetler o rengin üzerine beyaz (B) ve siyah (S) yazının okunup okunmadığını gösterir; ölçü WCAG AA eşiği.
Paleti doğru kullanmak
- 60-30-10 kuralı: %60 nötr zemin, %30 ikincil renk, %10 vurgu. Ana rengi her yere sürersen hiçbir yer öne çıkmaz.
- Ton skalasını kullan: profesyonel arayüzler tek bir renk değil, o rengin 8-10 tonuyla kurulur: 50-100 zemin, 500-600 buton, 800-900 yazı.
- Rozetlere bak: butonun rengi güzel olabilir ama üzerindeki yazı okunmuyorsa müşteri kaybedersin. Rozet kırmızıysa o renk butona gitmez.
- Kırmızı-yeşil ikilisine dikkat: erkeklerin yaklaşık %8'i bu ikiliyi ayırt edemez; "hata/başarı" durumlarını sadece renkle anlatma, ikon veya yazı da ekle.
Palet güzel de, ya markanın geri kalanı?
Logo, kimlik, web sitesi ve sosyal medya şablonları. Markan bu renklerle baştan sona giyinsin.