Renk Dönüşümü
#0088cc
o
Varyasyonlar
Bu bölümün amacı, seçtiğiniz rengin tonlarını (saf beyaz eklenerek) ve gölgelerini (saf siyah eklenerek) %10'luk adımlarla doğru bir şekilde oluşturmaktır.
Profesyonel ipucu: Vurgu durumları ve gölgeler için gölgeler, vurgular ve arka planlar için renk tonları kullanın.
Gölgeler
Temel renginize siyah ekleyerek oluşturulan daha koyu varyasyonlar.
Tonlar
Temel renginize beyaz eklenerek oluşturulan daha açık varyasyonlar.
Yaygın Kullanım Örnekleri
- • UI bileşen durumları (hover, aktif, devre dışı)
- • Gölgeler ve vurgularla derinlik oluşturma
- • Tutarlı renk sistemleri oluşturma
Tasarım Sistemi İpucu
Bu varyasyonlar uyumlu bir renk paletinin temelini oluşturur. Projenizin tamamında tutarlılığı korumak için bunları dışa aktarın.
Renk Kombinasyonları
Her armoninin kendine özgü bir havası vardır. Birbiriyle uyumlu renk kombinasyonları bulmak için armonilerden yararlanın.
Nasıl Kullanılır
Hex değerini kopyalamak için herhangi bir rengin üzerine tıklayın. Bu kombinasyonların görsel uyum yarattığı matematiksel olarak kanıtlanmıştır.
Neden Önemli?
Renk armonileri denge yaratır ve tasarımlarınızda belirli duygular uyandırır.
Tamamlayıcı
Bir renk ve renk tekerleğindeki zıttı, +180 derece renk tonu. Yüksek kontrast.
Bölünmüş Tamamlayıcı
Bir renk ve tamamlayıcısına bitişik iki renk. Düz bir tamamlayıcı kadar cesur ama daha çok yönlü.
Üçlü
Renk tekerleğinde eşit aralıklarla yerleştirilmiş, her biri arasında 120 derece renk tonu farkı olan üç renk. Bir rengin baskın olmasına izin verip diğerlerini vurgu olarak kullanmak en iyisidir.
Analog
Renk tekerleğinde bitişik tonlarda, aynı parlaklık ve doygunluğa sahip, 30 derece aralıklı üç renk. Yumuşak geçişler.
Monokromatik
Aynı tonda, parlaklık değerleri +/-%50 olan üç renk. Zarif ve sofistike.
Tetradik
Birbirinden 60 derece renk tonuyla ayrılmış iki tamamlayıcı renk seti.
Renk Teorisi Prensipleri
Denge
Tek bir baskın renk kullanın, ikincil renklerle destekleyin ve az miktarda vurgu yapın.
Kontrast
Okunabilirlik ve erişilebilirlik için yeterli kontrastı sağlayın.
Uyum
Renkler, birleşik bir görsel deneyim oluşturmak için birlikte çalışmalıdır.
Renk Kontrastı Denetleyicisi
Metin okunabilirliğine yönelik WCAG erişilebilirlik standartlarını karşıladıklarından emin olmak için renk kombinasyonlarını test edin.
Metin Rengi
Arka Plan Rengi
Kontrast
WCAG Standartları
Gelişmiş Kontrast Denetleyicisi
Kaydırıcılar, çoklu önizlemeler ve daha fazlası ile ince ayar yapın
Herkes bir dahidir. Ama bir balığı ağaca tırmanma yeteneğine göre yargılarsanız, tüm hayatını aptal olduğuna inanarak geçirir.