Seçtiğiniz rengin farklı tonlarını bulun!

UI Renk Oluşturucu

Seçtiğiniz rengin açıktan koyuya skalasını görün, renk tekerindeki kurallara göre renkleri ayırın ve farklı renklerle otomatik uyumunu ve tonlarını keşfedin!

*Daha iyi bir deneyim için bu sayfayı masaüstünde inceleyin!

Advanced Color Palette Generator

🎨 UI Renk Oluşturucu

Harmoni teorisi ve kontrast analizi ile güzel, erişilebilir renk tonlamaları oluşturun!

🎯 WCAG Kontrast Seviyeleri
?
- Renklerin erişilebilirlik uyumluluğunu gösterir (AAA - En Yüksek FAIL - Yetersiz)

Dışa Aktarma Seçenekleri

Palet oluşturuluyor...
`; }generateJSContent() { return `// Renk Paleti JavaScript Kodu const colorPalette = ${JSON.stringify(this.currentPalette, null, 2)};// Renk dönüştürme fonksiyonları function hexToRgb(hex) { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); return { r, g, b }; }function hexToHsl(hex) { const { r, g, b } = hexToRgb(hex); const rNorm = r / 255; const gNorm = g / 255; const bNorm = b / 255; const max = Math.max(rNorm, gNorm, bNorm); const min = Math.min(rNorm, gNorm, bNorm); let h, s, l = (max + min) / 2; if (max === min) { h = s = 0; } else { const d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case rNorm: h = (gNorm - bNorm) / d + (gNorm < bNorm ? 6 : 0); break; case gNorm: h = (bNorm - rNorm) / d + 2; break; case bNorm: h = (rNorm - gNorm) / d + 4; break; } h /= 6; } return { h: h * 360, s: s * 100, l: l * 100 }; }// Renk paletini kullanma örneği console.log('Renk Paleti:', colorPalette);`; } }// Global functions function copyToClipboard(text, element) { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(() => { const button = element && element.querySelector ? element.querySelector('.copy-btn') : element; if (button && button.classList && button.classList.contains('copy-btn')) { button.textContent = 'Kopyalandı!'; button.classList.add('copied'); setTimeout(() => { button.textContent = 'Kopyala'; button.classList.remove('copied'); }, 2000); } generator.showToast('Kopyalandı!'); }).catch(() => { fallbackCopyTextToClipboard(text); }); } else { fallbackCopyTextToClipboard(text); } }function fallbackCopyTextToClipboard(text) { const textArea = document.createElement("textarea"); textArea.value = text; textArea.style.top = "0"; textArea.style.left = "0"; textArea.style.position = "fixed"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { document.execCommand('copy'); generator.showToast('Kopyalandı!'); } catch (err) { generator.showToast('Kopyalama başarısız!'); } document.body.removeChild(textArea); }function openExportModal() { const modal = document.getElementById('exportModal'); const content = document.getElementById('exportModalContent'); // Generate export content const cssContent = generator.generateCSSContent(); const scssContent = generator.generateSCSSContent(); const jsonContent = generator.generateJSONContent(); const svgContent = generator.generateSVGContent(); content.innerHTML = `
🖼️ PNG Görsel
Renk paletinizi görsel olarak kaydedin
🎯 SVG Vektör
Ölçeklenebilir vektör formatında renk paleti
📄 CSS Variables
CSS özel özellikleri olarak kullanıma hazır
🎨 SCSS Variables
SASS/SCSS projeleri için değişkenler
📊 JSON Format
JavaScript ve API'ler için JSON formatı
🌐 HTML Kodu
Tam HTML sayfası olarak kullanıma hazır
💻 JavaScript Kodu
Sadece JavaScript fonksiyonları
`; modal.style.display = 'block'; }function closeExportModal() { document.getElementById('exportModal').style.display = 'none'; }function generatePalette() { generator.generatePalette(); }function randomizeColor() { const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0'); document.getElementById('baseColor').value = randomColor; document.getElementById('colorCode').value = randomColor; generator.baseColor = randomColor; generator.generatePalette(); }function exportCSS() { generator.exportCSS(); } function exportSCSS() { generator.exportSCSS(); } function exportJSON() { generator.exportJSON(); }// Initialize the generator const generator = new ColorPaletteGenerator();

Sitemizde, size daha iyi bir gezinme deneyimi sunmak için çerezler kullanıyoruz. Sitemizde gezinerek, çerez kullanımımızı kabul etmiş olursunuz.