{"id":8309904,"date":"2025-08-22T05:34:50","date_gmt":"2025-08-22T02:34:50","guid":{"rendered":"https:\/\/elementor.com\/tools\/?p=8309904"},"modified":"2025-08-22T05:35:20","modified_gmt":"2025-08-22T02:35:20","slug":"hex-color-palette-generator","status":"publish","type":"post","link":"https:\/\/elementor.com\/tools\/hex-color-palette-generator\/","title":{"rendered":"Hex Color Palette Generator"},"content":{"rendered":"\t\t<div data-elementor-type=\"container\" data-elementor-id=\"8309792\" class=\"elementor elementor-8309792\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2ae2e015 e-flex e-con-boxed e-con e-parent\" data-id=\"2ae2e015\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-127ccd87 elementor-widget elementor-widget-spacer\" data-id=\"127ccd87\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7adff21c elementor-widget elementor-widget-html\" data-id=\"7adff21c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    \/* --- Core App Structure (Adapted from your .html-viewer-app) --- *\/\r\n    .color-palette-app {\r\n        width: 100%;\r\n        max-width: 1280px;\r\n        margin: 0 auto;\r\n        padding: 40px 15px;\r\n        background: transparent;\r\n        overflow: visible;\r\n        position: relative;\r\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n    }\r\n\r\n    \/* --- Controls & Buttons (Adapted from your .format-btn styles) --- *\/\r\n    .palette-controls {\r\n        display: flex;\r\n        justify-content: center;\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    .format-btn {\r\n        background-color: #000;\r\n        color: white;\r\n        border: none;\r\n        padding: 12px 24px;\r\n        border-radius: 6px;\r\n        cursor: pointer;\r\n        font-size: 1.125rem;\r\n        font-weight: 500;\r\n        transition: all 0.2s;\r\n        min-width: 14rem;\r\n        text-align: center;\r\n        box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n    }\r\n\r\n    .format-btn:is(:hover, :focus, :focus-visible, :active){\r\n        background-color: #545454;\r\n        transform: translateY(-2px);\r\n        box-shadow: 0 6px 20px rgba(0,0,0,0.15);\r\n    }\r\n    \r\n    \/* --- Main Palette Area (Adapted from your .main-content) --- *\/\r\n    .main-content {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 20px;\r\n        justify-content: center;\r\n    }\r\n\r\n    \/* --- Individual Color Card --- *\/\r\n    .color-card {\r\n        background: white;\r\n        border: 1px solid #EBEBEB;\r\n        border-radius: 8px;\r\n        overflow: hidden;\r\n        box-shadow: 0 2px 10px rgba(0,0,0,0.08);\r\n        display: flex;\r\n        flex-direction: column;\r\n        flex: 1 1 200px; \/* Flex properties for responsive sizing *\/\r\n        min-width: 180px;\r\n        max-width: 240px;\r\n        transition: transform 0.2s ease-in-out;\r\n    }\r\n\r\n    .color-card:hover {\r\n        transform: translateY(-5px);\r\n    }\r\n\r\n    .color-swatch {\r\n        height: 160px;\r\n        width: 100%;\r\n    }\r\n\r\n    .color-info {\r\n        padding: 15px;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        background-color: #ffffff;\r\n        border-top: 1px solid #EBEBEB;\r\n    }\r\n\r\n    .hex-code {\r\n        font-family: 'Courier New', monospace;\r\n        font-size: 1rem;\r\n        font-weight: 600;\r\n        color: #333;\r\n    }\r\n    \r\n    \/* --- Copy Button (Adapted from your .copy-btn) --- *\/\r\n    .copy-btn {\r\n        background-color: #f8f9fa;\r\n        color: black;\r\n        border: 1px solid #ddd;\r\n        padding: 6px 12px;\r\n        border-radius: 4px;\r\n        cursor: pointer;\r\n        font-size: 14px;\r\n        transition: background-color 0.2s;\r\n    }\r\n\r\n    .copy-btn:is(:hover, :focus, :focus-visible) {\r\n        background-color: #e9ecef !important;\r\n        color: black;\r\n    }\r\n    \r\n    \/* --- Success Message (Directly from your code) --- *\/\r\n    .success-message {\r\n        position: fixed;\r\n        bottom: 20px;\r\n        left: 50%;\r\n        transform: translateX(-50%) translateY(100%);\r\n        background-color: #05047E;\r\n        color: white;\r\n        padding: 12px 24px;\r\n        border-radius: 6px;\r\n        font-size: 1rem;\r\n        opacity: 0;\r\n        transition: all 0.4s ease;\r\n        z-index: 1000;\r\n        box-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n    }\r\n\r\n    .success-message.show {\r\n        opacity: 1;\r\n        transform: translateX(-50%) translateY(0);\r\n    }\r\n\r\n    \/* --- Responsive Design (Adapted from your media queries) --- *\/\r\n    @media (max-width: 768px) {\r\n        .color-palette-app {\r\n            padding: 20px 10px;\r\n        }\r\n\r\n        .main-content {\r\n            gap: 15px;\r\n        }\r\n\r\n        .color-card {\r\n             flex-basis: calc(50% - 10px); \/* 2 cards per row *\/\r\n             max-width: none;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n        .color-card {\r\n             flex-basis: 100%; \/* 1 card per row *\/\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"color-palette-app\">\r\n    \r\n    <div class=\"palette-controls\">\r\n        <button id=\"generateBtn\" class=\"format-btn\">Generate New Palette<\/button>\r\n    <\/div>\r\n\r\n    <!-- The main content area where color cards will be injected by JavaScript -->\r\n    <div id=\"paletteContainer\" class=\"main-content\">\r\n        <!-- Color cards will be generated here -->\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<!-- Success message element for copy feedback -->\r\n<div id=\"successMessage\" class=\"success-message\">Color copied to clipboard!<\/div>\r\n\r\n\r\n<script>\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n\r\n        \/\/ --- DOM Element References ---\r\n        const generateBtn = document.getElementById('generateBtn');\r\n        const paletteContainer = document.getElementById('paletteContainer');\r\n        const successMessage = document.getElementById('successMessage');\r\n\r\n        \/\/ --- Core Functions ---\r\n\r\n        \/**\r\n         * Generates a random hexadecimal color code.\r\n         * @returns {string} A random hex color like '#A7C4F2'.\r\n         *\/\r\n        const generateRandomHex = () => {\r\n            const chars = '0123456789ABCDEF';\r\n            let hex = '#';\r\n            for (let i = 0; i < 6; i++) {\r\n                hex += chars[Math.floor(Math.random() * 16)];\r\n            }\r\n            return hex;\r\n        };\r\n\r\n        \/**\r\n         * Generates and displays a new color palette.\r\n         * @param {number} count - The number of colors to generate in the palette.\r\n         *\/\r\n        const generatePalette = (count = 5) => {\r\n            \/\/ Clear any existing colors\r\n            paletteContainer.innerHTML = '';\r\n\r\n            \/\/ Create and append the specified number of color cards\r\n            for (let i = 0; i < count; i++) {\r\n                const hexColor = generateRandomHex();\r\n                \r\n                const colorCard = document.createElement('div');\r\n                colorCard.className = 'color-card';\r\n                \r\n                colorCard.innerHTML = `\r\n                    <div class=\"color-swatch\" style=\"background-color: ${hexColor};\"><\/div>\r\n                    <div class=\"color-info\">\r\n                        <span class=\"hex-code\">${hexColor}<\/span>\r\n                        <button class=\"copy-btn\" data-color=\"${hexColor}\">Copy<\/button>\r\n                    <\/div>\r\n                `;\r\n                paletteContainer.appendChild(colorCard);\r\n            }\r\n        };\r\n        \r\n        \/**\r\n         * Shows a temporary success message.\r\n         * @param {string} message - The message to display.\r\n         *\/\r\n        const showSuccessMessage = (message) => {\r\n            successMessage.textContent = message;\r\n            successMessage.classList.add('show');\r\n\r\n            \/\/ Hide the message after 2 seconds\r\n            setTimeout(() => {\r\n                successMessage.classList.remove('show');\r\n            }, 2000);\r\n        };\r\n\r\n        \/**\r\n         * Handles clicks within the palette container for copying colors.\r\n         * This uses event delegation for better performance.\r\n         * @param {Event} e - The click event object.\r\n         *\/\r\n        const handlePaletteClick = (e) => {\r\n            const target = e.target;\r\n\r\n            \/\/ Check if a 'copy-btn' was clicked\r\n            if (target.classList.contains('copy-btn')) {\r\n                const colorToCopy = target.dataset.color;\r\n                \r\n                \/\/ Use the modern Clipboard API\r\n                navigator.clipboard.writeText(colorToCopy).then(() => {\r\n                    \/\/ On successful copy, show feedback\r\n                    showSuccessMessage(`Copied ${colorToCopy} to clipboard!`);\r\n                }).catch(err => {\r\n                    console.error('Failed to copy text: ', err);\r\n                    showSuccessMessage('Failed to copy.');\r\n                });\r\n            }\r\n        };\r\n\r\n        \/\/ --- Event Listeners ---\r\n        generateBtn.addEventListener('click', () => generatePalette(5));\r\n        paletteContainer.addEventListener('click', handlePaletteClick);\r\n\r\n        \/\/ --- Initial Load ---\r\n        \/\/ Generate a palette as soon as the page loads\r\n        generatePalette(5);\r\n    });\r\n<\/script>\r\n\t\t\t\t<\/div>\n\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\n\r\n\r\n\r\n<p>&nbsp;<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>&nbsp;<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22],"tags":[21],"class_list":["post-8309904","post","type-post","status-publish","format-standard","hentry","category-tools","tag-html-css-tools"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Free Hex Color Palette Generator<\/title>\n<meta name=\"description\" content=\"Generate beautiful and effective hex color palettes for your website and brand with our intuitive Hex Color Palette Generator. Easy to use, exportable, and perfect for designers and developers using Elementor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/tools\/hex-color-palette-generator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Free Hex Color Palette Generator\" \/>\n<meta property=\"og:description\" content=\"Generate beautiful and effective hex color palettes for your website and brand with our intuitive Hex Color Palette Generator. Easy to use, exportable, and perfect for designers and developers using Elementor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/tools\/hex-color-palette-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"Tools\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-22T02:34:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-22T02:35:20+00:00\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/tools\/hex-color-palette-generator\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/tools\/hex-color-palette-generator\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/tools\/#\/schema\/person\/b5f5fb14828c615d7c81a41d4eb3e261\"},\"headline\":\"Hex Color Palette Generator\",\"datePublished\":\"2025-08-22T02:34:50+00:00\",\"dateModified\":\"2025-08-22T02:35:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/tools\/hex-color-palette-generator\/\"},\"wordCount\":7,\"keywords\":[\"Html-Css-tools\"],\"articleSection\":[\"tools\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/tools\/hex-color-palette-generator\/\",\"url\":\"https:\/\/elementor.com\/tools\/hex-color-palette-generator\/\",\"name\":\"Free Hex Color Palette Generator\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/tools\/#website\"},\"datePublished\":\"2025-08-22T02:34:50+00:00\",\"dateModified\":\"2025-08-22T02:35:20+00:00\",\"author\":{\"@id\":\"https:\/\/elementor.com\/tools\/#\/schema\/person\/b5f5fb14828c615d7c81a41d4eb3e261\"},\"description\":\"Generate beautiful and effective hex color palettes for your website and brand with our intuitive Hex Color Palette Generator. Easy to use, exportable, and perfect for designers and developers using Elementor.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/tools\/hex-color-palette-generator\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/tools\/hex-color-palette-generator\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/tools\/hex-color-palette-generator\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/elementor.com\/tools\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hex Color Palette Generator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/tools\/#website\",\"url\":\"https:\/\/elementor.com\/tools\/\",\"name\":\"Tools\",\"description\":\"Just another Elementor hosted website ;)\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/tools\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/tools\/#\/schema\/person\/b5f5fb14828c615d7c81a41d4eb3e261\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"url\":\"https:\/\/elementor.com\/tools\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Free Hex Color Palette Generator","description":"Generate beautiful and effective hex color palettes for your website and brand with our intuitive Hex Color Palette Generator. Easy to use, exportable, and perfect for designers and developers using Elementor.","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:\/\/elementor.com\/tools\/hex-color-palette-generator\/","og_locale":"en_US","og_type":"article","og_title":"Free Hex Color Palette Generator","og_description":"Generate beautiful and effective hex color palettes for your website and brand with our intuitive Hex Color Palette Generator. Easy to use, exportable, and perfect for designers and developers using Elementor.","og_url":"https:\/\/elementor.com\/tools\/hex-color-palette-generator\/","og_site_name":"Tools","article_published_time":"2025-08-22T02:34:50+00:00","article_modified_time":"2025-08-22T02:35:20+00:00","author":"Itamar Haim","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Itamar Haim","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/tools\/hex-color-palette-generator\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/tools\/hex-color-palette-generator\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/tools\/#\/schema\/person\/b5f5fb14828c615d7c81a41d4eb3e261"},"headline":"Hex Color Palette Generator","datePublished":"2025-08-22T02:34:50+00:00","dateModified":"2025-08-22T02:35:20+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/tools\/hex-color-palette-generator\/"},"wordCount":7,"keywords":["Html-Css-tools"],"articleSection":["tools"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/tools\/hex-color-palette-generator\/","url":"https:\/\/elementor.com\/tools\/hex-color-palette-generator\/","name":"Free Hex Color Palette Generator","isPartOf":{"@id":"https:\/\/elementor.com\/tools\/#website"},"datePublished":"2025-08-22T02:34:50+00:00","dateModified":"2025-08-22T02:35:20+00:00","author":{"@id":"https:\/\/elementor.com\/tools\/#\/schema\/person\/b5f5fb14828c615d7c81a41d4eb3e261"},"description":"Generate beautiful and effective hex color palettes for your website and brand with our intuitive Hex Color Palette Generator. Easy to use, exportable, and perfect for designers and developers using Elementor.","breadcrumb":{"@id":"https:\/\/elementor.com\/tools\/hex-color-palette-generator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/tools\/hex-color-palette-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/tools\/hex-color-palette-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/elementor.com\/tools\/"},{"@type":"ListItem","position":2,"name":"Hex Color Palette Generator"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/tools\/#website","url":"https:\/\/elementor.com\/tools\/","name":"Tools","description":"Just another Elementor hosted website ;)","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/tools\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/elementor.com\/tools\/#\/schema\/person\/b5f5fb14828c615d7c81a41d4eb3e261","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"url":"https:\/\/elementor.com\/tools\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/posts\/8309904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/comments?post=8309904"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/posts\/8309904\/revisions"}],"predecessor-version":[{"id":8309908,"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/posts\/8309904\/revisions\/8309908"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/media?parent=8309904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/categories?post=8309904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/tags?post=8309904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}