ColorGenius – Tasar\u0131mlar\u0131n\u0131z \u0130\u00e7in M\u00fckemmel Renk Uyumu Bulucu | \u00dccretsiz Ara\u00e7<\/title>\n <meta name=\"description\" content=\"ColorGenius, m\u00fckemmel renk uyumlar\u0131 bulmak i\u00e7in nihai ara\u00e7t\u0131r. Tamamlay\u0131c\u0131, benzer, \u00fc\u00e7l\u00fc ve daha fazla renk paletleri olu\u015fturun. Tasar\u0131mc\u0131lar, sanat\u00e7\u0131lar ve i\u00e7erik \u00fcreticiler i\u00e7in ideal.\">\n <meta name=\"keywords\" content=\"renk uyumu, renk paleti, renk kombinasyonu, tasar\u0131m arac\u0131, tamamlay\u0131c\u0131 renkler, renk \u015femas\u0131, palet olu\u015fturucu, grafik tasar\u0131m, renk teorisi\">\n <meta name=\"author\" content=\"MandalaGenius\">\n \n \n <meta property=\"og:title\" content=\"ColorGenius - M\u00fckemmel Renk Uyumlar\u0131 Bulun\">\n <meta property=\"og:description\" content=\"Tasar\u0131mc\u0131lar ve sanat\u00e7\u0131lar i\u00e7in uyumlu renk paletleri olu\u015fturan \u00fccretsiz ara\u00e7.\">\n <meta property=\"og:type\" content=\"website\">\n <meta property=\"og:url\" content=\"https:\/\/www.mandalagenius.com\/tr\/colorgenius\">\n <meta property=\"og:image\" content=\"https:\/\/www.mandalagenius.com\/images\/colorgenius-preview.jpg\">\n <meta property=\"og:site_name\" content=\"MandalaGenius\">\n <meta property=\"og:locale\" content=\"tr_TR\">\n \n \n <meta name=\"twitter:card\" content=\"summary_large_image\">\n <meta name=\"twitter:title\" content=\"ColorGenius - Renk Uyumu Arac\u0131\">\n <meta name=\"twitter:description\" content=\"Tasar\u0131mlar\u0131n\u0131z i\u00e7in m\u00fckemmel renk paletlerini \u00fccretsiz olu\u015fturun\">\n <meta name=\"twitter:image\" content=\"https:\/\/www.mandalagenius.com\/images\/colorgenius-twitter-preview.jpg\">\n \n <style>\n :root {\n --primary-color: #6b5b95;\n --secondary-color: #feb236;\n --text-color: #333;\n --light-bg: #f8f9fa;\n --border-color: #ddd;\n --success-color: #4CAF50;\n --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n --border-radius: 8px;\n --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: var(--font-family);\n background-color: var(--light-bg);\n color: var(--text-color);\n line-height: 1.6;\n padding: 20px;\n max-width: 1200px;\n margin: 0 auto;\n }\n\n .container {\n display: grid;\n grid-template-columns: 1fr;\n gap: 20px;\n }\n\n @media (min-width: 768px) {\n .container {\n grid-template-columns: 300px 1fr;\n }\n }\n\n .header {\n text-align: center;\n margin-bottom: 20px;\n grid-column: 1 \/ -1;\n }\n\n .header h1 {\n color: var(--primary-color);\n margin-bottom: 10px;\n font-size: 2rem;\n }\n\n .header p {\n color: var(--text-color);\n font-size: 1rem;\n }\n\n .color-picker-container {\n background-color: white;\n padding: 20px;\n border-radius: var(--border-radius);\n box-shadow: var(--shadow);\n }\n\n .picker-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n }\n\n .picker-header h2 {\n color: var(--primary-color);\n font-size: 1.5rem;\n }\n\n .toggle-buttons {\n display: flex;\n gap: 10px;\n }\n\n .toggle-btn {\n padding: 8px 12px;\n font-size: 0.9rem;\n background-color: var(--primary-color);\n color: white;\n border: none;\n border-radius: var(--border-radius);\n cursor: pointer;\n transition: background-color 0.3s;\n display: flex;\n align-items: center;\n gap: 5px;\n }\n\n .toggle-btn:hover {\n background-color: #574a7a;\n }\n\n .toggle-btn.active {\n background-color: #4a3f6b;\n }\n\n @media (max-width: 767px) {\n .picker-header {\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n }\n\n .toggle-buttons {\n width: 100%;\n }\n\n .toggle-btn {\n width: 100%;\n justify-content: center;\n }\n }\n\n .color-wheel-container {\n margin-bottom: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .color-wheel {\n width: 200px;\n height: 200px;\n position: relative;\n margin-bottom: 15px;\n border-radius: 50%;\n box-shadow: var(--shadow);\n overflow: hidden;\n }\n\n .color-square {\n width: 200px;\n height: 200px;\n position: relative;\n margin-bottom: 15px;\n border-radius: var(--border-radius);\n box-shadow: var(--shadow);\n overflow: hidden;\n display: none;\n }\n\n .wheel-canvas, .square-canvas {\n width: 100%;\n height: 100%;\n }\n\n .wheel-canvas {\n border-radius: 50%;\n }\n\n .color-indicator {\n position: absolute;\n width: 10px;\n height: 10px;\n background-color: white;\n border: 2px solid black;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n pointer-events: none;\n z-index: 10;\n }\n\n .harmony-indicators {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n }\n\n .harmony-indicator {\n position: absolute;\n width: 8px;\n height: 8px;\n background-color: rgba(255, 255, 255, 0.8);\n border: 1px solid rgba(0, 0, 0, 0.5);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n }\n\n .rgb-inputs {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n margin-top: 10px;\n width: 100%;\n }\n\n .rgb-inputs input, .hex-input-container input {\n width: 100%;\n padding: 8px;\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n text-align: center;\n }\n \n .hex-input-container {\n width: 100%;\n margin-bottom: 10px;\n }\n\n .harmony-type {\n margin-top: 20px;\n width: 100%;\n }\n\n .harmony-type label {\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n }\n\n .harmony-type select {\n width: 100%;\n padding: 10px;\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n background-color: white;\n }\n\n .btn {\n display: inline-block;\n background-color: var(--primary-color);\n color: white;\n padding: 10px 15px;\n border: none;\n border-radius: var(--border-radius);\n cursor: pointer;\n font-size: 1rem;\n transition: background-color 0.3s;\n margin-top: 15px;\n width: 100%;\n }\n\n .btn:hover {\n background-color: #574a7a;\n }\n\n .harmony-display {\n background-color: white;\n padding: 20px;\n border-radius: var(--border-radius);\n box-shadow: var(--shadow);\n }\n\n .harmony-display h2 {\n color: var(--primary-color);\n margin-bottom: 15px;\n font-size: 1.5rem;\n }\n\n .color-palette {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n gap: 15px;\n margin-bottom: 20px;\n }\n\n .color-box {\n height: 100px;\n border-radius: var(--border-radius);\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n padding: 10px;\n color: white;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);\n position: relative;\n overflow: hidden;\n transition: transform 0.3s;\n }\n\n .color-box:hover {\n transform: translateY(-5px);\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\n }\n\n .color-box .color-value {\n font-size: 0.85rem;\n font-weight: bold;\n }\n\n .color-box .color-name {\n font-size: 0.75rem;\n opacity: 0.9;\n }\n\n .download-section {\n margin-top: 20px;\n text-align: center;\n }\n\n .download-btn {\n background-color: var(--success-color);\n margin-top: 0;\n }\n\n .download-btn:hover {\n background-color: #3e8e41;\n }\n\n .color-info {\n margin-top: 20px;\n padding: 15px;\n background-color: #f0f0f0;\n border-radius: var(--border-radius);\n }\n\n .color-info h3 {\n color: var(--primary-color);\n margin-bottom: 10px;\n font-size: 1.2rem;\n }\n\n .color-info p {\n margin-bottom: 10px;\n font-size: 0.9rem;\n }\n\n .mandala-footer {\n text-align: center;\n margin-top: 30px;\n padding-top: 20px;\n border-top: 1px solid var(--border-color);\n grid-column: 1 \/ -1;\n }\n\n .mandala-footer a {\n color: var(--primary-color);\n text-decoration: none;\n }\n\n .mandala-footer a:hover {\n text-decoration: underline;\n }\n\n @media (max-width: 767px) {\n body {\n padding: 10px;\n }\n\n .header h1 {\n font-size: 1.8rem;\n }\n\n .color-palette {\n grid-template-columns: repeat(2, 1fr);\n }\n \n .color-wheel {\n width: 180px;\n height: 180px;\n }\n }\n\n .copy-btn {\n position: absolute;\n top: 5px;\n right: 5px;\n background-color: rgba(255, 255, 255, 0.3);\n border: none;\n border-radius: 4px;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.3s;\n }\n\n .color-box:hover .copy-btn {\n opacity: 1;\n }\n\n .copy-btn svg {\n width: 14px;\n height: 14px;\n fill: white;\n }\n\n .toast {\n position: fixed;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n background-color: rgba(0, 0, 0, 0.8);\n color: white;\n padding: 10px 20px;\n border-radius: 20px;\n font-size: 0.9rem;\n opacity: 0;\n transition: opacity 0.3s;\n pointer-events: none;\n z-index: 1000;\n }\n\n .toast.show {\n opacity: 1;\n }\n\n .seo-content {\n display: none;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>ColorGenius<\/h1>\n <p>Tasar\u0131mlar\u0131n\u0131z i\u00e7in m\u00fckemmel renk uyumlar\u0131n\u0131 bulun<\/p>\n <\/div>\n\n <div class=\"color-picker-container\">\n <div class=\"picker-header\">\n <h4>Temel Renginizi Se\u00e7in<\/h4>\n <div class=\"toggle-buttons\">\n <button id=\"toggle-wheel\" class=\"toggle-btn active\">\n <span>\u25ef<\/span> Renk \u00c7ark\u0131\n <\/button>\n <button id=\"toggle-square\" class=\"toggle-btn\">\n <span>\u229e<\/span> Kare Se\u00e7ici\n <\/button>\n <\/div>\n <\/div>\n \n <div class=\"color-wheel-container\">\n <div class=\"color-wheel\">\n <canvas id=\"wheel-canvas\" class=\"wheel-canvas\"><\/canvas>\n <div id=\"color-indicator\" class=\"color-indicator\"><\/div>\n <div id=\"harmony-indicators\" class=\"harmony-indicators\"><\/div>\n <\/div>\n <div class=\"color-square\">\n <canvas id=\"square-canvas\" class=\"square-canvas\"><\/canvas>\n <div id=\"square-indicator\" class=\"color-indicator\"><\/div>\n <\/div>\n <div class=\"hex-input-container\">\n <input type=\"text\" id=\"hex-input\" placeholder=\"#6B5B95\" value=\"#6B5B95\" maxlength=\"7\">\n <\/div>\n <div class=\"rgb-inputs\">\n <input type=\"number\" id=\"red\" min=\"0\" max=\"255\" value=\"107\" placeholder=\"R\">\n <input type=\"number\" id=\"green\" min=\"0\" max=\"255\" value=\"91\" placeholder=\"G\">\n <input type=\"number\" id=\"blue\" min=\"0\" max=\"255\" value=\"149\" placeholder=\"B\">\n <\/div>\n <\/div>\n\n <div class=\"harmony-type\">\n <label for=\"harmony-select\">Uyum T\u00fcr\u00fc:<\/label>\n <select id=\"harmony-select\">\n <option value=\"complementary\">Tamamlay\u0131c\u0131<\/option>\n <option value=\"analogous\">Benzer<\/option>\n <option value=\"triadic\">\u00dc\u00e7l\u00fc<\/option>\n <option value=\"tetradic\">D\u00f6rtl\u00fc<\/option>\n <option value=\"monochromatic\">Tek Renk<\/option>\n <option value=\"split-complementary\">B\u00f6l\u00fcnm\u00fc\u015f Tamamlay\u0131c\u0131<\/option>\n <\/select>\n <\/div>\n\n <button id=\"generate-btn\" class=\"btn\">Uyum Olu\u015ftur<\/button>\n <\/div>\n\n <div class=\"harmony-display\">\n <h2>Renk Uyumu<\/h2>\n <div id=\"color-palette\" class=\"color-palette\">\n \n <\/div>\n\n <div class=\"color-info\">\n <h3>Uyum Bilgisi<\/h3>\n <p id=\"harmony-description\">Renk ili\u015fkisi hakk\u0131nda bilgi g\u00f6rmek i\u00e7in bir uyum t\u00fcr\u00fc se\u00e7in ve olu\u015fturun.<\/p>\n <\/div>\n\n <div class=\"download-section\">\n <button id=\"download-btn\" class=\"btn download-btn\">Paleti \u0130ndir<\/button>\n <\/div>\n <\/div>\n\n <div class=\"mandala-footer\">\n <p><a href=\"https:\/\/www.mandalagenius.com\" target=\"_blank\">MandalaGenius.com<\/a> i\u00e7in olu\u015fturuldu<\/p>\n <\/div>\n\n \n <div class=\"seo-content\">\n <h1>ColorGenius – Renk Uyumu Arac\u0131<\/h1>\n <h2>Renk Paleti Olu\u015fturucu<\/h2>\n <p>ColorGenius, tasar\u0131mc\u0131lar, sanat\u00e7\u0131lar ve i\u00e7erik \u00fcreticiler i\u00e7in m\u00fckemmel renk kombinasyonlar\u0131 bulmak amac\u0131yla olu\u015fturulmu\u015f \u00fccretsiz bir online ara\u00e7t\u0131r. \u0130nteraktif renk \u00e7ark\u0131m\u0131z ile tamamlay\u0131c\u0131, benzer, \u00fc\u00e7l\u00fc, d\u00f6rtl\u00fc, tek renk ve b\u00f6l\u00fcnm\u00fc\u015f tamamlay\u0131c\u0131 renk uyumlar\u0131 olu\u015fturabilirsiniz.<\/p>\n <h3>Ana \u00d6zellikler<\/h3>\n <ul>\n <li>Hassas se\u00e7im i\u00e7in interaktif renk \u00e7ark\u0131<\/li>\n <li>6 farkl\u0131 renk uyumu t\u00fcr\u00fc<\/li>\n <li>Her renk i\u00e7in HEX ve RGB de\u011ferleri<\/li>\n <li>PNG format\u0131nda palet indirme<\/li>\n <li>Panoya kopyalama \u00f6zelli\u011fi<\/li>\n <li>Tamamen T\u00fcrk\u00e7e aray\u00fcz<\/li>\n <li>Mobil cihazlar i\u00e7in duyarl\u0131 tasar\u0131m<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div id=\"toast\" class=\"toast\"><\/div>\n\n <script type=\"application\/ld+json\">\n {\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"WebApplication\",\n \"name\": \"ColorGenius - Renk Uyumu Bulucu\",\n \"description\": \"Tasar\u0131mlar i\u00e7in uyumlu renk paletleri olu\u015fturan \u00fccretsiz ara\u00e7. Tamamlay\u0131c\u0131, benzer, \u00fc\u00e7l\u00fc ve daha fazla renk kombinasyonlar\u0131\",\n \"url\": \"https:\/\/www.mandalagenius.com\/tr\/colorgenius\",\n \"inLanguage\": \"tr\",\n \"applicationCategory\": \"DesignApplication\",\n \"operatingSystem\": \"Any\",\n \"permissions\": \"browser\",\n \"offers\": {\n \"@type\": \"Offer\",\n \"price\": \"0\",\n \"priceCurrency\": \"TRY\"\n },\n \"author\": {\n \"@type\": \"Organization\",\n \"name\": \"MandalaGenius\",\n \"url\": \"https:\/\/www.mandalagenius.com\"\n },\n \"featureList\": [\n \"\u0130nteraktif renk \u00e7ark\u0131\",\n \"6 farkl\u0131 renk uyumu t\u00fcr\u00fc\",\n \"Kare renk se\u00e7ici\",\n \"HEX ve RGB de\u011ferleri\",\n \"Palet indirme\",\n \"Panoya kopyalama\"\n ]\n }\n <\/script>\n\n <script>\n \/\/ DOM Elements\n const wheelCanvas = document.getElementById('wheel-canvas');\n const squareCanvas = document.getElementById('square-canvas');\n const colorIndicator = document.getElementById('color-indicator');\n const squareIndicator = document.getElementById('square-indicator');\n const harmonyIndicators = document.getElementById('harmony-indicators');\n const redInput = document.getElementById('red');\n const greenInput = document.getElementById('green');\n const blueInput = document.getElementById('blue');\n const hexInput = document.getElementById('hex-input');\n const toggleWheelBtn = document.getElementById('toggle-wheel');\n const toggleSquareBtn = document.getElementById('toggle-square');\n const colorWheel = document.querySelector('.color-wheel');\n const colorSquare = document.querySelector('.color-square');\n const harmonySelect = document.getElementById('harmony-select');\n const generateBtn = document.getElementById('generate-btn');\n const colorPalette = document.getElementById('color-palette');\n const harmonyDescription = document.getElementById('harmony-description');\n const downloadBtn = document.getElementById('download-btn');\n const toast = document.getElementById('toast');\n\n \/\/ Color wheel setup\n const wheelCtx = wheelCanvas.getContext('2d');\n let wheelSize = 200;\n let wheelRadius = wheelSize \/ 2;\n let isDragging = false;\n let currentColor = { r: 107, g: 91, b: 149 }; \/\/ Initial color\n let currentHarmony = 'complementary';\n let harmonyColors = [];\n\n \/\/ Initialize the color wheel and square\n function initColorWheel() {\n \/\/ Set canvas size\n wheelCanvas.width = wheelSize;\n wheelCanvas.height = wheelSize;\n squareCanvas.width = wheelSize;\n squareCanvas.height = wheelSize;\n \n \/\/ Set initial display states\n colorWheel.style.display = 'block';\n colorSquare.style.display = 'none';\n \n \/\/ Draw the color wheel and square\n drawColorWheel();\n drawColorSquare();\n \n \/\/ Set initial color indicator position\n updateColorIndicator();\n updateSquareIndicator();\n \n \/\/ Add event listeners for wheel interaction\n wheelCanvas.addEventListener('mousedown', startDragWheel);\n wheelCanvas.addEventListener('mousemove', dragWheel);\n wheelCanvas.addEventListener('mouseup', endDrag);\n wheelCanvas.addEventListener('mouseleave', endDrag);\n \n \/\/ Add event listeners for square interaction\n squareCanvas.addEventListener('mousedown', startDragSquare);\n squareCanvas.addEventListener('mousemove', dragSquare);\n squareCanvas.addEventListener('mouseup', endDrag);\n squareCanvas.addEventListener('mouseleave', endDrag);\n \n \/\/ Touch events for mobile\n wheelCanvas.addEventListener('touchstart', handleTouchWheel);\n wheelCanvas.addEventListener('touchmove', handleTouchWheel);\n wheelCanvas.addEventListener('touchend', endDrag);\n \n squareCanvas.addEventListener('touchstart', handleTouchSquare);\n squareCanvas.addEventListener('touchmove', handleTouchSquare);\n squareCanvas.addEventListener('touchend', endDrag);\n \n \/\/ Toggle button events\n toggleWheelBtn.addEventListener('click', showWheelPicker);\n toggleSquareBtn.addEventListener('click', showSquarePicker);\n \n \/\/ Hex input event\n hexInput.addEventListener('input', updateFromHexInput);\n \n \/\/ Generate initial harmony\n generateHarmony();\n }\n\n \/\/ Show color wheel picker\n function showWheelPicker() {\n colorWheel.style.display = 'block';\n colorSquare.style.display = 'none';\n toggleWheelBtn.classList.add('active');\n toggleSquareBtn.classList.remove('active');\n }\n\n \/\/ Show color square picker\n function showSquarePicker() {\n colorWheel.style.display = 'none';\n colorSquare.style.display = 'block';\n toggleWheelBtn.classList.remove('active');\n toggleSquareBtn.classList.add('active');\n drawColorSquare();\n updateSquareIndicator();\n }\n\n \/\/ Draw the color wheel\n function drawColorWheel() {\n for (let y = 0; y < wheelSize; y++) {\n for (let x = 0; x < wheelSize; x++) {\n \/\/ Calculate position relative to center\n const dx = x - wheelRadius;\n const dy = y - wheelRadius;\n const distance = Math.sqrt(dx * dx + dy * dy);\n \n \/\/ Only draw within the circle\n if (distance <= wheelRadius) {\n \/\/ Convert position to hue and saturation\n const hue = (Math.atan2(dy, dx) * 180 \/ Math.PI + 180) \/ 360;\n const saturation = distance \/ wheelRadius;\n \n \/\/ Convert HSV to RGB\n const rgb = hsvToRgb(hue, saturation, 1);\n \n \/\/ Draw the pixel\n wheelCtx.fillStyle = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;\n wheelCtx.fillRect(x, y, 1, 1);\n }\n }\n }\n }\n \n \/\/ Draw the color square (saturation\/value with fixed hue)\n function drawColorSquare() {\n const squareCtx = squareCanvas.getContext('2d');\n const hsv = rgbToHsv(currentColor.r, currentColor.g, currentColor.b);\n \n for (let y = 0; y < wheelSize; y++) {\n for (let x = 0; x < wheelSize; x++) {\n \/\/ Calculate saturation and value based on position\n const saturation = x \/ wheelSize;\n const value = 1 - (y \/ wheelSize);\n \n \/\/ Convert HSV to RGB with current hue\n const rgb = hsvToRgb(hsv.h, saturation, value);\n \n \/\/ Draw the pixel\n squareCtx.fillStyle = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;\n squareCtx.fillRect(x, y, 1, 1);\n }\n }\n }\n\n \/\/ Update color indicator position based on current color\n function updateColorIndicator() {\n \/\/ Convert RGB to HSV\n const hsv = rgbToHsv(currentColor.r, currentColor.g, currentColor.b);\n \n \/\/ Calculate position on wheel\n const angle = hsv.h * 2 * Math.PI;\n const distance = hsv.s * wheelRadius;\n const x = wheelRadius + distance * Math.cos(angle - Math.PI \/ 2);\n const y = wheelRadius + distance * Math.sin(angle - Math.PI \/ 2);\n \n \/\/ Update indicator position\n colorIndicator.style.left = `${x}px`;\n colorIndicator.style.top = `${y}px`;\n \n \/\/ Update harmony indicators\n updateHarmonyIndicators();\n \n \/\/ Update hex input\n hexInput.value = rgbToHex(currentColor.r, currentColor.g, currentColor.b);\n }\n \n \/\/ Update square indicator position\n function updateSquareIndicator() {\n const hsv = rgbToHsv(currentColor.r, currentColor.g, currentColor.b);\n const x = hsv.s * wheelSize;\n const y = (1 - hsv.v) * wheelSize;\n \n squareIndicator.style.left = `${x}px`;\n squareIndicator.style.top = `${y}px`;\n }\n\n \/\/ Update harmony indicators based on current color and harmony type\n function updateHarmonyIndicators() {\n \/\/ Clear previous indicators\n harmonyIndicators.innerHTML = '';\n \n \/\/ Get harmony colors\n const colors = getHarmonyColors(currentColor, currentHarmony);\n \n \/\/ Create indicator for each harmony color\n colors.forEach((color, index) => {\n if (index === 0) return; \/\/ Skip the base color\n \n const hsv = rgbToHsv(color.r, color.g, color.b);\n const angle = hsv.h * 2 * Math.PI;\n const distance = hsv.s * wheelRadius;\n const x = wheelRadius + distance * Math.cos(angle - Math.PI \/ 2);\n const y = wheelRadius + distance * Math.sin(angle - Math.PI \/ 2);\n \n const indicator = document.createElement('div');\n indicator.className = 'harmony-indicator';\n indicator.style.left = `${x}px`;\n indicator.style.top = `${y}px`;\n indicator.style.backgroundColor = `rgb(${color.r}, ${color.g}, ${color.b})`;\n \n harmonyIndicators.appendChild(indicator);\n });\n }\n \n \/\/ Update from hex input\n function updateFromHexInput() {\n let hex = hexInput.value;\n \n \/\/ Ensure hex starts with #\n if (!hex.startsWith('#')) {\n hex = '#' + hex;\n hexInput.value = hex;\n }\n \n \/\/ Validate hex format\n if (\/^#[0-9A-F]{6}$\/i.test(hex)) {\n const rgb = hexToRgb(hex);\n currentColor = rgb;\n \n \/\/ Update RGB inputs\n redInput.value = rgb.r;\n greenInput.value = rgb.g;\n blueInput.value = rgb.b;\n \n \/\/ Update indicators\n updateColorIndicator();\n updateSquareIndicator();\n \n \/\/ Redraw color square if visible\n if (colorSquare.style.display === 'block') {\n drawColorSquare();\n }\n }\n }\n\n \/\/ Start dragging the color wheel indicator\n function startDragWheel(e) {\n isDragging = true;\n dragWheel(e);\n }\n\n \/\/ Handle wheel drag event\n function dragWheel(e) {\n if (!isDragging) return;\n \n e.preventDefault();\n \n \/\/ Get mouse position relative to canvas\n const rect = wheelCanvas.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n \n \/\/ Calculate distance from center\n const dx = x - wheelRadius;\n const dy = y - wheelRadius;\n const distance = Math.sqrt(dx * dx + dy * dy);\n \n \/\/ Only update if within the wheel\n if (distance <= wheelRadius) {\n \/\/ Calculate hue and saturation\n const hue = (Math.atan2(dy, dx) + Math.PI) \/ (2 * Math.PI);\n const saturation = Math.min(distance \/ wheelRadius, 1);\n \n \/\/ Get current value from existing color\n const hsv = rgbToHsv(currentColor.r, currentColor.g, currentColor.b);\n \n \/\/ Convert HSV to RGB\n const rgb = hsvToRgb(hue, saturation, hsv.v);\n \n \/\/ Update current color\n currentColor = rgb;\n \n \/\/ Update RGB inputs\n redInput.value = rgb.r;\n greenInput.value = rgb.g;\n blueInput.value = rgb.b;\n \n \/\/ Update hex input\n hexInput.value = rgbToHex(rgb.r, rgb.g, rgb.b);\n \n \/\/ Update indicator position\n colorIndicator.style.left = `${x}px`;\n colorIndicator.style.top = `${y}px`;\n \n \/\/ Update harmony indicators\n updateHarmonyIndicators();\n \n \/\/ Redraw color square\n drawColorSquare();\n updateSquareIndicator();\n }\n }\n \n \/\/ Start dragging the color square indicator\n function startDragSquare(e) {\n isDragging = true;\n dragSquare(e);\n }\n \n \/\/ Handle square drag event\n function dragSquare(e) {\n if (!isDragging) return;\n \n e.preventDefault();\n \n \/\/ Get mouse position relative to canvas\n const rect = squareCanvas.getBoundingClientRect();\n const x = Math.max(0, Math.min(e.clientX - rect.left, wheelSize));\n const y = Math.max(0, Math.min(e.clientY - rect.top, wheelSize));\n \n \/\/ Calculate saturation and value\n const saturation = x \/ wheelSize;\n const value = 1 - (y \/ wheelSize);\n \n \/\/ Get current hue from existing color\n const hsv = rgbToHsv(currentColor.r, currentColor.g, currentColor.b);\n \n \/\/ Convert HSV to RGB\n const rgb = hsvToRgb(hsv.h, saturation, value);\n \n \/\/ Update current color\n currentColor = rgb;\n \n \/\/ Update RGB inputs\n redInput.value = rgb.r;\n greenInput.value = rgb.g;\n blueInput.value = rgb.b;\n \n \/\/ Update hex input\n hexInput.value = rgbToHex(rgb.r, rgb.g, rgb.b);\n \n \/\/ Update indicator position\n squareIndicator.style.left = `${x}px`;\n squareIndicator.style.top = `${y}px`;\n \n \/\/ Update wheel indicator\n updateColorIndicator();\n }\n\n \/\/ End dragging\n function endDrag() {\n isDragging = false;\n }\n\n \/\/ Handle wheel touch events\n function handleTouchWheel(e) {\n e.preventDefault();\n \n const touch = e.touches[0];\n const mouseEvent = new MouseEvent('mousemove', {\n clientX: touch.clientX,\n clientY: touch.clientY\n });\n \n if (e.type === 'touchstart') {\n startDragWheel(mouseEvent);\n } else if (e.type === 'touchmove') {\n dragWheel(mouseEvent);\n }\n }\n \n \/\/ Handle square touch events\n function handleTouchSquare(e) {\n e.preventDefault();\n \n const touch = e.touches[0];\n const mouseEvent = new MouseEvent('mousemove', {\n clientX: touch.clientX,\n clientY: touch.clientY\n });\n \n if (e.type === 'touchstart') {\n startDragSquare(mouseEvent);\n } else if (e.type === 'touchmove') {\n dragSquare(mouseEvent);\n }\n }\n\n \/\/ RGB input event listeners\n redInput.addEventListener('input', updateFromRgbInputs);\n greenInput.addEventListener('input', updateFromRgbInputs);\n blueInput.addEventListener('input', updateFromRgbInputs);\n\n \/\/ Update color from RGB inputs\n function updateFromRgbInputs() {\n \/\/ Get RGB values\n const r = clamp(parseInt(redInput.value) || 0, 0, 255);\n const g = clamp(parseInt(greenInput.value) || 0, 0, 255);\n const b = clamp(parseInt(blueInput.value) || 0, 0, 255);\n \n \/\/ Update current color\n currentColor = { r, g, b };\n \n \/\/ Update hex input\n hexInput.value = rgbToHex(r, g, b);\n \n \/\/ Update color indicators\n updateColorIndicator();\n updateSquareIndicator();\n \n \/\/ Redraw color square if visible\n if (colorSquare.style.display === 'block') {\n drawColorSquare();\n }\n }\n\n \/\/ Harmony select event listener\n harmonySelect.addEventListener('change', function() {\n currentHarmony = this.value;\n updateHarmonyIndicators();\n });\n\n \/\/ Generate button event listener\n generateBtn.addEventListener('click', generateHarmony);\n\n \/\/ Generate harmony\n function generateHarmony() {\n \/\/ Get harmony colors\n harmonyColors = getHarmonyColors(currentColor, currentHarmony);\n \n \/\/ Update color palette\n updateColorPalette();\n \n \/\/ Update harmony description\n updateHarmonyDescription();\n }\n\n \/\/ Update color palette\n function updateColorPalette() {\n \/\/ Clear previous palette\n colorPalette.innerHTML = '';\n \n \/\/ Add color boxes\n harmonyColors.forEach(color => {\n const hex = rgbToHex(color.r, color.g, color.b);\n const colorName = getColorName(color);\n const isDark = isColorDark(color);\n \n const colorBox = document.createElement('div');\n colorBox.className = 'color-box';\n colorBox.style.backgroundColor = hex;\n colorBox.style.color = isDark ? 'white' : 'black';\n \n colorBox.innerHTML = `\n <button class=\"copy-btn\" data-color=\"${hex}\" aria-label=\"Rengi kopyala\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\"\/>\n <\/svg>\n <\/button>\n <div class=\"color-value\">${hex}<\/div>\n <div class=\"color-name\">${colorName}<\/div>\n `;\n \n colorPalette.appendChild(colorBox);\n });\n \n \/\/ Add copy button event listeners\n document.querySelectorAll('.copy-btn').forEach(btn => {\n btn.addEventListener('click', function() {\n const color = this.getAttribute('data-color');\n navigator.clipboard.writeText(color).then(() => {\n showToast(`${color} panoya kopyaland\u0131`);\n });\n });\n });\n }\n\n \/\/ Update harmony description\n function updateHarmonyDescription() {\n const descriptions = {\n 'complementary': 'Tamamlay\u0131c\u0131 renkler renk \u00e7ark\u0131nda birbirine z\u0131t konumdad\u0131r. Y\u00fcksek kontrast ve canl\u0131 g\u00f6r\u00fcn\u00fcmler olu\u015ftururlar.',\n 'analogous': 'Benzer renkler renk \u00e7ark\u0131nda yan yana bulunur. Uyumlu, rahat tasar\u0131mlar olu\u015ftururlar.',\n 'triadic': '\u00dc\u00e7l\u00fc renkler renk \u00e7ark\u0131nda e\u015fit aral\u0131klarla yerle\u015ftirilmi\u015ftir. Uyumu korurken canl\u0131 kontrast sunarlar.',\n 'tetradic': 'D\u00f6rtl\u00fc (veya dikd\u00f6rtgen) uyum, iki tamamlay\u0131c\u0131 \u00e7ift halinde d\u00fczenlenmi\u015f d\u00f6rt renk kullan\u0131r. Zengin renk olanaklar\u0131 sunar.',\n 'monochromatic': 'Tek renkli renkler, tek bir rengin a\u00e7\u0131kl\u0131k ve doygunluk varyasyonlar\u0131d\u0131r. Tutarl\u0131, sofistike bir g\u00f6r\u00fcn\u00fcm olu\u015ftururlar.',\n 'split-complementary': 'B\u00f6l\u00fcnm\u00fc\u015f tamamlay\u0131c\u0131, bir temel renk ve tamamlay\u0131c\u0131s\u0131na biti\u015fik iki rengi kullan\u0131r. Tamamlay\u0131c\u0131 uyumdan daha az gerilimle kontrast sa\u011flar.'\n };\n \n harmonyDescription.textContent = descriptions[currentHarmony];\n }\n\n \/\/ Download button event listener\n downloadBtn.addEventListener('click', downloadPalette);\n\n \/\/ Download palette as PNG\n function downloadPalette() {\n \/\/ Create a canvas for the palette\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n const colorCount = harmonyColors.length;\n \n \/\/ Set canvas size\n const width = colorCount * 100;\n const height = 200;\n canvas.width = width;\n canvas.height = height;\n \n \/\/ Draw background\n ctx.fillStyle = '#f8f9fa';\n ctx.fillRect(0, 0, width, height);\n \n \/\/ Draw color boxes\n harmonyColors.forEach((color, index) => {\n const x = index * 100;\n \n \/\/ Draw color box\n ctx.fillStyle = `rgb(${color.r}, ${color.g}, ${color.b})`;\n ctx.fillRect(x, 0, 100, 150);\n \n \/\/ Draw color info\n const hex = rgbToHex(color.r, color.g, color.b);\n const isDark = isColorDark(color);\n \n ctx.fillStyle = isDark ? 'white' : 'black';\n ctx.font = 'bold 14px Arial';\n ctx.textAlign = 'center';\n ctx.fillText(hex, x + 50, 170);\n \n ctx.font = '12px Arial';\n ctx.fillText(`R:${color.r} G:${color.g} B:${color.b}`, x + 50, 190);\n });\n \n \/\/ Draw title\n ctx.fillStyle = '#333';\n ctx.font = 'bold 16px Arial';\n ctx.textAlign = 'left';\n ctx.fillText(`ColorGenius - ${getHarmonyTurkishName(currentHarmony)} Uyumu`, 10, 20);\n \n \/\/ Convert canvas to data URL\n const dataUrl = canvas.toDataURL('image\/png');\n \n \/\/ Create download link\n const link = document.createElement('a');\n link.download = `colorgenius-${currentHarmony}-paleti.png`;\n link.href = dataUrl;\n link.click();\n \n showToast('Palet ba\u015far\u0131yla indirildi');\n }\n\n \/\/ Get Turkish harmony name for download\n function getHarmonyTurkishName(harmonyType) {\n const names = {\n 'complementary': 'Tamamlay\u0131c\u0131',\n 'analogous': 'Benzer',\n 'triadic': '\u00dc\u00e7l\u00fc',\n 'tetradic': 'D\u00f6rtl\u00fc',\n 'monochromatic': 'Tek Renk',\n 'split-complementary': 'B\u00f6l\u00fcnm\u00fc\u015f Tamamlay\u0131c\u0131'\n };\n return names[harmonyType] || harmonyType;\n }\n\n \/\/ Get harmony colors based on harmony type\n function getHarmonyColors(baseColor, harmonyType) {\n const hsl = rgbToHsl(baseColor.r, baseColor.g, baseColor.b);\n let colors = [baseColor];\n \n switch (harmonyType) {\n case 'complementary':\n \/\/ Add complementary color (opposite on the wheel)\n colors.push(hslToRgb((hsl.h + 0.5) % 1, hsl.s, hsl.l));\n break;\n \n case 'analogous':\n \/\/ Add colors 30\u00b0 on each side\n colors.push(hslToRgb((hsl.h + 1\/12) % 1, hsl.s, hsl.l));\n colors.push(hslToRgb((hsl.h - 1\/12) % 1, hsl.s, hsl.l));\n break;\n \n case 'triadic':\n \/\/ Add colors at 120\u00b0 intervals\n colors.push(hslToRgb((hsl.h + 1\/3) % 1, hsl.s, hsl.l));\n colors.push(hslToRgb((hsl.h + 2\/3) % 1, hsl.s, hsl.l));\n break;\n \n case 'tetradic':\n \/\/ Add colors at 90\u00b0 intervals\n colors.push(hslToRgb((hsl.h + 0.25) % 1, hsl.s, hsl.l));\n colors.push(hslToRgb((hsl.h + 0.5) % 1, hsl.s, hsl.l));\n colors.push(hslToRgb((hsl.h + 0.75) % 1, hsl.s, hsl.l));\n break;\n \n case 'monochromatic':\n \/\/ Add variations with different lightness\n colors.push(hslToRgb(hsl.h, hsl.s, clamp(hsl.l - 0.2, 0, 1)));\n colors.push(hslToRgb(hsl.h, hsl.s, clamp(hsl.l - 0.1, 0, 1)));\n colors.push(hslToRgb(hsl.h, hsl.s, clamp(hsl.l + 0.1, 0, 1)));\n colors.push(hslToRgb(hsl.h, hsl.s, clamp(hsl.l + 0.2, 0, 1)));\n break;\n \n case 'split-complementary':\n \/\/ Add colors 30\u00b0 on each side of the complement\n colors.push(hslToRgb((hsl.h + 0.5 - 1\/12) % 1, hsl.s, hsl.l));\n colors.push(hslToRgb((hsl.h + 0.5 + 1\/12) % 1, hsl.s, hsl.l));\n break;\n }\n \n return colors;\n }\n\n \/\/ Get a simple color name based on RGB values\n function getColorName(color) {\n const r = color.r;\n const g = color.g;\n const b = color.b;\n \n \/\/ Calculate hue, saturation, lightness\n const hsl = rgbToHsl(r, g, b);\n const h = hsl.h * 360; \/\/ Convert to degrees\n const s = hsl.s * 100; \/\/ Convert to percentage\n const l = hsl.l * 100; \/\/ Convert to percentage\n \n \/\/ Determine if it's a grayscale color\n if (s < 10) {\n if (l < 20) return 'Siyah';\n if (l < 50) return 'Gri';\n if (l < 90) return 'A\u00e7\u0131k Gri';\n return 'Beyaz';\n }\n \n \/\/ Determine color name based on hue\n if (h < 30) return 'K\u0131rm\u0131z\u0131';\n if (h < 60) return 'Turuncu';\n if (h < 90) return 'Sar\u0131';\n if (h < 150) return 'Ye\u015fil';\n if (h < 210) return 'Camg\u00f6be\u011fi';\n if (h < 270) return 'Mavi';\n if (h < 330) return 'Mor';\n return 'K\u0131rm\u0131z\u0131';\n }\n\n \/\/ Show toast notification\n function showToast(message) {\n toast.textContent = message;\n toast.classList.add('show');\n \n setTimeout(() => {\n toast.classList.remove('show');\n }, 3000);\n }\n\n \/\/ Utility functions\n \n \/\/ Convert RGB to Hex\n function rgbToHex(r, g, b) {\n return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();\n }\n \n \/\/ Convert Hex to RGB\n function hexToRgb(hex) {\n const result = \/^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$\/i.exec(hex);\n return result ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16)\n } : null;\n }\n \n \/\/ Convert RGB to HSL\n function rgbToHsl(r, g, b) {\n r \/= 255;\n g \/= 255;\n b \/= 255;\n \n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n let h, s, l = (max + min) \/ 2;\n \n if (max === min) {\n h = s = 0; \/\/ achromatic\n } else {\n const d = max - min;\n s = l > 0.5 ? d \/ (2 - max - min) : d \/ (max + min);\n \n switch (max) {\n case r: h = (g - b) \/ d + (g < b ? 6 : 0); break;\n case g: h = (b - r) \/ d + 2; break;\n case b: h = (r - g) \/ d + 4; break;\n }\n \n h \/= 6;\n }\n \n return { h, s, l };\n }\n \n \/\/ Convert HSL to RGB\n function hslToRgb(h, s, l) {\n let r, g, b;\n\n if (s === 0) {\n r = g = b = l; \/\/ achromatic\n } else {\n const hue2rgb = (p, q, t) => {\n if (t < 0) t += 1;\n if (t > 1) t -= 1;\n if (t < 1\/6) return p + (q - p) * 6 * t;\n if (t < 1\/2) return q;\n if (t < 2\/3) return p + (q - p) * (2\/3 - t) * 6;\n return p;\n };\n\n const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n const p = 2 * l - q;\n r = hue2rgb(p, q, h + 1\/3);\n g = hue2rgb(p, q, h);\n b = hue2rgb(p, q, h - 1\/3);\n }\n\n return {\n r: Math.round(r * 255),\n g: Math.round(g * 255),\n b: Math.round(b * 255)\n };\n }\n \n \/\/ Convert RGB to HSV\n function rgbToHsv(r, g, b) {\n r \/= 255;\n g \/= 255;\n b \/= 255;\n \n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n let h, s, v = max;\n \n const d = max - min;\n s = max === 0 ? 0 : d \/ max;\n \n if (max === min) {\n h = 0; \/\/ achromatic\n } else {\n switch (max) {\n case r: h = (g - b) \/ d + (g < b ? 6 : 0); break;\n case g: h = (b - r) \/ d + 2; break;\n case b: h = (r - g) \/ d + 4; break;\n }\n h \/= 6;\n }\n \n return { h, s, v };\n }\n \n \/\/ Convert HSV to RGB\n function hsvToRgb(h, s, v) {\n let r, g, b;\n \n const i = Math.floor(h * 6);\n const f = h * 6 - i;\n const p = v * (1 - s);\n const q = v * (1 - f * s);\n const t = v * (1 - (1 - f) * s);\n \n switch (i % 6) {\n case 0: r = v; g = t; b = p; break;\n case 1: r = q; g = v; b = p; break;\n case 2: r = p; g = v; b = t; break;\n case 3: r = p; g = q; b = v; break;\n case 4: r = t; g = p; b = v; break;\n case 5: r = v; g = p; b = q; break;\n }\n \n return {\n r: Math.round(r * 255),\n g: Math.round(g * 255),\n b: Math.round(b * 255)\n };\n }\n \n \/\/ Check if a color is dark\n function isColorDark(color) {\n \/\/ Calculate relative luminance\n const r = color.r \/ 255;\n const g = color.g \/ 255;\n const b = color.b \/ 255;\n \n const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n \n return luminance < 0.5;\n }\n \n \/\/ Clamp a value between min and max\n function clamp(value, min, max) {\n return Math.min(Math.max(value, min), max);\n }\n\n \/\/ Initialize the color wheel when the page loads\n window.addEventListener('load', initColorWheel);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>ColorGenius – Tasar\u0131mlar\u0131n\u0131z \u0130\u00e7in M\u00fckemmel Renk Uyumu Bulucu | \u00dccretsiz Ara\u00e7 ColorGenius Tasar\u0131mlar\u0131n\u0131z i\u00e7in m\u00fckemmel renk uyumlar\u0131n\u0131 bulun Temel Renginizi […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-81","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>\u00dccretsiz Renk Uyum Arac\u0131 ve Renk Paleti Olu\u015fturucu - Mandala Genius<\/title>\n<meta name=\"description\" content=\"Tasar\u0131mlar\u0131n\u0131z i\u00e7in m\u00fckemmel renk paletlerini \u00fccretsiz olu\u015fturun. Renk Uyumu Arac\u0131yla m\u00fckemmel renkleri bulun, tasar\u0131mlar\u0131n\u0131z\u0131 renklendirin!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00dccretsiz Renk Uyum Arac\u0131 ve Renk Paleti Olu\u015fturucu - Mandala Genius\" \/>\n<meta property=\"og:description\" content=\"Tasar\u0131mlar\u0131n\u0131z i\u00e7in m\u00fckemmel renk paletlerini \u00fccretsiz olu\u015fturun. Renk Uyumu Arac\u0131yla m\u00fckemmel renkleri bulun, tasar\u0131mlar\u0131n\u0131z\u0131 renklendirin!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/\" \/>\n<meta property=\"og:site_name\" content=\"Mandala Genius\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/\",\"url\":\"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/\",\"name\":\"\u00dccretsiz Renk Uyum Arac\u0131 ve Renk Paleti Olu\u015fturucu - Mandala Genius\",\"isPartOf\":{\"@id\":\"https:\/\/mandalagenius.com\/tr\/#website\"},\"datePublished\":\"2025-10-15T17:39:24+00:00\",\"description\":\"Tasar\u0131mlar\u0131n\u0131z i\u00e7in m\u00fckemmel renk paletlerini \u00fccretsiz olu\u015fturun. Renk Uyumu Arac\u0131yla m\u00fckemmel renkleri bulun, tasar\u0131mlar\u0131n\u0131z\u0131 renklendirin!\",\"breadcrumb\":{\"@id\":\"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mandalagenius.com\/tr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Renk Uyumu Arac\u0131\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mandalagenius.com\/tr\/#website\",\"url\":\"https:\/\/mandalagenius.com\/tr\/\",\"name\":\"Mandala Genius\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/mandalagenius.com\/tr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mandalagenius.com\/tr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/mandalagenius.com\/tr\/#organization\",\"name\":\"Mandala Genius\",\"url\":\"https:\/\/mandalagenius.com\/tr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/mandalagenius.com\/tr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/mandalagenius.com\/tr\/wp-content\/uploads\/sites\/7\/2025\/04\/cropped-Untitled-design-26.png\",\"contentUrl\":\"https:\/\/mandalagenius.com\/tr\/wp-content\/uploads\/sites\/7\/2025\/04\/cropped-Untitled-design-26.png\",\"width\":801,\"height\":755,\"caption\":\"Mandala Genius\"},\"image\":{\"@id\":\"https:\/\/mandalagenius.com\/tr\/#\/schema\/logo\/image\/\"}}]}<\/script>\n","yoast_head_json":{"title":"\u00dccretsiz Renk Uyum Arac\u0131 ve Renk Paleti Olu\u015fturucu - Mandala Genius","description":"Tasar\u0131mlar\u0131n\u0131z i\u00e7in m\u00fckemmel renk paletlerini \u00fccretsiz olu\u015fturun. Renk Uyumu Arac\u0131yla m\u00fckemmel renkleri bulun, tasar\u0131mlar\u0131n\u0131z\u0131 renklendirin!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/","og_locale":"tr_TR","og_type":"article","og_title":"\u00dccretsiz Renk Uyum Arac\u0131 ve Renk Paleti Olu\u015fturucu - Mandala Genius","og_description":"Tasar\u0131mlar\u0131n\u0131z i\u00e7in m\u00fckemmel renk paletlerini \u00fccretsiz olu\u015fturun. Renk Uyumu Arac\u0131yla m\u00fckemmel renkleri bulun, tasar\u0131mlar\u0131n\u0131z\u0131 renklendirin!","og_url":"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/","og_site_name":"Mandala Genius","twitter_card":"summary_large_image","twitter_misc":{"Tahmini okuma s\u00fcresi":"1 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/","url":"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/","name":"\u00dccretsiz Renk Uyum Arac\u0131 ve Renk Paleti Olu\u015fturucu - Mandala Genius","isPartOf":{"@id":"https:\/\/mandalagenius.com\/tr\/#website"},"datePublished":"2025-10-15T17:39:24+00:00","description":"Tasar\u0131mlar\u0131n\u0131z i\u00e7in m\u00fckemmel renk paletlerini \u00fccretsiz olu\u015fturun. Renk Uyumu Arac\u0131yla m\u00fckemmel renkleri bulun, tasar\u0131mlar\u0131n\u0131z\u0131 renklendirin!","breadcrumb":{"@id":"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mandalagenius.com\/tr\/"},{"@type":"ListItem","position":2,"name":"Renk Uyumu Arac\u0131"}]},{"@type":"WebSite","@id":"https:\/\/mandalagenius.com\/tr\/#website","url":"https:\/\/mandalagenius.com\/tr\/","name":"Mandala Genius","description":"","publisher":{"@id":"https:\/\/mandalagenius.com\/tr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mandalagenius.com\/tr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":"Organization","@id":"https:\/\/mandalagenius.com\/tr\/#organization","name":"Mandala Genius","url":"https:\/\/mandalagenius.com\/tr\/","logo":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/mandalagenius.com\/tr\/#\/schema\/logo\/image\/","url":"https:\/\/mandalagenius.com\/tr\/wp-content\/uploads\/sites\/7\/2025\/04\/cropped-Untitled-design-26.png","contentUrl":"https:\/\/mandalagenius.com\/tr\/wp-content\/uploads\/sites\/7\/2025\/04\/cropped-Untitled-design-26.png","width":801,"height":755,"caption":"Mandala Genius"},"image":{"@id":"https:\/\/mandalagenius.com\/tr\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/mandalagenius.com\/tr\/wp-json\/wp\/v2\/pages\/81","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mandalagenius.com\/tr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mandalagenius.com\/tr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mandalagenius.com\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mandalagenius.com\/tr\/wp-json\/wp\/v2\/comments?post=81"}],"version-history":[{"count":3,"href":"https:\/\/mandalagenius.com\/tr\/wp-json\/wp\/v2\/pages\/81\/revisions"}],"predecessor-version":[{"id":84,"href":"https:\/\/mandalagenius.com\/tr\/wp-json\/wp\/v2\/pages\/81\/revisions\/84"}],"wp:attachment":[{"href":"https:\/\/mandalagenius.com\/tr\/wp-json\/wp\/v2\/media?parent=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":81,"date":"2025-10-15T17:39:24","date_gmt":"2025-10-15T17:39:24","guid":{"rendered":"https:\/\/mandalagenius.com\/tr\/?page_id=81"},"modified":"2025-10-15T17:39:24","modified_gmt":"2025-10-15T17:39:24","slug":"renk-uyum-araci","status":"publish","type":"page","link":"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/","title":{"rendered":"Renk Uyumu Arac\u0131"},"content":{"rendered":"\n\n\n\n \n \n ColorGenius – Tasar\u0131mlar\u0131n\u0131z \u0130\u00e7in M\u00fckemmel Renk Uyumu Bulucu | \u00dccretsiz Ara\u00e7<\/title>\n <meta name=\"description\" content=\"ColorGenius, m\u00fckemmel renk uyumlar\u0131 bulmak i\u00e7in nihai ara\u00e7t\u0131r. Tamamlay\u0131c\u0131, benzer, \u00fc\u00e7l\u00fc ve daha fazla renk paletleri olu\u015fturun. Tasar\u0131mc\u0131lar, sanat\u00e7\u0131lar ve i\u00e7erik \u00fcreticiler i\u00e7in ideal.\">\n <meta name=\"keywords\" content=\"renk uyumu, renk paleti, renk kombinasyonu, tasar\u0131m arac\u0131, tamamlay\u0131c\u0131 renkler, renk \u015femas\u0131, palet olu\u015fturucu, grafik tasar\u0131m, renk teorisi\">\n <meta name=\"author\" content=\"MandalaGenius\">\n \n \n <meta property=\"og:title\" content=\"ColorGenius - M\u00fckemmel Renk Uyumlar\u0131 Bulun\">\n <meta property=\"og:description\" content=\"Tasar\u0131mc\u0131lar ve sanat\u00e7\u0131lar i\u00e7in uyumlu renk paletleri olu\u015fturan \u00fccretsiz ara\u00e7.\">\n <meta property=\"og:type\" content=\"website\">\n <meta property=\"og:url\" content=\"https:\/\/www.mandalagenius.com\/tr\/colorgenius\">\n <meta property=\"og:image\" content=\"https:\/\/www.mandalagenius.com\/images\/colorgenius-preview.jpg\">\n <meta property=\"og:site_name\" content=\"MandalaGenius\">\n <meta property=\"og:locale\" content=\"tr_TR\">\n \n \n <meta name=\"twitter:card\" content=\"summary_large_image\">\n <meta name=\"twitter:title\" content=\"ColorGenius - Renk Uyumu Arac\u0131\">\n <meta name=\"twitter:description\" content=\"Tasar\u0131mlar\u0131n\u0131z i\u00e7in m\u00fckemmel renk paletlerini \u00fccretsiz olu\u015fturun\">\n <meta name=\"twitter:image\" content=\"https:\/\/www.mandalagenius.com\/images\/colorgenius-twitter-preview.jpg\">\n \n <style>\n :root {\n --primary-color: #6b5b95;\n --secondary-color: #feb236;\n --text-color: #333;\n --light-bg: #f8f9fa;\n --border-color: #ddd;\n --success-color: #4CAF50;\n --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n --border-radius: 8px;\n --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: var(--font-family);\n background-color: var(--light-bg);\n color: var(--text-color);\n line-height: 1.6;\n padding: 20px;\n max-width: 1200px;\n margin: 0 auto;\n }\n\n .container {\n display: grid;\n grid-template-columns: 1fr;\n gap: 20px;\n }\n\n @media (min-width: 768px) {\n .container {\n grid-template-columns: 300px 1fr;\n }\n }\n\n .header {\n text-align: center;\n margin-bottom: 20px;\n grid-column: 1 \/ -1;\n }\n\n .header h1 {\n color: var(--primary-color);\n margin-bottom: 10px;\n font-size: 2rem;\n }\n\n .header p {\n color: var(--text-color);\n font-size: 1rem;\n }\n\n .color-picker-container {\n background-color: white;\n padding: 20px;\n border-radius: var(--border-radius);\n box-shadow: var(--shadow);\n }\n\n .picker-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n }\n\n .picker-header h2 {\n color: var(--primary-color);\n font-size: 1.5rem;\n }\n\n .toggle-buttons {\n display: flex;\n gap: 10px;\n }\n\n .toggle-btn {\n padding: 8px 12px;\n font-size: 0.9rem;\n background-color: var(--primary-color);\n color: white;\n border: none;\n border-radius: var(--border-radius);\n cursor: pointer;\n transition: background-color 0.3s;\n display: flex;\n align-items: center;\n gap: 5px;\n }\n\n .toggle-btn:hover {\n background-color: #574a7a;\n }\n\n .toggle-btn.active {\n background-color: #4a3f6b;\n }\n\n @media (max-width: 767px) {\n .picker-header {\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n }\n\n .toggle-buttons {\n width: 100%;\n }\n\n .toggle-btn {\n width: 100%;\n justify-content: center;\n }\n }\n\n .color-wheel-container {\n margin-bottom: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .color-wheel {\n width: 200px;\n height: 200px;\n position: relative;\n margin-bottom: 15px;\n border-radius: 50%;\n box-shadow: var(--shadow);\n overflow: hidden;\n }\n\n .color-square {\n width: 200px;\n height: 200px;\n position: relative;\n margin-bottom: 15px;\n border-radius: var(--border-radius);\n box-shadow: var(--shadow);\n overflow: hidden;\n display: none;\n }\n\n .wheel-canvas, .square-canvas {\n width: 100%;\n height: 100%;\n }\n\n .wheel-canvas {\n border-radius: 50%;\n }\n\n .color-indicator {\n position: absolute;\n width: 10px;\n height: 10px;\n background-color: white;\n border: 2px solid black;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n pointer-events: none;\n z-index: 10;\n }\n\n .harmony-indicators {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n }\n\n .harmony-indicator {\n position: absolute;\n width: 8px;\n height: 8px;\n background-color: rgba(255, 255, 255, 0.8);\n border: 1px solid rgba(0, 0, 0, 0.5);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n }\n\n .rgb-inputs {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n margin-top: 10px;\n width: 100%;\n }\n\n .rgb-inputs input, .hex-input-container input {\n width: 100%;\n padding: 8px;\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n text-align: center;\n }\n \n .hex-input-container {\n width: 100%;\n margin-bottom: 10px;\n }\n\n .harmony-type {\n margin-top: 20px;\n width: 100%;\n }\n\n .harmony-type label {\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n }\n\n .harmony-type select {\n width: 100%;\n padding: 10px;\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n background-color: white;\n }\n\n .btn {\n display: inline-block;\n background-color: var(--primary-color);\n color: white;\n padding: 10px 15px;\n border: none;\n border-radius: var(--border-radius);\n cursor: pointer;\n font-size: 1rem;\n transition: background-color 0.3s;\n margin-top: 15px;\n width: 100%;\n }\n\n .btn:hover {\n background-color: #574a7a;\n }\n\n .harmony-display {\n background-color: white;\n padding: 20px;\n border-radius: var(--border-radius);\n box-shadow: var(--shadow);\n }\n\n .harmony-display h2 {\n color: var(--primary-color);\n margin-bottom: 15px;\n font-size: 1.5rem;\n }\n\n .color-palette {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n gap: 15px;\n margin-bottom: 20px;\n }\n\n .color-box {\n height: 100px;\n border-radius: var(--border-radius);\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n padding: 10px;\n color: white;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);\n position: relative;\n overflow: hidden;\n transition: transform 0.3s;\n }\n\n .color-box:hover {\n transform: translateY(-5px);\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\n }\n\n .color-box .color-value {\n font-size: 0.85rem;\n font-weight: bold;\n }\n\n .color-box .color-name {\n font-size: 0.75rem;\n opacity: 0.9;\n }\n\n .download-section {\n margin-top: 20px;\n text-align: center;\n }\n\n .download-btn {\n background-color: var(--success-color);\n margin-top: 0;\n }\n\n .download-btn:hover {\n background-color: #3e8e41;\n }\n\n .color-info {\n margin-top: 20px;\n padding: 15px;\n background-color: #f0f0f0;\n border-radius: var(--border-radius);\n }\n\n .color-info h3 {\n color: var(--primary-color);\n margin-bottom: 10px;\n font-size: 1.2rem;\n }\n\n .color-info p {\n margin-bottom: 10px;\n font-size: 0.9rem;\n }\n\n .mandala-footer {\n text-align: center;\n margin-top: 30px;\n padding-top: 20px;\n border-top: 1px solid var(--border-color);\n grid-column: 1 \/ -1;\n }\n\n .mandala-footer a {\n color: var(--primary-color);\n text-decoration: none;\n }\n\n .mandala-footer a:hover {\n text-decoration: underline;\n }\n\n @media (max-width: 767px) {\n body {\n padding: 10px;\n }\n\n .header h1 {\n font-size: 1.8rem;\n }\n\n .color-palette {\n grid-template-columns: repeat(2, 1fr);\n }\n \n .color-wheel {\n width: 180px;\n height: 180px;\n }\n }\n\n .copy-btn {\n position: absolute;\n top: 5px;\n right: 5px;\n background-color: rgba(255, 255, 255, 0.3);\n border: none;\n border-radius: 4px;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.3s;\n }\n\n .color-box:hover .copy-btn {\n opacity: 1;\n }\n\n .copy-btn svg {\n width: 14px;\n height: 14px;\n fill: white;\n }\n\n .toast {\n position: fixed;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n background-color: rgba(0, 0, 0, 0.8);\n color: white;\n padding: 10px 20px;\n border-radius: 20px;\n font-size: 0.9rem;\n opacity: 0;\n transition: opacity 0.3s;\n pointer-events: none;\n z-index: 1000;\n }\n\n .toast.show {\n opacity: 1;\n }\n\n .seo-content {\n display: none;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>ColorGenius<\/h1>\n <p>Tasar\u0131mlar\u0131n\u0131z i\u00e7in m\u00fckemmel renk uyumlar\u0131n\u0131 bulun<\/p>\n <\/div>\n\n <div class=\"color-picker-container\">\n <div class=\"picker-header\">\n <h4>Temel Renginizi Se\u00e7in<\/h4>\n <div class=\"toggle-buttons\">\n <button id=\"toggle-wheel\" class=\"toggle-btn active\">\n <span>\u25ef<\/span> Renk \u00c7ark\u0131\n <\/button>\n <button id=\"toggle-square\" class=\"toggle-btn\">\n <span>\u229e<\/span> Kare Se\u00e7ici\n <\/button>\n <\/div>\n <\/div>\n \n <div class=\"color-wheel-container\">\n <div class=\"color-wheel\">\n <canvas id=\"wheel-canvas\" class=\"wheel-canvas\"><\/canvas>\n <div id=\"color-indicator\" class=\"color-indicator\"><\/div>\n <div id=\"harmony-indicators\" class=\"harmony-indicators\"><\/div>\n <\/div>\n <div class=\"color-square\">\n <canvas id=\"square-canvas\" class=\"square-canvas\"><\/canvas>\n <div id=\"square-indicator\" class=\"color-indicator\"><\/div>\n <\/div>\n <div class=\"hex-input-container\">\n <input type=\"text\" id=\"hex-input\" placeholder=\"#6B5B95\" value=\"#6B5B95\" maxlength=\"7\">\n <\/div>\n <div class=\"rgb-inputs\">\n <input type=\"number\" id=\"red\" min=\"0\" max=\"255\" value=\"107\" placeholder=\"R\">\n <input type=\"number\" id=\"green\" min=\"0\" max=\"255\" value=\"91\" placeholder=\"G\">\n <input type=\"number\" id=\"blue\" min=\"0\" max=\"255\" value=\"149\" placeholder=\"B\">\n <\/div>\n <\/div>\n\n <div class=\"harmony-type\">\n <label for=\"harmony-select\">Uyum T\u00fcr\u00fc:<\/label>\n <select id=\"harmony-select\">\n <option value=\"complementary\">Tamamlay\u0131c\u0131<\/option>\n <option value=\"analogous\">Benzer<\/option>\n <option value=\"triadic\">\u00dc\u00e7l\u00fc<\/option>\n <option value=\"tetradic\">D\u00f6rtl\u00fc<\/option>\n <option value=\"monochromatic\">Tek Renk<\/option>\n <option value=\"split-complementary\">B\u00f6l\u00fcnm\u00fc\u015f Tamamlay\u0131c\u0131<\/option>\n <\/select>\n <\/div>\n\n <button id=\"generate-btn\" class=\"btn\">Uyum Olu\u015ftur<\/button>\n <\/div>\n\n <div class=\"harmony-display\">\n <h2>Renk Uyumu<\/h2>\n <div id=\"color-palette\" class=\"color-palette\">\n \n <\/div>\n\n <div class=\"color-info\">\n <h3>Uyum Bilgisi<\/h3>\n <p id=\"harmony-description\">Renk ili\u015fkisi hakk\u0131nda bilgi g\u00f6rmek i\u00e7in bir uyum t\u00fcr\u00fc se\u00e7in ve olu\u015fturun.<\/p>\n <\/div>\n\n <div class=\"download-section\">\n <button id=\"download-btn\" class=\"btn download-btn\">Paleti \u0130ndir<\/button>\n <\/div>\n <\/div>\n\n <div class=\"mandala-footer\">\n <p><a href=\"https:\/\/www.mandalagenius.com\" target=\"_blank\">MandalaGenius.com<\/a> i\u00e7in olu\u015fturuldu<\/p>\n <\/div>\n\n \n <div class=\"seo-content\">\n <h1>ColorGenius – Renk Uyumu Arac\u0131<\/h1>\n <h2>Renk Paleti Olu\u015fturucu<\/h2>\n <p>ColorGenius, tasar\u0131mc\u0131lar, sanat\u00e7\u0131lar ve i\u00e7erik \u00fcreticiler i\u00e7in m\u00fckemmel renk kombinasyonlar\u0131 bulmak amac\u0131yla olu\u015fturulmu\u015f \u00fccretsiz bir online ara\u00e7t\u0131r. \u0130nteraktif renk \u00e7ark\u0131m\u0131z ile tamamlay\u0131c\u0131, benzer, \u00fc\u00e7l\u00fc, d\u00f6rtl\u00fc, tek renk ve b\u00f6l\u00fcnm\u00fc\u015f tamamlay\u0131c\u0131 renk uyumlar\u0131 olu\u015fturabilirsiniz.<\/p>\n <h3>Ana \u00d6zellikler<\/h3>\n <ul>\n <li>Hassas se\u00e7im i\u00e7in interaktif renk \u00e7ark\u0131<\/li>\n <li>6 farkl\u0131 renk uyumu t\u00fcr\u00fc<\/li>\n <li>Her renk i\u00e7in HEX ve RGB de\u011ferleri<\/li>\n <li>PNG format\u0131nda palet indirme<\/li>\n <li>Panoya kopyalama \u00f6zelli\u011fi<\/li>\n <li>Tamamen T\u00fcrk\u00e7e aray\u00fcz<\/li>\n <li>Mobil cihazlar i\u00e7in duyarl\u0131 tasar\u0131m<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div id=\"toast\" class=\"toast\"><\/div>\n\n <script type=\"application\/ld+json\">\n {\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"WebApplication\",\n \"name\": \"ColorGenius - Renk Uyumu Bulucu\",\n \"description\": \"Tasar\u0131mlar i\u00e7in uyumlu renk paletleri olu\u015fturan \u00fccretsiz ara\u00e7. Tamamlay\u0131c\u0131, benzer, \u00fc\u00e7l\u00fc ve daha fazla renk kombinasyonlar\u0131\",\n \"url\": \"https:\/\/www.mandalagenius.com\/tr\/colorgenius\",\n \"inLanguage\": \"tr\",\n \"applicationCategory\": \"DesignApplication\",\n \"operatingSystem\": \"Any\",\n \"permissions\": \"browser\",\n \"offers\": {\n \"@type\": \"Offer\",\n \"price\": \"0\",\n \"priceCurrency\": \"TRY\"\n },\n \"author\": {\n \"@type\": \"Organization\",\n \"name\": \"MandalaGenius\",\n \"url\": \"https:\/\/www.mandalagenius.com\"\n },\n \"featureList\": [\n \"\u0130nteraktif renk \u00e7ark\u0131\",\n \"6 farkl\u0131 renk uyumu t\u00fcr\u00fc\",\n \"Kare renk se\u00e7ici\",\n \"HEX ve RGB de\u011ferleri\",\n \"Palet indirme\",\n \"Panoya kopyalama\"\n ]\n }\n <\/script>\n\n <script>\n \/\/ DOM Elements\n const wheelCanvas = document.getElementById('wheel-canvas');\n const squareCanvas = document.getElementById('square-canvas');\n const colorIndicator = document.getElementById('color-indicator');\n const squareIndicator = document.getElementById('square-indicator');\n const harmonyIndicators = document.getElementById('harmony-indicators');\n const redInput = document.getElementById('red');\n const greenInput = document.getElementById('green');\n const blueInput = document.getElementById('blue');\n const hexInput = document.getElementById('hex-input');\n const toggleWheelBtn = document.getElementById('toggle-wheel');\n const toggleSquareBtn = document.getElementById('toggle-square');\n const colorWheel = document.querySelector('.color-wheel');\n const colorSquare = document.querySelector('.color-square');\n const harmonySelect = document.getElementById('harmony-select');\n const generateBtn = document.getElementById('generate-btn');\n const colorPalette = document.getElementById('color-palette');\n const harmonyDescription = document.getElementById('harmony-description');\n const downloadBtn = document.getElementById('download-btn');\n const toast = document.getElementById('toast');\n\n \/\/ Color wheel setup\n const wheelCtx = wheelCanvas.getContext('2d');\n let wheelSize = 200;\n let wheelRadius = wheelSize \/ 2;\n let isDragging = false;\n let currentColor = { r: 107, g: 91, b: 149 }; \/\/ Initial color\n let currentHarmony = 'complementary';\n let harmonyColors = [];\n\n \/\/ Initialize the color wheel and square\n function initColorWheel() {\n \/\/ Set canvas size\n wheelCanvas.width = wheelSize;\n wheelCanvas.height = wheelSize;\n squareCanvas.width = wheelSize;\n squareCanvas.height = wheelSize;\n \n \/\/ Set initial display states\n colorWheel.style.display = 'block';\n colorSquare.style.display = 'none';\n \n \/\/ Draw the color wheel and square\n drawColorWheel();\n drawColorSquare();\n \n \/\/ Set initial color indicator position\n updateColorIndicator();\n updateSquareIndicator();\n \n \/\/ Add event listeners for wheel interaction\n wheelCanvas.addEventListener('mousedown', startDragWheel);\n wheelCanvas.addEventListener('mousemove', dragWheel);\n wheelCanvas.addEventListener('mouseup', endDrag);\n wheelCanvas.addEventListener('mouseleave', endDrag);\n \n \/\/ Add event listeners for square interaction\n squareCanvas.addEventListener('mousedown', startDragSquare);\n squareCanvas.addEventListener('mousemove', dragSquare);\n squareCanvas.addEventListener('mouseup', endDrag);\n squareCanvas.addEventListener('mouseleave', endDrag);\n \n \/\/ Touch events for mobile\n wheelCanvas.addEventListener('touchstart', handleTouchWheel);\n wheelCanvas.addEventListener('touchmove', handleTouchWheel);\n wheelCanvas.addEventListener('touchend', endDrag);\n \n squareCanvas.addEventListener('touchstart', handleTouchSquare);\n squareCanvas.addEventListener('touchmove', handleTouchSquare);\n squareCanvas.addEventListener('touchend', endDrag);\n \n \/\/ Toggle button events\n toggleWheelBtn.addEventListener('click', showWheelPicker);\n toggleSquareBtn.addEventListener('click', showSquarePicker);\n \n \/\/ Hex input event\n hexInput.addEventListener('input', updateFromHexInput);\n \n \/\/ Generate initial harmony\n generateHarmony();\n }\n\n \/\/ Show color wheel picker\n function showWheelPicker() {\n colorWheel.style.display = 'block';\n colorSquare.style.display = 'none';\n toggleWheelBtn.classList.add('active');\n toggleSquareBtn.classList.remove('active');\n }\n\n \/\/ Show color square picker\n function showSquarePicker() {\n colorWheel.style.display = 'none';\n colorSquare.style.display = 'block';\n toggleWheelBtn.classList.remove('active');\n toggleSquareBtn.classList.add('active');\n drawColorSquare();\n updateSquareIndicator();\n }\n\n \/\/ Draw the color wheel\n function drawColorWheel() {\n for (let y = 0; y < wheelSize; y++) {\n for (let x = 0; x < wheelSize; x++) {\n \/\/ Calculate position relative to center\n const dx = x - wheelRadius;\n const dy = y - wheelRadius;\n const distance = Math.sqrt(dx * dx + dy * dy);\n \n \/\/ Only draw within the circle\n if (distance <= wheelRadius) {\n \/\/ Convert position to hue and saturation\n const hue = (Math.atan2(dy, dx) * 180 \/ Math.PI + 180) \/ 360;\n const saturation = distance \/ wheelRadius;\n \n \/\/ Convert HSV to RGB\n const rgb = hsvToRgb(hue, saturation, 1);\n \n \/\/ Draw the pixel\n wheelCtx.fillStyle = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;\n wheelCtx.fillRect(x, y, 1, 1);\n }\n }\n }\n }\n \n \/\/ Draw the color square (saturation\/value with fixed hue)\n function drawColorSquare() {\n const squareCtx = squareCanvas.getContext('2d');\n const hsv = rgbToHsv(currentColor.r, currentColor.g, currentColor.b);\n \n for (let y = 0; y < wheelSize; y++) {\n for (let x = 0; x < wheelSize; x++) {\n \/\/ Calculate saturation and value based on position\n const saturation = x \/ wheelSize;\n const value = 1 - (y \/ wheelSize);\n \n \/\/ Convert HSV to RGB with current hue\n const rgb = hsvToRgb(hsv.h, saturation, value);\n \n \/\/ Draw the pixel\n squareCtx.fillStyle = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;\n squareCtx.fillRect(x, y, 1, 1);\n }\n }\n }\n\n \/\/ Update color indicator position based on current color\n function updateColorIndicator() {\n \/\/ Convert RGB to HSV\n const hsv = rgbToHsv(currentColor.r, currentColor.g, currentColor.b);\n \n \/\/ Calculate position on wheel\n const angle = hsv.h * 2 * Math.PI;\n const distance = hsv.s * wheelRadius;\n const x = wheelRadius + distance * Math.cos(angle - Math.PI \/ 2);\n const y = wheelRadius + distance * Math.sin(angle - Math.PI \/ 2);\n \n \/\/ Update indicator position\n colorIndicator.style.left = `${x}px`;\n colorIndicator.style.top = `${y}px`;\n \n \/\/ Update harmony indicators\n updateHarmonyIndicators();\n \n \/\/ Update hex input\n hexInput.value = rgbToHex(currentColor.r, currentColor.g, currentColor.b);\n }\n \n \/\/ Update square indicator position\n function updateSquareIndicator() {\n const hsv = rgbToHsv(currentColor.r, currentColor.g, currentColor.b);\n const x = hsv.s * wheelSize;\n const y = (1 - hsv.v) * wheelSize;\n \n squareIndicator.style.left = `${x}px`;\n squareIndicator.style.top = `${y}px`;\n }\n\n \/\/ Update harmony indicators based on current color and harmony type\n function updateHarmonyIndicators() {\n \/\/ Clear previous indicators\n harmonyIndicators.innerHTML = '';\n \n \/\/ Get harmony colors\n const colors = getHarmonyColors(currentColor, currentHarmony);\n \n \/\/ Create indicator for each harmony color\n colors.forEach((color, index) => {\n if (index === 0) return; \/\/ Skip the base color\n \n const hsv = rgbToHsv(color.r, color.g, color.b);\n const angle = hsv.h * 2 * Math.PI;\n const distance = hsv.s * wheelRadius;\n const x = wheelRadius + distance * Math.cos(angle - Math.PI \/ 2);\n const y = wheelRadius + distance * Math.sin(angle - Math.PI \/ 2);\n \n const indicator = document.createElement('div');\n indicator.className = 'harmony-indicator';\n indicator.style.left = `${x}px`;\n indicator.style.top = `${y}px`;\n indicator.style.backgroundColor = `rgb(${color.r}, ${color.g}, ${color.b})`;\n \n harmonyIndicators.appendChild(indicator);\n });\n }\n \n \/\/ Update from hex input\n function updateFromHexInput() {\n let hex = hexInput.value;\n \n \/\/ Ensure hex starts with #\n if (!hex.startsWith('#')) {\n hex = '#' + hex;\n hexInput.value = hex;\n }\n \n \/\/ Validate hex format\n if (\/^#[0-9A-F]{6}$\/i.test(hex)) {\n const rgb = hexToRgb(hex);\n currentColor = rgb;\n \n \/\/ Update RGB inputs\n redInput.value = rgb.r;\n greenInput.value = rgb.g;\n blueInput.value = rgb.b;\n \n \/\/ Update indicators\n updateColorIndicator();\n updateSquareIndicator();\n \n \/\/ Redraw color square if visible\n if (colorSquare.style.display === 'block') {\n drawColorSquare();\n }\n }\n }\n\n \/\/ Start dragging the color wheel indicator\n function startDragWheel(e) {\n isDragging = true;\n dragWheel(e);\n }\n\n \/\/ Handle wheel drag event\n function dragWheel(e) {\n if (!isDragging) return;\n \n e.preventDefault();\n \n \/\/ Get mouse position relative to canvas\n const rect = wheelCanvas.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n \n \/\/ Calculate distance from center\n const dx = x - wheelRadius;\n const dy = y - wheelRadius;\n const distance = Math.sqrt(dx * dx + dy * dy);\n \n \/\/ Only update if within the wheel\n if (distance <= wheelRadius) {\n \/\/ Calculate hue and saturation\n const hue = (Math.atan2(dy, dx) + Math.PI) \/ (2 * Math.PI);\n const saturation = Math.min(distance \/ wheelRadius, 1);\n \n \/\/ Get current value from existing color\n const hsv = rgbToHsv(currentColor.r, currentColor.g, currentColor.b);\n \n \/\/ Convert HSV to RGB\n const rgb = hsvToRgb(hue, saturation, hsv.v);\n \n \/\/ Update current color\n currentColor = rgb;\n \n \/\/ Update RGB inputs\n redInput.value = rgb.r;\n greenInput.value = rgb.g;\n blueInput.value = rgb.b;\n \n \/\/ Update hex input\n hexInput.value = rgbToHex(rgb.r, rgb.g, rgb.b);\n \n \/\/ Update indicator position\n colorIndicator.style.left = `${x}px`;\n colorIndicator.style.top = `${y}px`;\n \n \/\/ Update harmony indicators\n updateHarmonyIndicators();\n \n \/\/ Redraw color square\n drawColorSquare();\n updateSquareIndicator();\n }\n }\n \n \/\/ Start dragging the color square indicator\n function startDragSquare(e) {\n isDragging = true;\n dragSquare(e);\n }\n \n \/\/ Handle square drag event\n function dragSquare(e) {\n if (!isDragging) return;\n \n e.preventDefault();\n \n \/\/ Get mouse position relative to canvas\n const rect = squareCanvas.getBoundingClientRect();\n const x = Math.max(0, Math.min(e.clientX - rect.left, wheelSize));\n const y = Math.max(0, Math.min(e.clientY - rect.top, wheelSize));\n \n \/\/ Calculate saturation and value\n const saturation = x \/ wheelSize;\n const value = 1 - (y \/ wheelSize);\n \n \/\/ Get current hue from existing color\n const hsv = rgbToHsv(currentColor.r, currentColor.g, currentColor.b);\n \n \/\/ Convert HSV to RGB\n const rgb = hsvToRgb(hsv.h, saturation, value);\n \n \/\/ Update current color\n currentColor = rgb;\n \n \/\/ Update RGB inputs\n redInput.value = rgb.r;\n greenInput.value = rgb.g;\n blueInput.value = rgb.b;\n \n \/\/ Update hex input\n hexInput.value = rgbToHex(rgb.r, rgb.g, rgb.b);\n \n \/\/ Update indicator position\n squareIndicator.style.left = `${x}px`;\n squareIndicator.style.top = `${y}px`;\n \n \/\/ Update wheel indicator\n updateColorIndicator();\n }\n\n \/\/ End dragging\n function endDrag() {\n isDragging = false;\n }\n\n \/\/ Handle wheel touch events\n function handleTouchWheel(e) {\n e.preventDefault();\n \n const touch = e.touches[0];\n const mouseEvent = new MouseEvent('mousemove', {\n clientX: touch.clientX,\n clientY: touch.clientY\n });\n \n if (e.type === 'touchstart') {\n startDragWheel(mouseEvent);\n } else if (e.type === 'touchmove') {\n dragWheel(mouseEvent);\n }\n }\n \n \/\/ Handle square touch events\n function handleTouchSquare(e) {\n e.preventDefault();\n \n const touch = e.touches[0];\n const mouseEvent = new MouseEvent('mousemove', {\n clientX: touch.clientX,\n clientY: touch.clientY\n });\n \n if (e.type === 'touchstart') {\n startDragSquare(mouseEvent);\n } else if (e.type === 'touchmove') {\n dragSquare(mouseEvent);\n }\n }\n\n \/\/ RGB input event listeners\n redInput.addEventListener('input', updateFromRgbInputs);\n greenInput.addEventListener('input', updateFromRgbInputs);\n blueInput.addEventListener('input', updateFromRgbInputs);\n\n \/\/ Update color from RGB inputs\n function updateFromRgbInputs() {\n \/\/ Get RGB values\n const r = clamp(parseInt(redInput.value) || 0, 0, 255);\n const g = clamp(parseInt(greenInput.value) || 0, 0, 255);\n const b = clamp(parseInt(blueInput.value) || 0, 0, 255);\n \n \/\/ Update current color\n currentColor = { r, g, b };\n \n \/\/ Update hex input\n hexInput.value = rgbToHex(r, g, b);\n \n \/\/ Update color indicators\n updateColorIndicator();\n updateSquareIndicator();\n \n \/\/ Redraw color square if visible\n if (colorSquare.style.display === 'block') {\n drawColorSquare();\n }\n }\n\n \/\/ Harmony select event listener\n harmonySelect.addEventListener('change', function() {\n currentHarmony = this.value;\n updateHarmonyIndicators();\n });\n\n \/\/ Generate button event listener\n generateBtn.addEventListener('click', generateHarmony);\n\n \/\/ Generate harmony\n function generateHarmony() {\n \/\/ Get harmony colors\n harmonyColors = getHarmonyColors(currentColor, currentHarmony);\n \n \/\/ Update color palette\n updateColorPalette();\n \n \/\/ Update harmony description\n updateHarmonyDescription();\n }\n\n \/\/ Update color palette\n function updateColorPalette() {\n \/\/ Clear previous palette\n colorPalette.innerHTML = '';\n \n \/\/ Add color boxes\n harmonyColors.forEach(color => {\n const hex = rgbToHex(color.r, color.g, color.b);\n const colorName = getColorName(color);\n const isDark = isColorDark(color);\n \n const colorBox = document.createElement('div');\n colorBox.className = 'color-box';\n colorBox.style.backgroundColor = hex;\n colorBox.style.color = isDark ? 'white' : 'black';\n \n colorBox.innerHTML = `\n <button class=\"copy-btn\" data-color=\"${hex}\" aria-label=\"Rengi kopyala\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\"\/>\n <\/svg>\n <\/button>\n <div class=\"color-value\">${hex}<\/div>\n <div class=\"color-name\">${colorName}<\/div>\n `;\n \n colorPalette.appendChild(colorBox);\n });\n \n \/\/ Add copy button event listeners\n document.querySelectorAll('.copy-btn').forEach(btn => {\n btn.addEventListener('click', function() {\n const color = this.getAttribute('data-color');\n navigator.clipboard.writeText(color).then(() => {\n showToast(`${color} panoya kopyaland\u0131`);\n });\n });\n });\n }\n\n \/\/ Update harmony description\n function updateHarmonyDescription() {\n const descriptions = {\n 'complementary': 'Tamamlay\u0131c\u0131 renkler renk \u00e7ark\u0131nda birbirine z\u0131t konumdad\u0131r. Y\u00fcksek kontrast ve canl\u0131 g\u00f6r\u00fcn\u00fcmler olu\u015ftururlar.',\n 'analogous': 'Benzer renkler renk \u00e7ark\u0131nda yan yana bulunur. Uyumlu, rahat tasar\u0131mlar olu\u015ftururlar.',\n 'triadic': '\u00dc\u00e7l\u00fc renkler renk \u00e7ark\u0131nda e\u015fit aral\u0131klarla yerle\u015ftirilmi\u015ftir. Uyumu korurken canl\u0131 kontrast sunarlar.',\n 'tetradic': 'D\u00f6rtl\u00fc (veya dikd\u00f6rtgen) uyum, iki tamamlay\u0131c\u0131 \u00e7ift halinde d\u00fczenlenmi\u015f d\u00f6rt renk kullan\u0131r. Zengin renk olanaklar\u0131 sunar.',\n 'monochromatic': 'Tek renkli renkler, tek bir rengin a\u00e7\u0131kl\u0131k ve doygunluk varyasyonlar\u0131d\u0131r. Tutarl\u0131, sofistike bir g\u00f6r\u00fcn\u00fcm olu\u015ftururlar.',\n 'split-complementary': 'B\u00f6l\u00fcnm\u00fc\u015f tamamlay\u0131c\u0131, bir temel renk ve tamamlay\u0131c\u0131s\u0131na biti\u015fik iki rengi kullan\u0131r. Tamamlay\u0131c\u0131 uyumdan daha az gerilimle kontrast sa\u011flar.'\n };\n \n harmonyDescription.textContent = descriptions[currentHarmony];\n }\n\n \/\/ Download button event listener\n downloadBtn.addEventListener('click', downloadPalette);\n\n \/\/ Download palette as PNG\n function downloadPalette() {\n \/\/ Create a canvas for the palette\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n const colorCount = harmonyColors.length;\n \n \/\/ Set canvas size\n const width = colorCount * 100;\n const height = 200;\n canvas.width = width;\n canvas.height = height;\n \n \/\/ Draw background\n ctx.fillStyle = '#f8f9fa';\n ctx.fillRect(0, 0, width, height);\n \n \/\/ Draw color boxes\n harmonyColors.forEach((color, index) => {\n const x = index * 100;\n \n \/\/ Draw color box\n ctx.fillStyle = `rgb(${color.r}, ${color.g}, ${color.b})`;\n ctx.fillRect(x, 0, 100, 150);\n \n \/\/ Draw color info\n const hex = rgbToHex(color.r, color.g, color.b);\n const isDark = isColorDark(color);\n \n ctx.fillStyle = isDark ? 'white' : 'black';\n ctx.font = 'bold 14px Arial';\n ctx.textAlign = 'center';\n ctx.fillText(hex, x + 50, 170);\n \n ctx.font = '12px Arial';\n ctx.fillText(`R:${color.r} G:${color.g} B:${color.b}`, x + 50, 190);\n });\n \n \/\/ Draw title\n ctx.fillStyle = '#333';\n ctx.font = 'bold 16px Arial';\n ctx.textAlign = 'left';\n ctx.fillText(`ColorGenius - ${getHarmonyTurkishName(currentHarmony)} Uyumu`, 10, 20);\n \n \/\/ Convert canvas to data URL\n const dataUrl = canvas.toDataURL('image\/png');\n \n \/\/ Create download link\n const link = document.createElement('a');\n link.download = `colorgenius-${currentHarmony}-paleti.png`;\n link.href = dataUrl;\n link.click();\n \n showToast('Palet ba\u015far\u0131yla indirildi');\n }\n\n \/\/ Get Turkish harmony name for download\n function getHarmonyTurkishName(harmonyType) {\n const names = {\n 'complementary': 'Tamamlay\u0131c\u0131',\n 'analogous': 'Benzer',\n 'triadic': '\u00dc\u00e7l\u00fc',\n 'tetradic': 'D\u00f6rtl\u00fc',\n 'monochromatic': 'Tek Renk',\n 'split-complementary': 'B\u00f6l\u00fcnm\u00fc\u015f Tamamlay\u0131c\u0131'\n };\n return names[harmonyType] || harmonyType;\n }\n\n \/\/ Get harmony colors based on harmony type\n function getHarmonyColors(baseColor, harmonyType) {\n const hsl = rgbToHsl(baseColor.r, baseColor.g, baseColor.b);\n let colors = [baseColor];\n \n switch (harmonyType) {\n case 'complementary':\n \/\/ Add complementary color (opposite on the wheel)\n colors.push(hslToRgb((hsl.h + 0.5) % 1, hsl.s, hsl.l));\n break;\n \n case 'analogous':\n \/\/ Add colors 30\u00b0 on each side\n colors.push(hslToRgb((hsl.h + 1\/12) % 1, hsl.s, hsl.l));\n colors.push(hslToRgb((hsl.h - 1\/12) % 1, hsl.s, hsl.l));\n break;\n \n case 'triadic':\n \/\/ Add colors at 120\u00b0 intervals\n colors.push(hslToRgb((hsl.h + 1\/3) % 1, hsl.s, hsl.l));\n colors.push(hslToRgb((hsl.h + 2\/3) % 1, hsl.s, hsl.l));\n break;\n \n case 'tetradic':\n \/\/ Add colors at 90\u00b0 intervals\n colors.push(hslToRgb((hsl.h + 0.25) % 1, hsl.s, hsl.l));\n colors.push(hslToRgb((hsl.h + 0.5) % 1, hsl.s, hsl.l));\n colors.push(hslToRgb((hsl.h + 0.75) % 1, hsl.s, hsl.l));\n break;\n \n case 'monochromatic':\n \/\/ Add variations with different lightness\n colors.push(hslToRgb(hsl.h, hsl.s, clamp(hsl.l - 0.2, 0, 1)));\n colors.push(hslToRgb(hsl.h, hsl.s, clamp(hsl.l - 0.1, 0, 1)));\n colors.push(hslToRgb(hsl.h, hsl.s, clamp(hsl.l + 0.1, 0, 1)));\n colors.push(hslToRgb(hsl.h, hsl.s, clamp(hsl.l + 0.2, 0, 1)));\n break;\n \n case 'split-complementary':\n \/\/ Add colors 30\u00b0 on each side of the complement\n colors.push(hslToRgb((hsl.h + 0.5 - 1\/12) % 1, hsl.s, hsl.l));\n colors.push(hslToRgb((hsl.h + 0.5 + 1\/12) % 1, hsl.s, hsl.l));\n break;\n }\n \n return colors;\n }\n\n \/\/ Get a simple color name based on RGB values\n function getColorName(color) {\n const r = color.r;\n const g = color.g;\n const b = color.b;\n \n \/\/ Calculate hue, saturation, lightness\n const hsl = rgbToHsl(r, g, b);\n const h = hsl.h * 360; \/\/ Convert to degrees\n const s = hsl.s * 100; \/\/ Convert to percentage\n const l = hsl.l * 100; \/\/ Convert to percentage\n \n \/\/ Determine if it's a grayscale color\n if (s < 10) {\n if (l < 20) return 'Siyah';\n if (l < 50) return 'Gri';\n if (l < 90) return 'A\u00e7\u0131k Gri';\n return 'Beyaz';\n }\n \n \/\/ Determine color name based on hue\n if (h < 30) return 'K\u0131rm\u0131z\u0131';\n if (h < 60) return 'Turuncu';\n if (h < 90) return 'Sar\u0131';\n if (h < 150) return 'Ye\u015fil';\n if (h < 210) return 'Camg\u00f6be\u011fi';\n if (h < 270) return 'Mavi';\n if (h < 330) return 'Mor';\n return 'K\u0131rm\u0131z\u0131';\n }\n\n \/\/ Show toast notification\n function showToast(message) {\n toast.textContent = message;\n toast.classList.add('show');\n \n setTimeout(() => {\n toast.classList.remove('show');\n }, 3000);\n }\n\n \/\/ Utility functions\n \n \/\/ Convert RGB to Hex\n function rgbToHex(r, g, b) {\n return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();\n }\n \n \/\/ Convert Hex to RGB\n function hexToRgb(hex) {\n const result = \/^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$\/i.exec(hex);\n return result ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16)\n } : null;\n }\n \n \/\/ Convert RGB to HSL\n function rgbToHsl(r, g, b) {\n r \/= 255;\n g \/= 255;\n b \/= 255;\n \n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n let h, s, l = (max + min) \/ 2;\n \n if (max === min) {\n h = s = 0; \/\/ achromatic\n } else {\n const d = max - min;\n s = l > 0.5 ? d \/ (2 - max - min) : d \/ (max + min);\n \n switch (max) {\n case r: h = (g - b) \/ d + (g < b ? 6 : 0); break;\n case g: h = (b - r) \/ d + 2; break;\n case b: h = (r - g) \/ d + 4; break;\n }\n \n h \/= 6;\n }\n \n return { h, s, l };\n }\n \n \/\/ Convert HSL to RGB\n function hslToRgb(h, s, l) {\n let r, g, b;\n\n if (s === 0) {\n r = g = b = l; \/\/ achromatic\n } else {\n const hue2rgb = (p, q, t) => {\n if (t < 0) t += 1;\n if (t > 1) t -= 1;\n if (t < 1\/6) return p + (q - p) * 6 * t;\n if (t < 1\/2) return q;\n if (t < 2\/3) return p + (q - p) * (2\/3 - t) * 6;\n return p;\n };\n\n const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n const p = 2 * l - q;\n r = hue2rgb(p, q, h + 1\/3);\n g = hue2rgb(p, q, h);\n b = hue2rgb(p, q, h - 1\/3);\n }\n\n return {\n r: Math.round(r * 255),\n g: Math.round(g * 255),\n b: Math.round(b * 255)\n };\n }\n \n \/\/ Convert RGB to HSV\n function rgbToHsv(r, g, b) {\n r \/= 255;\n g \/= 255;\n b \/= 255;\n \n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n let h, s, v = max;\n \n const d = max - min;\n s = max === 0 ? 0 : d \/ max;\n \n if (max === min) {\n h = 0; \/\/ achromatic\n } else {\n switch (max) {\n case r: h = (g - b) \/ d + (g < b ? 6 : 0); break;\n case g: h = (b - r) \/ d + 2; break;\n case b: h = (r - g) \/ d + 4; break;\n }\n h \/= 6;\n }\n \n return { h, s, v };\n }\n \n \/\/ Convert HSV to RGB\n function hsvToRgb(h, s, v) {\n let r, g, b;\n \n const i = Math.floor(h * 6);\n const f = h * 6 - i;\n const p = v * (1 - s);\n const q = v * (1 - f * s);\n const t = v * (1 - (1 - f) * s);\n \n switch (i % 6) {\n case 0: r = v; g = t; b = p; break;\n case 1: r = q; g = v; b = p; break;\n case 2: r = p; g = v; b = t; break;\n case 3: r = p; g = q; b = v; break;\n case 4: r = t; g = p; b = v; break;\n case 5: r = v; g = p; b = q; break;\n }\n \n return {\n r: Math.round(r * 255),\n g: Math.round(g * 255),\n b: Math.round(b * 255)\n };\n }\n \n \/\/ Check if a color is dark\n function isColorDark(color) {\n \/\/ Calculate relative luminance\n const r = color.r \/ 255;\n const g = color.g \/ 255;\n const b = color.b \/ 255;\n \n const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n \n return luminance < 0.5;\n }\n \n \/\/ Clamp a value between min and max\n function clamp(value, min, max) {\n return Math.min(Math.max(value, min), max);\n }\n\n \/\/ Initialize the color wheel when the page loads\n window.addEventListener('load', initColorWheel);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>ColorGenius – Tasar\u0131mlar\u0131n\u0131z \u0130\u00e7in M\u00fckemmel Renk Uyumu Bulucu | \u00dccretsiz Ara\u00e7 ColorGenius Tasar\u0131mlar\u0131n\u0131z i\u00e7in m\u00fckemmel renk uyumlar\u0131n\u0131 bulun Temel Renginizi […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-81","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>\u00dccretsiz Renk Uyum Arac\u0131 ve Renk Paleti Olu\u015fturucu - Mandala Genius<\/title>\n<meta name=\"description\" content=\"Tasar\u0131mlar\u0131n\u0131z i\u00e7in m\u00fckemmel renk paletlerini \u00fccretsiz olu\u015fturun. Renk Uyumu Arac\u0131yla m\u00fckemmel renkleri bulun, tasar\u0131mlar\u0131n\u0131z\u0131 renklendirin!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00dccretsiz Renk Uyum Arac\u0131 ve Renk Paleti Olu\u015fturucu - Mandala Genius\" \/>\n<meta property=\"og:description\" content=\"Tasar\u0131mlar\u0131n\u0131z i\u00e7in m\u00fckemmel renk paletlerini \u00fccretsiz olu\u015fturun. Renk Uyumu Arac\u0131yla m\u00fckemmel renkleri bulun, tasar\u0131mlar\u0131n\u0131z\u0131 renklendirin!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/\" \/>\n<meta property=\"og:site_name\" content=\"Mandala Genius\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/\",\"url\":\"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/\",\"name\":\"\u00dccretsiz Renk Uyum Arac\u0131 ve Renk Paleti Olu\u015fturucu - Mandala Genius\",\"isPartOf\":{\"@id\":\"https:\/\/mandalagenius.com\/tr\/#website\"},\"datePublished\":\"2025-10-15T17:39:24+00:00\",\"description\":\"Tasar\u0131mlar\u0131n\u0131z i\u00e7in m\u00fckemmel renk paletlerini \u00fccretsiz olu\u015fturun. Renk Uyumu Arac\u0131yla m\u00fckemmel renkleri bulun, tasar\u0131mlar\u0131n\u0131z\u0131 renklendirin!\",\"breadcrumb\":{\"@id\":\"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mandalagenius.com\/tr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Renk Uyumu Arac\u0131\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mandalagenius.com\/tr\/#website\",\"url\":\"https:\/\/mandalagenius.com\/tr\/\",\"name\":\"Mandala Genius\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/mandalagenius.com\/tr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mandalagenius.com\/tr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/mandalagenius.com\/tr\/#organization\",\"name\":\"Mandala Genius\",\"url\":\"https:\/\/mandalagenius.com\/tr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/mandalagenius.com\/tr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/mandalagenius.com\/tr\/wp-content\/uploads\/sites\/7\/2025\/04\/cropped-Untitled-design-26.png\",\"contentUrl\":\"https:\/\/mandalagenius.com\/tr\/wp-content\/uploads\/sites\/7\/2025\/04\/cropped-Untitled-design-26.png\",\"width\":801,\"height\":755,\"caption\":\"Mandala Genius\"},\"image\":{\"@id\":\"https:\/\/mandalagenius.com\/tr\/#\/schema\/logo\/image\/\"}}]}<\/script>\n","yoast_head_json":{"title":"\u00dccretsiz Renk Uyum Arac\u0131 ve Renk Paleti Olu\u015fturucu - Mandala Genius","description":"Tasar\u0131mlar\u0131n\u0131z i\u00e7in m\u00fckemmel renk paletlerini \u00fccretsiz olu\u015fturun. Renk Uyumu Arac\u0131yla m\u00fckemmel renkleri bulun, tasar\u0131mlar\u0131n\u0131z\u0131 renklendirin!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/","og_locale":"tr_TR","og_type":"article","og_title":"\u00dccretsiz Renk Uyum Arac\u0131 ve Renk Paleti Olu\u015fturucu - Mandala Genius","og_description":"Tasar\u0131mlar\u0131n\u0131z i\u00e7in m\u00fckemmel renk paletlerini \u00fccretsiz olu\u015fturun. Renk Uyumu Arac\u0131yla m\u00fckemmel renkleri bulun, tasar\u0131mlar\u0131n\u0131z\u0131 renklendirin!","og_url":"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/","og_site_name":"Mandala Genius","twitter_card":"summary_large_image","twitter_misc":{"Tahmini okuma s\u00fcresi":"1 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/","url":"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/","name":"\u00dccretsiz Renk Uyum Arac\u0131 ve Renk Paleti Olu\u015fturucu - Mandala Genius","isPartOf":{"@id":"https:\/\/mandalagenius.com\/tr\/#website"},"datePublished":"2025-10-15T17:39:24+00:00","description":"Tasar\u0131mlar\u0131n\u0131z i\u00e7in m\u00fckemmel renk paletlerini \u00fccretsiz olu\u015fturun. Renk Uyumu Arac\u0131yla m\u00fckemmel renkleri bulun, tasar\u0131mlar\u0131n\u0131z\u0131 renklendirin!","breadcrumb":{"@id":"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/mandalagenius.com\/tr\/renk-uyum-araci\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mandalagenius.com\/tr\/"},{"@type":"ListItem","position":2,"name":"Renk Uyumu Arac\u0131"}]},{"@type":"WebSite","@id":"https:\/\/mandalagenius.com\/tr\/#website","url":"https:\/\/mandalagenius.com\/tr\/","name":"Mandala Genius","description":"","publisher":{"@id":"https:\/\/mandalagenius.com\/tr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mandalagenius.com\/tr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":"Organization","@id":"https:\/\/mandalagenius.com\/tr\/#organization","name":"Mandala Genius","url":"https:\/\/mandalagenius.com\/tr\/","logo":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/mandalagenius.com\/tr\/#\/schema\/logo\/image\/","url":"https:\/\/mandalagenius.com\/tr\/wp-content\/uploads\/sites\/7\/2025\/04\/cropped-Untitled-design-26.png","contentUrl":"https:\/\/mandalagenius.com\/tr\/wp-content\/uploads\/sites\/7\/2025\/04\/cropped-Untitled-design-26.png","width":801,"height":755,"caption":"Mandala Genius"},"image":{"@id":"https:\/\/mandalagenius.com\/tr\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/mandalagenius.com\/tr\/wp-json\/wp\/v2\/pages\/81","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mandalagenius.com\/tr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mandalagenius.com\/tr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mandalagenius.com\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mandalagenius.com\/tr\/wp-json\/wp\/v2\/comments?post=81"}],"version-history":[{"count":3,"href":"https:\/\/mandalagenius.com\/tr\/wp-json\/wp\/v2\/pages\/81\/revisions"}],"predecessor-version":[{"id":84,"href":"https:\/\/mandalagenius.com\/tr\/wp-json\/wp\/v2\/pages\/81\/revisions\/84"}],"wp:attachment":[{"href":"https:\/\/mandalagenius.com\/tr\/wp-json\/wp\/v2\/media?parent=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}