Renk Dönüşümü
#e24826
≈ Cinnabar
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.
Renk 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 çarkındaki 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, ana rengin karşısındaki değerden +/-30 derece ton farkı. Düz tamamlayıcı gibi kalın, ancak daha çok yönlü.
Üçlü
Renk çarkında eşit aralıklarla yerleştirilmiş, her biri 120 derecelik ton farkı olan üç renk. En iyisi, bir rengin baskın olmasına izin verip diğerlerini vurgu olarak kullanmaktır.
Benzer
Renk çarkında birbirine komşu, 30 derece aralıklı, aynı parlaklık ve doygunluğa sahip üç renk. Yumuşak geçişler.
Tek renkli
Aynı tonda, +/-%50 parlaklık değerlerine sahip üç renk. İncelikli ve zarif.
Dörtlü
60 derecelik 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ıyla 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.