Renk Paleti Oluşturucu
Uyumlu renk paletleri ya da resminizden çıkarılan palet
Yeni palet için Boşluk tuşu · ayrıntılar için renge tıklayın · kopyalamak için ⧉ · 🔒 rengi sabitler
#7C3AED tonları
Ücretsiz Renk Paleti Oluşturucu
Renk uyumu kuralları, fotoğraftan palet ve kullanıma hazır kodlar
Bir ana renk seçin; renk paleti oluşturucu renk çemberinin klasik uyum kurallarıyla beş renkli bir palet hazırlasın: benzer renkler (komşu tonlar), tek renk (aynı ton, farklı açıklık), tamamlayıcı (karşıt tonlar), ayrık tamamlayıcı, üçlü ve dörtlü uyum. Yeni fikirler için Boşluk tuşuna ya da “Yeni palet”e basın, beğendiğiniz renkleri kilitleyin. “Resimden” sekmesiyle bir fotoğrafın, logonun ya da ekran görüntüsünün baskın renklerini çıkarın. Her renkte HEX, RGB ve HSL kodları ile siyah veya beyaz yazı için WCAG kontrast puanı görünür; tıklayınca kopyalanır. Seçili renk için 10 adımlı ton skalası (50–900) oluşturulur; paletin tamamını CSS değişkenleri ya da HEX listesi olarak kopyalayabilir veya PNG olarak indirebilirsiniz. Görseller tarayıcınızda analiz edilir, hiçbir yere yüklenmez.
Özellikler
6 uyum kuralı
Benzer, tamamlayıcı, üçlü ve diğerleri
Resimden palet
Fotoğrafın baskın renkleri
Kilitle ve karıştır
Beğendiklerini tut, gerisini yenile
Kontrast kontrolü
Her renkte metin için WCAG oranı
Renk Uyumu Temelleri
Uyum kuralları
- Benzer: ±30° içindeki tonlar — sakin ve bütünlüklü
- Tamamlayıcı: 180° karşıt tonlar — yüksek kontrast
- Ayrık tamamlayıcı: ana renk + karşıtının iki komşusu (±150°)
- Üçlü: 120° aralıklı üç ton — canlı ama dengeli
- Dörtlü: 90° aralıklı dört ton — zengin, birini baskın kullanın
Pratik ipuçları
- 60-30-10 kuralı: %60 baskın, %30 ikincil, %10 vurgu rengi
- Gövde metni için kontrast en az 4,5:1 olmalı (WCAG AA)
- Büyük metinde (≥24 px veya kalın 18,5 px) 3:1 yeterli
- 50–900 ton skalaları tasarım token'ı olarak kullanılabilir (Tailwind tarzı)
Sık Sorulan Sorular
Renk paleti nasıl oluşturulur?
Bir ana renk seçin (örneğin marka renginiz), bir uyum kuralı belirleyin; araç renk çemberinde uyumlu renkleri hesaplar. Beğendiğiniz renkleri kilitleyip Boşluk tuşuyla diğerlerini yenileyin.
Resimden renk paleti nasıl çıkarılır?
“Resimden” sekmesine geçip bir görsel sürükleyin, yapıştırın ya da seçin. Araç benzer pikselleri gruplar (k-means kümeleme) ve en baskın altı rengi, en sık görüleni başta olacak şekilde gösterir.
“Aa 7.2 · AAA” gibi değerler ne anlama geliyor?
Renk ile siyah veya beyaz yazıdan uygun olanı arasındaki kontrast oranını gösterir. WCAG AA normal metin için 4,5:1, AAA ise 7:1 ister.
Paleti CSS'te nasıl kullanırım?
“CSS değişkenlerini kopyala”ya tıklayın; --color-1 … --color-5 içeren bir :root bloğu kopyalanır. Stil dosyanıza yapıştırıp her yerde var(--color-1) şeklinde kullanın.
Tamamlayıcı renkler nelerdir?
Renk çemberinde birbirinin karşısında duran renklerdir: mavi–turuncu, mor–sarı, kırmızı–yeşil gibi. Güçlü kontrast oluşturur, harekete geçirici butonlarda iyi çalışır.
Görselim yükleniyor mu?
Hayır. Görsel küçültülüp tarayıcınızda bir tuval üzerinde analiz edilir; sunucuya hiçbir şey gönderilmez.