Renk Şeması Oluşturucu

Çeşitli renk paletleri oluşturmayı, görselden renk almayı, CSS gradyanları ve gölge efektleri oluşturmayı destekler; tek renk veya toplu işlem yapılabilir.

Hata bildirimi

Tarayıcı yürütme modu: Verileriniz tarayıcınızda işlenir ve sunucuya yüklenmez.

Hız ve kararlılık: İşleme hızı cihazınıza ve tarayıcınıza bağlıdır. Büyük toplu işler için masaüstü sürümü daha kararlı olabilir.

Araç yükleniyor, lütfen bekleyin...

Çevrimiçi araç yüklenmez veya çalışmazsa masaüstü aracını deneyin. https://tools.yikeaigc.com/

Araç Kullanımı

Eski sürüme dön

Tek renk modu

Toplu renk al

1Temel rengi seç

RGB: 2, 132, 199 HSL: 243°, 75%, 59%

2Renk paleti seç

Renk sayısı:

Doygunluk ayarı: 0%

Parlaklık ayarı: 0%

3Renk şeması

4CSS gradyanı

Gradyan türü:

Açı: 90°

5Gölge efekti

Bulanıklık yarıçapı: 20px

Yayılma yarıçapı: 0px

Opaklık: 40%

Efekti önizle

6Görüntüden renk çıkar

Yüklemek için tıklayın veya resmi buraya sürükleyin

JPG, PNG, GIF, WebP desteklenir

1Birden çok resim yükle

Yüklemek için tıklayın veya görselleri buraya sürükleyin

Toplu seçim desteklenir; her görselin ana renkleri otomatik çıkarılır

Görsel başına renk sayısı:

Renk şeması:

Panoya kopyalandı

'; zip.file('preview.html', htmlContent); const content = await zip.generateAsync({ type: 'blob' }); const link = document.createElement('a'); link.href = URL.createObjectURL(content); const timestamp = new Date().toISOString().replace(/[-:.]/g, '').slice(0, 15); link.download = `color-palettes-${timestamp}.zip`; link.click(); downloadBatchZip.disabled = false; batchStatus.textContent = 'ZIP文件已下载'; }); // ========== 导出功能 ========== document.getElementById('exportPaletteBtn').addEventListener('click', function() { if (currentPalette.length === 0) return; const data = { baseColor: baseColorPicker.value, scheme: currentScheme, colors: currentPalette.map(c => ({ hex: c.hex, rgb: `rgb(${c.rgb.r}, ${c.rgb.g}, ${c.rgb.b})`, hsl: `hsl(${Math.round(c.hsl.h)}, ${Math.round(c.hsl.s)}%, ${Math.round(c.hsl.l)}%)` })), gradient: gradientCode.textContent, shadow: shadowCode.textContent }; const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `color-palette-${baseColorPicker.value.replace('#', '')}.json`; link.click(); showCopyToast('配色方案已导出'); }); // ========== 初始化 ========== schemeDescription.textContent = schemeDescriptions['monochromatic']; updateColorDisplay(); updatePalette(); });

Talimatlar

Yazılım Kullanım Talimatları

