Renk Dönüşümü
#fffcea
Buttery White
Varyasyonlar
Bu bölümün amacı, seçtiğiniz rengin %10'luk artışlarla doğru bir şekilde tonlarını (saf beyaz eklenmiş) ve gölgelerini (saf siyah eklenmiş) üretmektir.
Uzman İpucu: Hover durumları ve gölgeler için gölgeleri, vurgular ve arka planlar için tonları kullanın.
Gölgeler
Ana renginize siyah eklenerek oluşturulan daha koyu varyasyonlar.
Tonlar
Ana renginize beyaz eklenerek oluşturulan daha açık varyasyonlar.
Yaygın Kullanım Alanları
- • UI bileşen durumları (hover, aktif, devre dışı)
- • Gölgeler ve vurgularla derinlik yaratma
- • Tutarlı renk sistemleri oluşturma
Tasarım Sistemi İpucu
Bu varyasyonlar, uyumlu bir renk paletinin temelini oluşturur. Tüm projenizde tutarlılığı sağlamak için bunları dışa aktarın.
Renk Kombinasyonları
Her uyumun kendi havası vardır. İyi çalışan renk kombinasyonları oluşturmak için uyumları kullanın.
Nasıl Kullanılır
Herhangi bir renge tıklayarak hex değerini kopyalayın. Bu kombinasyonlar, görsel uyum yaratmak için matematiksel olarak kanıtlanmıştır.
Neden Önemlidir
Renk uyumları, tasarımlarınızda denge yaratır ve belirli duyguları uyandırır.
Tamamlayıcı
Bir renk ve renk çarkındaki karşıtı, +180 derece ton farkı. Yüksek kontrast.
Bölünmüş tamamlayıcı
Bir renk ve tamamlayıcısına bitişik iki renk, ana rengin karşısındaki değerden +/-30 derece ton farkı. Düz bir tamamlayıcı gibi cesur, ama daha esnek.
Üçlü
Renk çarkında eşit aralıklarla yer alan üç renk, her biri 120 derece ton farkı. Bir rengin baskın olmasına izin ver ve diğerlerini vurgu olarak kullan.
Benzer
Aynı parlaklık ve doygunluğa sahip, renk çarkında bitişik olan üç renk, 30 derece aralıkla. Yumuşak geçişler.
Monokromatik
Aynı tonun, parlaklık değerleri +/-50% olan üç rengi. İnce ve zarif.
Dörtlü
60 derece ton farkıyla ayrılmış iki set tamamlayıcı renk.
Renk Teorisi İlkeleri
Denge
Bir baskın renk kullan, ikincil renklerle destekle ve vurgu renklerini az kullan.
Kontrast
Okunabilirlik ve erişilebilirlik için yeterli kontrast sağla.
Uyum
Renkler, birleşik bir görsel deneyim yaratmak için birlikte çalışmalı.
Renk Kontrast Denetleyicisi
Metin okunabilirliğini sağlamak için WCAG erişilebilirlik standartlarına uygun renk kombinasyonlarını test et.
Metin Rengi
Arka Plan Rengi
Kontrast
WCAG Standartları
Gelişmiş Kontrast Denetleyici
Kaydırıcılar, birden fazla önizleme ve daha fazlasıyla ince ayar yapın
Herkes bir dahidir. Ama bir balığı ağaca tırmanma yeteneğine göre yargılarsanız, hayatı boyunca aptal olduğuna inanarak yaşar.