ColorGenius – Buscador de Armon\u00edas de Color<\/title>\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 <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>ColorGenius<\/h1>\n <p>Encuentra armon\u00edas de color perfectas para tus dise\u00f1os<\/p>\n <\/div>\n\n <div class=\"color-picker-container\">\n <div class=\"picker-header\">\n <h4>Elige Tu Color Base<\/h4>\n <div class=\"toggle-buttons\">\n <button id=\"toggle-wheel\" class=\"toggle-btn active\">\n <span>\u25ef<\/span> Rueda de Color\n <\/button>\n <button id=\"toggle-square\" class=\"toggle-btn\">\n <span>\u229e<\/span> Selector Cuadrado\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\">Tipo de Armon\u00eda:<\/label>\n <select id=\"harmony-select\">\n <option value=\"complementary\">Complementario<\/option>\n <option value=\"analogous\">An\u00e1logo<\/option>\n <option value=\"triadic\">Tri\u00e1dico<\/option>\n <option value=\"tetradic\">Tetr\u00e1dico<\/option>\n <option value=\"monochromatic\">Monocrom\u00e1tico<\/option>\n <option value=\"split-complementary\">Complementario Dividido<\/option>\n <\/select>\n <\/div>\n\n <button id=\"generate-btn\" class=\"btn\">Generar Armon\u00eda<\/button>\n <\/div>\n\n <div class=\"harmony-display\">\n <h2>Armon\u00eda de Color<\/h2>\n <div id=\"color-palette\" class=\"color-palette\">\n \n <\/div>\n\n <div class=\"color-info\">\n <h3>Informaci\u00f3n de Armon\u00eda<\/h3>\n <p id=\"harmony-description\">Selecciona un tipo de armon\u00eda y genera para ver informaci\u00f3n sobre la relaci\u00f3n de colores.<\/p>\n <\/div>\n\n <div class=\"download-section\">\n <button id=\"download-btn\" class=\"btn download-btn\">Descargar Paleta<\/button>\n <\/div>\n <\/div>\n\n <div class=\"mandala-footer\">\n <p>Creado para <a href=\"https:\/\/www.mandalagenius.com\/es\" target=\"_blank\">MandalaGenius.com<\/a><\/p>\n <\/div>\n <\/div>\n\n <div id=\"toast\" class=\"toast\"><\/div>\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=\"Copiar color\">\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(`Copiado ${color} al portapapeles`);\n });\n });\n });\n }\n\n \/\/ Update harmony description\n function updateHarmonyDescription() {\n const descriptions = {\n 'complementary': 'Los colores complementarios son opuestos entre s\u00ed en la rueda de color. Crean alto contraste y apariencias vibrantes.',\n 'analogous': 'Los colores an\u00e1logos est\u00e1n uno al lado del otro en la rueda de color. Crean dise\u00f1os armoniosos y c\u00f3modos.',\n 'triadic': 'Los colores tri\u00e1dicos est\u00e1n espaciados uniformemente alrededor de la rueda de color. Ofrecen contraste vibrante manteniendo la armon\u00eda.',\n 'tetradic': 'La armon\u00eda tetr\u00e1dica (o rectangular) usa cuatro colores dispuestos en dos pares complementarios. Ofrece ricas posibilidades de color.',\n 'monochromatic': 'Los colores monocrom\u00e1ticos son variaciones en luminosidad y saturaci\u00f3n de un solo color. Crean una apariencia cohesiva y sofisticada.',\n 'split-complementary': 'El complementario dividido usa un color base y los dos colores adyacentes a su complemento. Proporciona contraste con menos tensi\u00f3n que la armon\u00eda complementaria.'\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 - Armon\u00eda ${currentHarmony.charAt(0).toUpperCase() + currentHarmony.slice(1)}`, 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}-palette.png`;\n link.href = dataUrl;\n link.click();\n \n showToast('Paleta descargada exitosamente');\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 'Negro';\n if (l < 50) return 'Gris';\n if (l < 90) return 'Gris Claro';\n return 'Blanco';\n }\n \n \/\/ Determine color name based on hue\n if (h < 30) return 'Rojo';\n if (h < 60) return 'Naranja';\n if (h < 90) return 'Amarillo';\n if (h < 150) return 'Verde';\n if (h < 210) return 'Cian';\n if (h < 270) return 'Azul';\n if (h < 330) return 'P\u00farpura';\n return 'Rojo';\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 – Buscador de Armon\u00edas de Color ColorGenius Encuentra armon\u00edas de color perfectas para tus dise\u00f1os Elige Tu Color Base […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"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-187","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>ColorGenius - Encuentra Armon\u00edas de Color Perfectas - Mandala Genius<\/title>\n<meta name=\"description\" content=\"ColorGenius es la herramienta definitiva para encontrar armon\u00edas de color perfectas. Genera paletas complementarias, an\u00e1logas, tri\u00e1dicas y m\u00e1s.\" \/>\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\/es\/herramienta-armonias-color-diseno-gratis\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ColorGenius - Encuentra Armon\u00edas de Color Perfectas - Mandala Genius\" \/>\n<meta property=\"og:description\" content=\"ColorGenius es la herramienta definitiva para encontrar armon\u00edas de color perfectas. Genera paletas complementarias, an\u00e1logas, tri\u00e1dicas y m\u00e1s.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/\" \/>\n<meta property=\"og:site_name\" content=\"Mandala Genius\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-15T16:29:47+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/\",\"url\":\"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/\",\"name\":\"ColorGenius - Encuentra Armon\u00edas de Color Perfectas - Mandala Genius\",\"isPartOf\":{\"@id\":\"https:\/\/mandalagenius.com\/es\/#website\"},\"datePublished\":\"2025-10-15T16:26:41+00:00\",\"dateModified\":\"2025-10-15T16:29:47+00:00\",\"description\":\"ColorGenius es la herramienta definitiva para encontrar armon\u00edas de color perfectas. Genera paletas complementarias, an\u00e1logas, tri\u00e1dicas y m\u00e1s.\",\"breadcrumb\":{\"@id\":\"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mandalagenius.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ColorGenius – Encuentra Armon\u00edas de Color Perfectas\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mandalagenius.com\/es\/#website\",\"url\":\"https:\/\/mandalagenius.com\/es\/\",\"name\":\"Mandala Genius\",\"description\":\"Arte y Esp\u00edritu en Geometr\u00eda Sagrada\",\"publisher\":{\"@id\":\"https:\/\/mandalagenius.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mandalagenius.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/mandalagenius.com\/es\/#organization\",\"name\":\"Mandala Genius\",\"url\":\"https:\/\/mandalagenius.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/mandalagenius.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/mandalagenius.com\/es\/wp-content\/uploads\/sites\/4\/2025\/04\/cropped-Untitled-design-26.png\",\"contentUrl\":\"https:\/\/mandalagenius.com\/es\/wp-content\/uploads\/sites\/4\/2025\/04\/cropped-Untitled-design-26.png\",\"width\":800,\"height\":804,\"caption\":\"Mandala Genius \"},\"image\":{\"@id\":\"https:\/\/mandalagenius.com\/es\/#\/schema\/logo\/image\/\"}}]}<\/script>\n","yoast_head_json":{"title":"ColorGenius - Encuentra Armon\u00edas de Color Perfectas - Mandala Genius","description":"ColorGenius es la herramienta definitiva para encontrar armon\u00edas de color perfectas. Genera paletas complementarias, an\u00e1logas, tri\u00e1dicas y m\u00e1s.","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\/es\/herramienta-armonias-color-diseno-gratis\/","og_locale":"es_ES","og_type":"article","og_title":"ColorGenius - Encuentra Armon\u00edas de Color Perfectas - Mandala Genius","og_description":"ColorGenius es la herramienta definitiva para encontrar armon\u00edas de color perfectas. Genera paletas complementarias, an\u00e1logas, tri\u00e1dicas y m\u00e1s.","og_url":"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/","og_site_name":"Mandala Genius","article_modified_time":"2025-10-15T16:29:47+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/","url":"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/","name":"ColorGenius - Encuentra Armon\u00edas de Color Perfectas - Mandala Genius","isPartOf":{"@id":"https:\/\/mandalagenius.com\/es\/#website"},"datePublished":"2025-10-15T16:26:41+00:00","dateModified":"2025-10-15T16:29:47+00:00","description":"ColorGenius es la herramienta definitiva para encontrar armon\u00edas de color perfectas. Genera paletas complementarias, an\u00e1logas, tri\u00e1dicas y m\u00e1s.","breadcrumb":{"@id":"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mandalagenius.com\/es\/"},{"@type":"ListItem","position":2,"name":"ColorGenius – Encuentra Armon\u00edas de Color Perfectas"}]},{"@type":"WebSite","@id":"https:\/\/mandalagenius.com\/es\/#website","url":"https:\/\/mandalagenius.com\/es\/","name":"Mandala Genius","description":"Arte y Esp\u00edritu en Geometr\u00eda Sagrada","publisher":{"@id":"https:\/\/mandalagenius.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mandalagenius.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/mandalagenius.com\/es\/#organization","name":"Mandala Genius","url":"https:\/\/mandalagenius.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/mandalagenius.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/mandalagenius.com\/es\/wp-content\/uploads\/sites\/4\/2025\/04\/cropped-Untitled-design-26.png","contentUrl":"https:\/\/mandalagenius.com\/es\/wp-content\/uploads\/sites\/4\/2025\/04\/cropped-Untitled-design-26.png","width":800,"height":804,"caption":"Mandala Genius "},"image":{"@id":"https:\/\/mandalagenius.com\/es\/#\/schema\/logo\/image\/"}}]}},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/mandalagenius.com\/es\/wp-json\/wp\/v2\/pages\/187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mandalagenius.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mandalagenius.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mandalagenius.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mandalagenius.com\/es\/wp-json\/wp\/v2\/comments?post=187"}],"version-history":[{"count":8,"href":"https:\/\/mandalagenius.com\/es\/wp-json\/wp\/v2\/pages\/187\/revisions"}],"predecessor-version":[{"id":196,"href":"https:\/\/mandalagenius.com\/es\/wp-json\/wp\/v2\/pages\/187\/revisions\/196"}],"wp:attachment":[{"href":"https:\/\/mandalagenius.com\/es\/wp-json\/wp\/v2\/media?parent=187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":187,"date":"2025-10-15T16:26:41","date_gmt":"2025-10-15T16:26:41","guid":{"rendered":"https:\/\/mandalagenius.com\/es\/?page_id=187"},"modified":"2025-10-15T16:29:47","modified_gmt":"2025-10-15T16:29:47","slug":"herramienta-armonias-color-diseno-gratis","status":"publish","type":"page","link":"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/","title":{"rendered":"ColorGenius – Encuentra Armon\u00edas de Color Perfectas"},"content":{"rendered":"\n\n\n\n \n \n ColorGenius – Buscador de Armon\u00edas de Color<\/title>\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 <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>ColorGenius<\/h1>\n <p>Encuentra armon\u00edas de color perfectas para tus dise\u00f1os<\/p>\n <\/div>\n\n <div class=\"color-picker-container\">\n <div class=\"picker-header\">\n <h4>Elige Tu Color Base<\/h4>\n <div class=\"toggle-buttons\">\n <button id=\"toggle-wheel\" class=\"toggle-btn active\">\n <span>\u25ef<\/span> Rueda de Color\n <\/button>\n <button id=\"toggle-square\" class=\"toggle-btn\">\n <span>\u229e<\/span> Selector Cuadrado\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\">Tipo de Armon\u00eda:<\/label>\n <select id=\"harmony-select\">\n <option value=\"complementary\">Complementario<\/option>\n <option value=\"analogous\">An\u00e1logo<\/option>\n <option value=\"triadic\">Tri\u00e1dico<\/option>\n <option value=\"tetradic\">Tetr\u00e1dico<\/option>\n <option value=\"monochromatic\">Monocrom\u00e1tico<\/option>\n <option value=\"split-complementary\">Complementario Dividido<\/option>\n <\/select>\n <\/div>\n\n <button id=\"generate-btn\" class=\"btn\">Generar Armon\u00eda<\/button>\n <\/div>\n\n <div class=\"harmony-display\">\n <h2>Armon\u00eda de Color<\/h2>\n <div id=\"color-palette\" class=\"color-palette\">\n \n <\/div>\n\n <div class=\"color-info\">\n <h3>Informaci\u00f3n de Armon\u00eda<\/h3>\n <p id=\"harmony-description\">Selecciona un tipo de armon\u00eda y genera para ver informaci\u00f3n sobre la relaci\u00f3n de colores.<\/p>\n <\/div>\n\n <div class=\"download-section\">\n <button id=\"download-btn\" class=\"btn download-btn\">Descargar Paleta<\/button>\n <\/div>\n <\/div>\n\n <div class=\"mandala-footer\">\n <p>Creado para <a href=\"https:\/\/www.mandalagenius.com\/es\" target=\"_blank\">MandalaGenius.com<\/a><\/p>\n <\/div>\n <\/div>\n\n <div id=\"toast\" class=\"toast\"><\/div>\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=\"Copiar color\">\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(`Copiado ${color} al portapapeles`);\n });\n });\n });\n }\n\n \/\/ Update harmony description\n function updateHarmonyDescription() {\n const descriptions = {\n 'complementary': 'Los colores complementarios son opuestos entre s\u00ed en la rueda de color. Crean alto contraste y apariencias vibrantes.',\n 'analogous': 'Los colores an\u00e1logos est\u00e1n uno al lado del otro en la rueda de color. Crean dise\u00f1os armoniosos y c\u00f3modos.',\n 'triadic': 'Los colores tri\u00e1dicos est\u00e1n espaciados uniformemente alrededor de la rueda de color. Ofrecen contraste vibrante manteniendo la armon\u00eda.',\n 'tetradic': 'La armon\u00eda tetr\u00e1dica (o rectangular) usa cuatro colores dispuestos en dos pares complementarios. Ofrece ricas posibilidades de color.',\n 'monochromatic': 'Los colores monocrom\u00e1ticos son variaciones en luminosidad y saturaci\u00f3n de un solo color. Crean una apariencia cohesiva y sofisticada.',\n 'split-complementary': 'El complementario dividido usa un color base y los dos colores adyacentes a su complemento. Proporciona contraste con menos tensi\u00f3n que la armon\u00eda complementaria.'\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 - Armon\u00eda ${currentHarmony.charAt(0).toUpperCase() + currentHarmony.slice(1)}`, 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}-palette.png`;\n link.href = dataUrl;\n link.click();\n \n showToast('Paleta descargada exitosamente');\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 'Negro';\n if (l < 50) return 'Gris';\n if (l < 90) return 'Gris Claro';\n return 'Blanco';\n }\n \n \/\/ Determine color name based on hue\n if (h < 30) return 'Rojo';\n if (h < 60) return 'Naranja';\n if (h < 90) return 'Amarillo';\n if (h < 150) return 'Verde';\n if (h < 210) return 'Cian';\n if (h < 270) return 'Azul';\n if (h < 330) return 'P\u00farpura';\n return 'Rojo';\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 – Buscador de Armon\u00edas de Color ColorGenius Encuentra armon\u00edas de color perfectas para tus dise\u00f1os Elige Tu Color Base […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"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-187","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>ColorGenius - Encuentra Armon\u00edas de Color Perfectas - Mandala Genius<\/title>\n<meta name=\"description\" content=\"ColorGenius es la herramienta definitiva para encontrar armon\u00edas de color perfectas. Genera paletas complementarias, an\u00e1logas, tri\u00e1dicas y m\u00e1s.\" \/>\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\/es\/herramienta-armonias-color-diseno-gratis\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ColorGenius - Encuentra Armon\u00edas de Color Perfectas - Mandala Genius\" \/>\n<meta property=\"og:description\" content=\"ColorGenius es la herramienta definitiva para encontrar armon\u00edas de color perfectas. Genera paletas complementarias, an\u00e1logas, tri\u00e1dicas y m\u00e1s.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/\" \/>\n<meta property=\"og:site_name\" content=\"Mandala Genius\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-15T16:29:47+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/\",\"url\":\"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/\",\"name\":\"ColorGenius - Encuentra Armon\u00edas de Color Perfectas - Mandala Genius\",\"isPartOf\":{\"@id\":\"https:\/\/mandalagenius.com\/es\/#website\"},\"datePublished\":\"2025-10-15T16:26:41+00:00\",\"dateModified\":\"2025-10-15T16:29:47+00:00\",\"description\":\"ColorGenius es la herramienta definitiva para encontrar armon\u00edas de color perfectas. Genera paletas complementarias, an\u00e1logas, tri\u00e1dicas y m\u00e1s.\",\"breadcrumb\":{\"@id\":\"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mandalagenius.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ColorGenius – Encuentra Armon\u00edas de Color Perfectas\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mandalagenius.com\/es\/#website\",\"url\":\"https:\/\/mandalagenius.com\/es\/\",\"name\":\"Mandala Genius\",\"description\":\"Arte y Esp\u00edritu en Geometr\u00eda Sagrada\",\"publisher\":{\"@id\":\"https:\/\/mandalagenius.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mandalagenius.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/mandalagenius.com\/es\/#organization\",\"name\":\"Mandala Genius\",\"url\":\"https:\/\/mandalagenius.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/mandalagenius.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/mandalagenius.com\/es\/wp-content\/uploads\/sites\/4\/2025\/04\/cropped-Untitled-design-26.png\",\"contentUrl\":\"https:\/\/mandalagenius.com\/es\/wp-content\/uploads\/sites\/4\/2025\/04\/cropped-Untitled-design-26.png\",\"width\":800,\"height\":804,\"caption\":\"Mandala Genius \"},\"image\":{\"@id\":\"https:\/\/mandalagenius.com\/es\/#\/schema\/logo\/image\/\"}}]}<\/script>\n","yoast_head_json":{"title":"ColorGenius - Encuentra Armon\u00edas de Color Perfectas - Mandala Genius","description":"ColorGenius es la herramienta definitiva para encontrar armon\u00edas de color perfectas. Genera paletas complementarias, an\u00e1logas, tri\u00e1dicas y m\u00e1s.","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\/es\/herramienta-armonias-color-diseno-gratis\/","og_locale":"es_ES","og_type":"article","og_title":"ColorGenius - Encuentra Armon\u00edas de Color Perfectas - Mandala Genius","og_description":"ColorGenius es la herramienta definitiva para encontrar armon\u00edas de color perfectas. Genera paletas complementarias, an\u00e1logas, tri\u00e1dicas y m\u00e1s.","og_url":"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/","og_site_name":"Mandala Genius","article_modified_time":"2025-10-15T16:29:47+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/","url":"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/","name":"ColorGenius - Encuentra Armon\u00edas de Color Perfectas - Mandala Genius","isPartOf":{"@id":"https:\/\/mandalagenius.com\/es\/#website"},"datePublished":"2025-10-15T16:26:41+00:00","dateModified":"2025-10-15T16:29:47+00:00","description":"ColorGenius es la herramienta definitiva para encontrar armon\u00edas de color perfectas. Genera paletas complementarias, an\u00e1logas, tri\u00e1dicas y m\u00e1s.","breadcrumb":{"@id":"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/mandalagenius.com\/es\/herramienta-armonias-color-diseno-gratis\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mandalagenius.com\/es\/"},{"@type":"ListItem","position":2,"name":"ColorGenius – Encuentra Armon\u00edas de Color Perfectas"}]},{"@type":"WebSite","@id":"https:\/\/mandalagenius.com\/es\/#website","url":"https:\/\/mandalagenius.com\/es\/","name":"Mandala Genius","description":"Arte y Esp\u00edritu en Geometr\u00eda Sagrada","publisher":{"@id":"https:\/\/mandalagenius.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mandalagenius.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/mandalagenius.com\/es\/#organization","name":"Mandala Genius","url":"https:\/\/mandalagenius.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/mandalagenius.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/mandalagenius.com\/es\/wp-content\/uploads\/sites\/4\/2025\/04\/cropped-Untitled-design-26.png","contentUrl":"https:\/\/mandalagenius.com\/es\/wp-content\/uploads\/sites\/4\/2025\/04\/cropped-Untitled-design-26.png","width":800,"height":804,"caption":"Mandala Genius "},"image":{"@id":"https:\/\/mandalagenius.com\/es\/#\/schema\/logo\/image\/"}}]}},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/mandalagenius.com\/es\/wp-json\/wp\/v2\/pages\/187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mandalagenius.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mandalagenius.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mandalagenius.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mandalagenius.com\/es\/wp-json\/wp\/v2\/comments?post=187"}],"version-history":[{"count":8,"href":"https:\/\/mandalagenius.com\/es\/wp-json\/wp\/v2\/pages\/187\/revisions"}],"predecessor-version":[{"id":196,"href":"https:\/\/mandalagenius.com\/es\/wp-json\/wp\/v2\/pages\/187\/revisions\/196"}],"wp:attachment":[{"href":"https:\/\/mandalagenius.com\/es\/wp-json\/wp\/v2\/media?parent=187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}