Temel rengi seçin:Renk seçiciyi kullanarak temel rengi seçin veya HEX renk değerini doğrudan girin (ör. #4f46e5); ilham almak için "Rastgele Renk" düğmesine de tıklayabilirsiniz. Araç, RGB ve HSL renk değeri bilgilerini gerçek zamanlı olarak gösterir.
Renk şemasını seçin:
- Tek renkli şema:Aynı renk tonu, doygunluk ve parlaklık değiştirilerek varyasyonlar oluşturulur
- Benzer renk şeması:Renk çarkında yan yana bulunan renkler, doğal ve yumuşak
- Tamamlayıcı renk şeması:Renk çarkında karşılıklı konumlanan iki renk, güçlü kontrast sağlar
- Ayrılmış tamamlayıcı renkler:Temel renk ve tamamlayıcı renginin iki yanındaki renkler
- Üçlü renk şeması:Renk çarkında eşit aralıklarla dağılan üç renk
- Kare renk şeması:Eşit aralıklarla dağılan dört renk
- Dörtlü renk şeması:İki çift tamamlayıcı renk, belirgin katmanlı yapı
Parametreleri ayarlayın:
- Renk sayısı:3, 5, 7 veya 9 renk oluşturmayı seçin
- Doygunluk ayarı:Genel doygunluğu artırmak veya azaltmak için kaydırıcıyı sürükleyin
- Parlaklık ayarı:Genel parlaklığı artırmak veya azaltmak için kaydırıcıyı sürükleyin
CSS gradyanı oluşturun:Doğrusal veya radyal gradyan türünü seçin, açı parametrelerini ayarlayın ve doğrudan kullanılabilir CSS gradyan kodunu oluşturun.
Gölge efekti oluşturun:Bulanıklık yarıçapı, yayılma yarıçapı ve opaklık parametrelerini ayarlayarak mevcut temel renge dayalı gölge CSS kodu oluşturun.
Görselden renk çıkarın:Görsel yüklendikten sonra araç ana renkleri otomatik olarak çıkarır. Hassas renk almak için görselin herhangi bir yerine tıklayabilir ve çıkarılan rengi temel renk olarak uygulayabilirsiniz.
Toplu renk alma modu:"Toplu Renk Alma" sekmesine geçin, birden fazla görsel yükleyin, her görselden çıkarılacak renk sayısını ve renk şeması genişletme modunu ayarlayın, toplu çıkarma işlemini başlatmak için tıklayın; tamamlandığında tüm sonuçları içeren ZIP dosyasını indirebilirsiniz.
Kopyalama ve dışa aktarma:Herhangi bir renk kartına tıklayarak renk değerini kopyalayabilir, "Renk Şemasını Dışa Aktar" düğmesine tıklayarak eksiksiz renk bilgilerini içeren JSON dosyasını indirebilirsiniz.

Sık Sorulan Sorular

Cevap:Tek renkli şemasade ve zarif tasarımlar için uygundur; benzer renklerdoğa temaları ve gradyan arka planlar için uygundur; tamamlayıcı renklergüçlü kontrast gerektiren vurgulu tasarımlar için uygundur; üçlü renklercanlı çocuk ürünleri ve sanatsal çalışmalar için uygundur; kare ve dörtlü renklerkarmaşık arayüzler ve veri görselleştirme için uygundur. Tasarım hedefinize göre uygun şemayı seçin.

Cevap: "Görselden renk çıkar" alanına bir görsel yükleyin; araç otomatik olarak analiz edip 8 ana renk tonunu çıkarır. Çıkarılan renge tıklayarak seçebilir, ardından "Seçili rengi temel renk olarak kullan" düğmesine tıklayarak bu renge dayalı eksiksiz bir renk paleti oluşturabilirsiniz.

Cevap: Gradyan renk kodu alanındaki "Kopyala" düğmesine tıklayın, kodu CSS dosyanıza yapıştırın ve gradyan arka plan gerektiren öğeye uygulayın. Doğrusal gradyan ve radyal gradyan olmak üzere iki tür desteklenir; doğrusal gradyanda açı yönü özelleştirilebilir.

Cevap: Toplu işleme tamamlandıktan sonra indirilen ZIP üç dosya içerir: palette-summary.json (tüm renk paleti verilerinin JSON özeti), palettes.css (doğrudan kullanılabilir CSS değişken tanımları), preview.html (görsel önizleme sayfası). Çıkarılan renk paletlerini farklı senaryolarda kullanmayı kolaylaştırır.

Cevap: Doygunluk rengin canlılık derecesini kontrol eder; doygunluğu artırmak rengi daha canlı yapar, azaltmak ise rengi daha yumuşak ve gri tonlu hale getirir. Parlaklık rengin açıklık-koyuluk derecesini kontrol eder; parlaklığı artırmak rengi daha açık yapar, azaltmak ise rengi daha koyu hale getirir. Bu iki parametreyi ayarlayarak genel renk paleti etkisini ince ayarlayabilirsiniz.

Cevap: JPG, JPEG, PNG, GIF, WebP gibi yaygın görsel formatlarını destekler. Daha doğru ana renk çıkarma sonuçları elde etmek için zengin renklere ve yüksek kontrasta sahip görseller kullanmanız önerilir. Görsel işleme tamamen yerel olarak yapılır ve sunucuya yüklenmez.

Cevap: Herhangi bir renk kartına veya renk bloğuna doğrudan tıkladığınızda, ilgili HEX renk değeri otomatik olarak panoya kopyalanır ve sayfanın alt kısmında "Panoya kopyalandı" bildirimi gösterilir. Toplu sonuçlarda da ilgili renk değerini kopyalamak için renk çubuğuna tıklamanız yeterlidir.