{"id":23338,"date":"2025-10-23T22:17:23","date_gmt":"2025-10-23T22:17:23","guid":{"rendered":"https:\/\/wedesignmarbella.com\/generador-de-esquemas-de-color\/"},"modified":"2026-07-02T11:01:40","modified_gmt":"2026-07-02T11:01:40","slug":"generador-de-esquemas-de-color","status":"publish","type":"page","link":"https:\/\/wedesignmarbella.com\/es\/herramientas\/generador-de-esquemas-de-color\/","title":{"rendered":"Generador de esquemas de color"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"23338\" class=\"elementor elementor-23338 elementor-15242\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-666f443 e-flex e-con-boxed e-con e-parent\" data-id=\"666f443\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0bd57fb elementor-widget__width-inherit elementor-widget elementor-widget-heading\" data-id=\"0bd57fb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Generador de esquemas de color<\/h1>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-90cd79a e-flex e-con-boxed e-con e-parent\" data-id=\"90cd79a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-922e1b3 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"922e1b3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\r\n        .color-display {\r\n            margin: 10px 0;\r\n            width: 100%;\r\n            height: 50px;\r\n            border-radius: 5px;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            font-size: 16px;\r\n            color: #fff;\r\n            font-weight: bold;\r\n        }\r\n        .color-picker-container {\r\n            margin: 20px 0;\r\n        }\r\n        .color-picker-label {\r\n            display: block;\r\n            margin-bottom: 5px;\r\n        }\r\n        .color-scheme-buttons {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            width: 100%;\r\n            margin-top: 20px;\r\n        }\r\n        .color-scheme-buttons button {\r\n            padding: 10px;\r\n            background-color: #333;\r\n            color: #fff;\r\n            border: none;\r\n            border-radius: 5px;\r\n            cursor: pointer;\r\n            flex: 1;\r\n            margin: 0 5px;\r\n        }\r\n        .color-scheme-buttons button:hover {\r\n            background-color: #444;\r\n        }\r\n        .color-palette {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            justify-content: center;\r\n            margin-top: 20px;\r\n        }\r\n        .palette-item {\r\n            width: 60px;\r\n            height: 60px;\r\n            margin: 5px;\r\n            border-radius: 5px;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            font-size: 14px;\r\n            color: #fff;\r\n            font-weight: bold;\r\n            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);\r\n        }\r\n        .slider-container {\r\n            width: 100%;\r\n            margin-top: 20px;\r\n        }\r\n        .slider-container input {\r\n            width: 100%;\r\n        }\r\n        .slider-container label {\r\n            display: block;\r\n            margin-bottom: 5px;\r\n        }\r\n    <\/style>\r\n\r\n        <!-- Color Picker -->\r\n        <div class=\"color-picker-container\">\r\n            <label for=\"color-picker\" class=\"color-picker-label\">Elige un color principal:<\/label>\r\n            <input type=\"color\" id=\"color-picker\" value=\"#3498db\">\r\n        <\/div>\r\n\r\n        <!-- Hue, Saturation, and Brightness Controls -->\r\n        <div class=\"slider-container\">\r\n            <label for=\"hue-slider\">Hue:<\/label>\r\n            <input type=\"range\" id=\"hue-slider\" min=\"0\" max=\"360\" value=\"0\" step=\"1\">\r\n        <\/div>\r\n        <div class=\"slider-container\">\r\n            <label for=\"saturation-slider\">Saturation:<\/label>\r\n            <input type=\"range\" id=\"saturation-slider\" min=\"0\" max=\"100\" value=\"100\" step=\"1\">\r\n        <\/div>\r\n        <div class=\"slider-container\">\r\n            <label for=\"brightness-slider\">Brightness:<\/label>\r\n            <input type=\"range\" id=\"brightness-slider\" min=\"0\" max=\"100\" value=\"100\" step=\"1\">\r\n        <\/div>\r\n\r\n        <!-- Color Scheme Buttons -->\r\n        <div class=\"color-scheme-buttons\">\r\n            <button onclick=\"generateComplementary()\">Complementario<\/button>\r\n<button onclick=\"generateAnalogous()\">An\u00e1logo<\/button>\r\n<button onclick=\"generateTriadic()\">Tri\u00e1dico<\/button>\r\n<button onclick=\"generateTetradic()\">Tetr\u00e1dico<\/button>\r\n        <\/div>\r\n\r\n        <!-- Generated Color Palette -->\r\n        <div class=\"color-palette\" id=\"color-palette\">\r\n            <!-- Colors will be generated here -->\r\n        <\/div>\r\n\r\n        <!-- Color Code Display -->\r\n        <div class=\"color-display\" id=\"color-code\">\r\n Color seleccionado: #3498db\r\n        <\/div>\r\n\r\n<script>\r\n    \/\/ --- DOM Element Selection ---\r\n    const colorPicker = document.getElementById('color-picker');\r\n    const hueSlider = document.getElementById('hue-slider');\r\n    const saturationSlider = document.getElementById('saturation-slider');\r\n    const brightnessSlider = document.getElementById('brightness-slider');\r\n    const colorPalette = document.getElementById('color-palette');\r\n    const colorCodeDisplay = document.getElementById('color-code');\r\n\r\n    \/\/ --- Color Conversion Functions ---\r\n\r\n    \/**\r\n     * Converts HSL color values to an RGB object.\r\n     * User's original logic, modified to return an {r, g, b} object.\r\n     *\/\r\n    function hslToRgb(h, s, l) {\r\n        s \/= 100;\r\n        l \/= 100;\r\n        const c = (1 - Math.abs(2 * l - 1)) * s;\r\n        const x = c * (1 - Math.abs((h \/ 60) % 2 - 1));\r\n        const m = l - c \/ 2;\r\n        let r, g, b;\r\n        if (h >= 0 && h < 60) { r = c; g = x; b = 0; }\r\n        else if (h >= 60 && h < 120) { r = x; g = c; b = 0; }\r\n        else if (h >= 120 && h < 180) { r = 0; g = c; b = x; }\r\n        else if (h >= 180 && h < 240) { r = 0; g = x; b = c; }\r\n        else if (h >= 240 && h < 300) { r = x; g = 0; b = c; }\r\n        else { r = c; g = 0; b = x; }\r\n        r = Math.round((r + m) * 255);\r\n        g = Math.round((g + m) * 255);\r\n        b = Math.round((b + m) * 255);\r\n        return { r, g, b };\r\n    }\r\n\r\n    \/**\r\n     * Converts an RGB object to an HSL object.\r\n     *\/\r\n    function rgbToHsl(r, g, b) {\r\n        r \/= 255;\r\n        g \/= 255;\r\n        b \/= 255;\r\n        const max = Math.max(r, g, b);\r\n        const min = Math.min(r, g, b);\r\n        let h, s, l = (max + min) \/ 2;\r\n\r\n        if (max === min) {\r\n            h = s = 0; \/\/ achromatic\r\n        } else {\r\n            const d = max - min;\r\n            s = l > 0.5 ? d \/ (2 - max - min) : d \/ (max + min);\r\n            switch (max) {\r\n                case r: h = (g - b) \/ d + (g <b ? 6 : 0); break; case g: h = (b - r) \/ d + 2; break; case b: h = (r - g) \/ d + 4; break; } h \/= 6; } return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }; } \/** * Converts a HEX color string to an RGB object. * User's original logic, modified to return an {r, g, b} object. *\/ function hexToRgb(hex) { let r = 0, g = 0, b = 0; if (hex.length === 4) { \/\/ #RGB r = parseInt(hex[1] + hex[1], 16); g = parseInt(hex[2] + hex[2], 16); b = parseInt(hex[3] + hex[3], 16); } else if (hex.length === 7) { \/\/ #RRGGBB r = parseInt(hex[1] + hex[2], 16); g = parseInt(hex[3] + hex[4], 16); b = parseInt(hex[5] + hex[6], 16); } return { r, g, b }; } \/** * Converts an RGB object to a HEX color string. *\/ function rgbToHex(r, g, b) { const toHex = (c) => ('0' + c.toString(16)).slice(-2);\r\n        return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\r\n    }\r\n\r\n    \/**\r\n     * Converts HSL values directly to a HEX string.\r\n     *\/\r\n    function getHexFromHsl(h, s, l) {\r\n        const { r, g, b } = hslToRgb(h, s, l);\r\n        return rgbToHex(r, g, b);\r\n    }\r\n\r\n    \/**\r\n     * Returns a contrasting text color (black or white) for a given HEX bg.\r\n     *\/\r\n    function getContrastColor(hex) {\r\n        const { r, g, b } = hexToRgb(hex);\r\n        \/\/ Standard luminance formula\r\n        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) \/ 255;\r\n        return luminance > 0.5 ? '#000' : '#fff';\r\n    }\r\n\r\n\r\n    \/\/ --- Generator Functions (All modified to output HEX) ---\r\n\r\n    function generateComplementary() {\r\n        const h = parseInt(hueSlider.value);\r\n        const s = parseInt(saturationSlider.value);\r\n        const l = parseInt(brightnessSlider.value);\r\n\r\n        const primaryColor = getHexFromHsl(h, s, l);\r\n        const complementaryHue = (h + 180) % 360;\r\n        const complementaryColor = getHexFromHsl(complementaryHue, s, l);\r\n\r\n        displayColorPalette([primaryColor, complementaryColor]);\r\n    }\r\n\r\n    function generateAnalogous() {\r\n        const h = parseInt(hueSlider.value);\r\n        const s = parseInt(saturationSlider.value);\r\n        const l = parseInt(brightnessSlider.value);\r\n\r\n        const primaryColor = getHexFromHsl(h, s, l);\r\n        const analogous1Hue = (h + 30) % 360;\r\n        const analogous2Hue = (h - 30 + 360) % 360;\r\n\r\n        const analogous1Color = getHexFromHsl(analogous1Hue, s, l);\r\n        const analogous2Color = getHexFromHsl(analogous2Hue, s, l);\r\n\r\n        displayColorPalette([primaryColor, analogous1Color, analogous2Color]);\r\n    }\r\n\r\n    function generateTriadic() {\r\n        const h = parseInt(hueSlider.value);\r\n        const s = parseInt(saturationSlider.value);\r\n        const l = parseInt(brightnessSlider.value);\r\n\r\n        const primaryColor = getHexFromHsl(h, s, l);\r\n        const triadic1Hue = (h + 120) % 360;\r\n        const triadic2Hue = (h + 240) % 360;\r\n\r\n        const triadic1Color = getHexFromHsl(triadic1Hue, s, l);\r\n        const triadic2Color = getHexFromHsl(triadic2Hue, s, l);\r\n\r\n        displayColorPalette([primaryColor, triadic1Color, triadic2Color]);\r\n    }\r\n\r\n    function generateTetradic() {\r\n        const h = parseInt(hueSlider.value);\r\n        const s = parseInt(saturationSlider.value);\r\n        const l = parseInt(brightnessSlider.value);\r\n\r\n        const primaryColor = getHexFromHsl(h, s, l);\r\n        const tetradic1Hue = (h + 90) % 360;\r\n        const tetradic2Hue = (h + 180) % 360;\r\n        const tetradic3Hue = (h + 270) % 360;\r\n\r\n        const tetradic1Color = getHexFromHsl(tetradic1Hue, s, l);\r\n        const tetradic2Color = getHexFromHsl(tetradic2Hue, s, l);\r\n        const tetradic3Color = getHexFromHsl(tetradic3Hue, s, l);\r\n\r\n        displayColorPalette([primaryColor, tetradic1Color, tetradic2Color, tetradic3Color]);\r\n    }\r\n\r\n    \/\/ --- Display Function (Modified for contrast) ---\r\n\r\n    function displayColorPalette(colors) {\r\n        colorPalette.innerHTML = '';\r\n        colors.forEach(color => {\r\n            const colorBox = document.createElement('div');\r\n            colorBox.classList.add('palette-item');\r\n            colorBox.style.backgroundColor = color;\r\n            colorBox.textContent = color;\r\n            colorBox.style.color = getContrastColor(color); \/\/ Set dynamic text color\r\n            colorPalette.appendChild(colorBox);\r\n        });\r\n    }\r\n\r\n    \/\/ --- Input Synchronization ---\r\n\r\n    \/**\r\n     * Updates all other inputs based on the HSL sliders.\r\n     *\/\r\n    function updateFromSliders() {\r\n        const h = parseInt(hueSlider.value);\r\n        const s = parseInt(saturationSlider.value);\r\n        const l = parseInt(brightnessSlider.value);\r\n\r\n        const hex = getHexFromHsl(h, s, l);\r\n        \r\n        colorPicker.value = hex;\r\n        colorCodeDisplay.textContent = `Selected Color: ${hex}`;\r\n        colorCodeDisplay.style.backgroundColor = hex;\r\n        colorCodeDisplay.style.color = getContrastColor(hex);\r\n    }\r\n\r\n    \/**\r\n     * Updates all other inputs based on the HEX color picker.\r\n     *\/\r\n    function updateFromColorPicker() {\r\n        const hex = colorPicker.value;\r\n        \r\n        const { r, g, b } = hexToRgb(hex);\r\n        const { h, s, l } = rgbToHsl(r, g, b);\r\n        \r\n        hueSlider.value = h;\r\n        saturationSlider.value = s;\r\n        brightnessSlider.value = l;\r\n        \r\n        colorCodeDisplay.textContent = `Selected Color: ${hex}`;\r\n        colorCodeDisplay.style.backgroundColor = hex;\r\n        colorCodeDisplay.style.color = getContrastColor(hex);\r\n    }\r\n\r\n    \/\/ --- Event Listeners ---\r\n    colorPicker.addEventListener('input', updateFromColorPicker);\r\n    hueSlider.addEventListener('input', updateFromSliders);\r\n    saturationSlider.addEventListener('input', updateFromSliders);\r\n    brightnessSlider.addEventListener('input', updateFromSliders);\r\n\r\n    \/\/ --- Initial Load ---\r\n    \/\/ Sync sliders and display to the color picker's default value on load\r\n    updateFromColorPicker();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7312b30 e-flex e-con-boxed e-con e-parent\" data-id=\"7312b30\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-644756e elementor-align-center elementor-widget__width-inherit elementor-widget elementor-widget-button\" data-id=\"644756e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/wedesignmarbella.com\/es\/herramientas\/\" title=\"Back to Tools\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Volver a Herramientas<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Generador de esquemas de color Elige un color principal: Hue: Saturation: Brightness: Complementario An\u00e1logo Tri\u00e1dico Tetr\u00e1dico Color seleccionado: #3498db Volver a Herramientas<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":23340,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ai_generated_summary":"","footnotes":""},"class_list":["post-23338","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/pages\/23338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/comments?post=23338"}],"version-history":[{"count":0,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/pages\/23338\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/pages\/23340"}],"wp:attachment":[{"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/media?parent=23338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}