{"id":117,"date":"2024-07-05T08:09:30","date_gmt":"2024-07-05T07:09:30","guid":{"rendered":"https:\/\/hellopromptly.com\/?page_id=117"},"modified":"2025-03-13T04:26:52","modified_gmt":"2025-03-13T04:26:52","slug":"color-palette-generator","status":"publish","type":"page","link":"https:\/\/hellopromptly.com\/index.php\/free-tools\/color-palette-generator\/","title":{"rendered":"Color Palette Generator"},"content":{"rendered":"\n<p>The Color Palette Generator lets you create and save custom color palettes. Choose your colors, add them to your palette, and save or copy them for your design projects.<\/p>\n\n\n\n<div id=\"color-palette-generator\">\n    <style>\n        \/* Reset all styles for this container *\/\n        #color-palette-generator {\n            all: unset;\n            display: block;\n        }\n\n        \/* Reapply custom styles *\/\n        #color-palette-generator * {\n            all: revert;\n        }\n\n        #color-palette-generator body {\n            font-family: Arial, sans-serif;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            height: 100vh;\n            background-color: #f0f0f0;\n            margin: 0;\n            flex-direction: column;\n        }\n\n        #color-palette-generator .container {\n            background-color: white;\n            padding: 20px;\n            border-radius: 8px;\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n            text-align: left;\n            width: 100%;\n            max-width: 600px;\n        }\n\n        #color-palette-generator .input-group {\n            margin-bottom: 20px;\n        }\n\n        #color-palette-generator #colorPicker {\n            margin-right: 10px;\n        }\n\n        #color-palette-generator .palette {\n            display: flex;\n            flex-wrap: wrap;\n            justify-content: center;\n            margin-bottom: 20px;\n        }\n\n        #color-palette-generator .color-box {\n            width: 50px;\n            height: 50px;\n            margin: 5px;\n            border-radius: 4px;\n            border: 1px solid #ccc;\n            position: relative;\n        }\n\n        #color-palette-generator .color-box span {\n            position: absolute;\n            bottom: 2px;\n            right: 2px;\n            font-size: 10px;\n            background: rgba(255, 255, 255, 0.7);\n            padding: 2px;\n            border-radius: 2px;\n        }\n\n        #color-palette-generator .color-box button {\n            position: absolute;\n            top: 2px;\n            right: 2px;\n            background: none;\n            border: none;\n            color: red;\n            font-weight: bold;\n            cursor: pointer;\n        }\n\n        #color-palette-generator .button-group {\n            margin-bottom: 20px;\n        }\n\n        #color-palette-generator .button-group button {\n            margin: 5px;\n        }\n\n        #color-palette-generator .saved-palettes {\n            display: flex;\n            flex-wrap: wrap;\n            justify-content: center;\n        }\n    <\/style>\n\n    <div class=\"container\">\n        <div class=\"input-group\">\n            <input type=\"color\" id=\"colorPicker\" value=\"#ffffff\">\n            <button id=\"addColorBtn\">Add Color<\/button>\n        <\/div>\n        <div id=\"palette\" class=\"palette\"><\/div>\n        <div class=\"button-group\">\n            <button id=\"savePaletteBtn\">Save Palette<\/button>\n            <button id=\"clearPaletteBtn\">Clear Saved Palettes<\/button>\n            <button id=\"copyPaletteBtn\">Copy Palette to Clipboard<\/button>\n        <\/div>\n        <h2>Saved Palettes<\/h2>\n        <div id=\"savedPalettes\" class=\"saved-palettes\"><\/div>\n    <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    const colorPicker = document.getElementById('colorPicker');\n    const addColorBtn = document.getElementById('addColorBtn');\n    const savePaletteBtn = document.getElementById('savePaletteBtn');\n    const clearPaletteBtn = document.getElementById('clearPaletteBtn');\n    const copyPaletteBtn = document.getElementById('copyPaletteBtn');\n    const palette = document.getElementById('palette');\n    const savedPalettes = document.getElementById('savedPalettes');\n\n    addColorBtn.addEventListener('click', () => {\n        const color = colorPicker.value;\n        addColorToPalette(color);\n    });\n\n    savePaletteBtn.addEventListener('click', savePalette);\n    clearPaletteBtn.addEventListener('click', clearSavedPalettes);\n    copyPaletteBtn.addEventListener('click', copyPaletteToClipboard);\n\n    function addColorToPalette(color) {\n        const colorBox = document.createElement('div');\n        colorBox.className = 'color-box';\n        colorBox.style.backgroundColor = color;\n        colorBox.innerHTML = `<span>${color}<\/span><button class=\"remove-btn\">&times;<\/button>`;\n        palette.appendChild(colorBox);\n\n        const removeBtn = colorBox.querySelector('.remove-btn');\n        removeBtn.addEventListener('click', () => {\n            palette.removeChild(colorBox);\n        });\n    }\n\n    function savePalette() {\n        const colors = [];\n        document.querySelectorAll('.color-box span').forEach(span => {\n            colors.push(span.textContent);\n        });\n\n        if (colors.length > 0) {\n            let savedPalettes = JSON.parse(localStorage.getItem('savedPalettes')) || [];\n            savedPalettes.push(colors);\n            localStorage.setItem('savedPalettes', JSON.stringify(savedPalettes));\n            displaySavedPalettes();\n        }\n    }\n\n    function displaySavedPalettes() {\n        savedPalettes.innerHTML = '';\n        const savedPalettesData = JSON.parse(localStorage.getItem('savedPalettes')) || [];\n        savedPalettesData.forEach(palette => {\n            const paletteDiv = document.createElement('div');\n            paletteDiv.className = 'palette';\n            palette.forEach(color => {\n                const colorBox = document.createElement('div');\n                colorBox.className = 'color-box';\n                colorBox.style.backgroundColor = color;\n                colorBox.innerHTML = `<span>${color}<\/span>`;\n                paletteDiv.appendChild(colorBox);\n            });\n            savedPalettes.appendChild(paletteDiv);\n        });\n    }\n\n    function clearSavedPalettes() {\n        localStorage.removeItem('savedPalettes');\n        displaySavedPalettes();\n    }\n\n    function copyPaletteToClipboard() {\n        const colors = [];\n        document.querySelectorAll('.color-box span').forEach(span => {\n            colors.push(span.textContent);\n        });\n\n        if (colors.length > 0) {\n            const paletteHTML = colors.map(color => {\n                return `<div style=\"display: inline-block; width: 50px; height: 50px; background-color: ${color}; margin: 5px; border-radius: 4px; border: 1px solid #ccc;\">\n                            <span style=\"position: absolute; bottom: 2px; right: 2px; font-size: 10px; background: rgba(255, 255, 255, 0.7); padding: 2px; border-radius: 2px;\">${color}<\/span>\n                        <\/div>`;\n            }).join('');\n\n            const blob = new Blob([paletteHTML], { type: 'text\/html' });\n            const clipboardItem = new ClipboardItem({ 'text\/html': blob });\n\n            navigator.clipboard.write([clipboardItem]).then(() => {\n                alert('Palette copied to clipboard as HTML.');\n            }).catch(err => {\n                console.error('Failed to copy palette: ', err);\n            });\n        }\n    }\n\n    \/\/ Display saved palettes on page load\n    displaySavedPalettes();\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>The Color Palette Generator lets you create and save custom color palettes. Choose your colors, add them to your palette, and save or copy them for your design projects. Add Color Save Palette Clear Saved Palettes Copy Palette to Clipboard Saved Palettes<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":81,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-117","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/comments?post=117"}],"version-history":[{"count":3,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/117\/revisions"}],"predecessor-version":[{"id":189,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/117\/revisions\/189"}],"up":[{"embeddable":true,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/81"}],"wp:attachment":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/media?parent=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}