DevToys Web Pro iconDevToys Web ProBlog
Bizi değerlendirin:
Tarayıcı uzantısını deneyin:

Renk Uyumları Oluşturucu

  • Temel
    Şema
    Base + opposite (180°)
    #3B82F6base
    rgb(59, 130, 246)
    hsl(217, 91%, 60%)
    #F6AF3Ccomplement (180°)
    rgb(246, 175, 60)
    hsl(37, 91%, 60%)
    Teknik ayrıntılar

    Renk Uyumları Üreticisi Nasıl Çalışır

    Araç Ne Yapar

    Renk Uyumları Üreticisi, tek bir temel tondan matematiksel olarak ilişkili renk setleri hesaplar: tamamlayıcı, benzer, triadik, tetradik, kare, bölünmüş tamamlayıcı, monokromatik ve tonlar. Her palet, tek tıkla kopyalayabileceğiniz ve doğrudan CSS’te veya tasarım token’larında kullanabileceğiniz HEX, RGB ve HSL değerleriyle birlikte oluşturulur.

    Yaygın Geliştirici Kullanım Senaryoları

    Tasarımcılar, bir marka tonunun farklı uyum kuralları altında nasıl evrildiğini keşfederek marka paletlerini prototipler. Frontend geliştiriciler, birincil marka renginden butonlar, uyarılar ve rozetler için vurgu renkleri türetir. Veri görselleştirme mühendisleri, kasıtlı görünen ama ayırt edilebilir kalan kategorik renk setleri seçer. Ürün yöneticileri, özel tasarım araçlarına ihtiyaç duymadan tasarım önerilerini incelerken palet seçeneklerini karşılaştırır.

    Veri Biçimleri, Türleri veya Varyantlar

    Sekiz şema mevcuttur: Tamamlayıcı (temel + 180°), Benzer (temel ± 30°), Triadik (120° aralıklı 3 renk), Tetradik (dikdörtgen 4 renk), Kare (90° aralıklı 4 renk), Bölünmüş tamamlayıcı (temel + ±150°), Monokromatik (aynı ton, değişen açıklık 10–90%) ve Tonlar (aynı ton, koyudan açığa). Her renk, bir rol etiketiyle birlikte HEX, RGB ve HSL gösterimlerini içerir.

    Yaygın Hatalar ve Sınır Durumları

    Aşırı derecede desatüre veya griye yakın temel renklerden türetilen uyumlar, şemalar arasında ayırt edilemez görünebilir — doygun bir temelden başlayın. Triadik veya tetradik şemalarla birleştirilen çok doygun temeller, yüksek sesli ve dengelenmesi zor paletler üretebilir; UI kullanımı için doygunluğu azaltmayı düşünün. Uyumdan türetilen bazı eşleşmeler WCAG kontrastını karşılamaz — yayına almadan önce Metin/arka plan çiftlerini Renk Kontrast aracında mutlaka doğrulayın.

    Bu Aracı Ne Zaman Kullanmalı, Ne Zaman Kod Yazmalı

    Fikir üretimi, hızlı keşif ve tasarım incelemesi için tarayıcı aracını kullanın. Kod tarafında chroma.js, colord veya culori gibi kütüphaneler, uyumları programatik olarak hesaplamanıza, bunları tasarım-token build hatlarına entegre etmenize ve daha dengeli görünen paletler için uyum matematiğini Oklch gibi algısal olarak uniform renk uzaylarıyla birleştirmenize olanak tanır.