{"id":6222,"date":"2026-02-01T13:07:47","date_gmt":"2026-02-01T12:07:47","guid":{"rendered":"https:\/\/siite.dk\/?page_id=6222"},"modified":"2026-02-01T13:32:09","modified_gmt":"2026-02-01T12:32:09","slug":"colour-palette-generator","status":"publish","type":"page","link":"https:\/\/siite.dk\/en\/vaerktoj\/farvepalette-generator\/","title":{"rendered":"Colour palette generator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6222\" class=\"elementor elementor-6222\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f8f6420 particle-overlay e-flex e-con-boxed e-con e-child\" data-id=\"f8f6420\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-ff663e6 e-con-full e-flex e-con e-child\" data-id=\"ff663e6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-acb1793 elementor-widget elementor-widget-sp-breadcrumbs\" data-id=\"acb1793\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"sp-breadcrumbs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<nav  aria-label=\"breadcrumb\"><ol class=\"breadcrumb\"><li class=\"breadcrumb-item active\" aria-current=\"page\"><span>Forside<\/span><\/li><\/ol><\/nav>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7846d4b elementor-widget__width-auto elementor-widget-mobile__width-inherit elementor-widget-tablet__width-auto elementor-widget elementor-widget-heading\" data-id=\"7846d4b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation_delay&quot;:&quot;200&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Gratis farvepalette generator<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-21a4c54 elementor-widget__width-auto elementor-widget-mobile__width-inherit elementor-widget-tablet__width-auto elementor-widget elementor-widget-text-editor\" data-id=\"21a4c54\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation_delay&quot;:&quot;200&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p dir=\"auto\">Skab professionelle og harmoniske farvekombinationer til dit n\u00e6ste projekt. Uanset om du designer en hjemmeside eller et logo, hj\u00e6lper vores v\u00e6rkt\u00f8j dig med at finde de perfekte farver p\u00e5 f\u00e5 sekunder.<\/p>\t\t\t\t\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<div class=\"elementor-element elementor-element-30b5a4d e-flex e-con-boxed e-con e-parent\" data-id=\"30b5a4d\" 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-83b751a elementor-widget elementor-widget-html\" data-id=\"83b751a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* CSS Variabler og overordnet styling *\/\n.siite-color-container {\n    font-family: inherit;\n    color: #111827;\n    margin: 0 auto;\n    max-width: 1200px;\n    line-height: 1.5;\n}\n\n.siite-grid {\n    display: grid;\n    grid-template-columns: 1fr 1.2fr;\n    gap: 30px;\n    align-items: start;\n    margin-bottom: 40px;\n}\n\n\/* Form Side Styling *\/\n.siite-section {\n    background: #f9fafb;\n    padding: 24px;\n    border-radius: 12px;\n    border: 1px solid #e5e7eb;\n}\n\n.siite-section h4 {\n    margin-top: 0;\n    margin-bottom: 8px;\n    font-weight: 700;\n    color: #111827;\n}\n\n.siite-group { margin-bottom: 25px; }\n\n.siite-group label {\n    display: block;\n    font-size: 13px;\n    font-weight: 600;\n    color: #4b5563;\n    margin-bottom: 8px;\n}\n\n\/* Color Input Wrapper *\/\n.siite-color-input-wrapper {\n    display: flex;\n    gap: 12px;\n    margin-bottom: 20px;\n}\n\n.siite-input-color {\n    width: 60px;\n    height: 60px;\n    border: 2px solid #fff;\n    border-radius: 8px;\n    padding: 0;\n    cursor: pointer;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.siite-input-text {\n    flex: 1;\n    padding: 12px;\n    border: 1px solid #d1d5db;\n    border-radius: 8px;\n    font-size: 16px;\n    text-transform: uppercase;\n}\n\n\/* Preset Colors *\/\n.siite-presets {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));\n    gap: 10px;\n    margin-top: 15px;\n}\n\n.siite-preset-btn {\n    border: 1px solid #e5e7eb;\n    background: white;\n    padding: 8px;\n    border-radius: 6px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 11px;\n    font-weight: 600;\n    transition: all 0.2s;\n}\n\n.siite-preset-btn:hover { background: #f3f4f6; }\n.siite-preset-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }\n\n\/* Palette Preview Side *\/\n.siite-palette-card {\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 12px;\n    padding: 24px;\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\n    position: sticky;\n    top: 20px;\n}\n\n.siite-palette-card h3 { margin-top: 0; font-size: 18px; margin-bottom: 20px; }\n.siite-palette-row { margin-bottom: 24px; }\n.siite-palette-label { font-size: 13px; font-weight: 700; margin-bottom: 8px; display: block; color: #6b7280; }\n.siite-swatch-container { display: flex; gap: 6px; }\n\n.siite-swatch {\n    flex: 1;\n    height: 80px;\n    border-radius: 6px;\n    display: flex;\n    align-items: flex-end;\n    padding: 6px;\n    color: white;\n    font-size: 9px;\n    cursor: pointer;\n    transition: transform 0.2s;\n    border: 1px solid rgba(0,0,0,0.05);\n}\n\n.siite-swatch:hover { transform: scale(1.03); z-index: 5; }\n.siite-swatch span { background: rgba(0,0,0,0.4); padding: 2px 4px; border-radius: 3px; }\n\n\/* Knowledge Base Styling *\/\n.siite-kb-section { \n    margin-top: 40px; \n    padding-top: 40px; \n    border-top: 2px solid #f3f4f6; \n}\n\n.siite-kb-grid {\n    display: grid;\n    grid-template-columns: 1.5fr 1fr;\n    gap: 40px;\n}\n\n.siite-kb-title {\n    font-size: 22px;\n    font-weight: 700;\n    color: #111827;\n    margin-bottom: 20px;\n    display: block;\n    border-bottom: 3px solid #f44c2e;\n    width: fit-content;\n    padding-bottom: 4px;\n}\n\n.siite-theory-box {\n    margin-bottom: 30px;\n}\n\n.siite-theory-box h5 {\n    font-size: 16px;\n    margin-bottom: 10px;\n    color: #111827;\n}\n\n.siite-theory-item {\n    background: #fff;\n    padding: 15px;\n    border-radius: 8px;\n    border-left: 4px solid #f44c2e;\n    margin-bottom: 15px;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n}\n\n.siite-theory-item strong { display: block; color: #111827; margin-bottom: 4px; }\n.siite-theory-item p { font-size: 14px; margin: 0; color: #4b5563; }\n\n.siite-sidebar-box {\n    background: #f9fafb;\n    padding: 25px;\n    border-radius: 12px;\n    border: 1px solid #e5e7eb;\n}\n\n.siite-checklist { list-style: none; padding: 0; margin: 0; }\n.siite-checklist li {\n    font-size: 14px;\n    color: #374151;\n    margin-bottom: 15px;\n    display: flex;\n    gap: 12px;\n}\n.siite-checklist li b { color: #111827; display: block; margin-bottom: 2px; }\n.siite-icon-check { color: #f44c2e; font-weight: bold; }\n\n@media (max-width: 900px) {\n    .siite-grid, .siite-kb-grid { grid-template-columns: 1fr; gap: 30px; }\n    .siite-palette-card { position: static; }\n}\n<\/style>\n\n<div class=\"siite-color-container\">\n    <div class=\"siite-grid\">\n        <!-- INPUT SIDE -->\n        <div class=\"siite-form-side\">\n            <div class=\"siite-section\">\n                <h4>Opret farvepaletter nemt og enkelt<\/h4>\n                <p style=\"font-size:14px; color:#6b7280; margin-bottom:20px;\">V\u00e6lg en farve for at se harmoniske kombinationer.<\/p>\n                <div class=\"siite-group\">\n                    <label>Grundfarve (HEX)<\/label>\n                    <div class=\"siite-color-input-wrapper\">\n                        <input type=\"color\" id=\"siite-base-color\" class=\"siite-input-color\" value=\"#0c5586\">\n                        <input type=\"text\" id=\"siite-hex-text\" class=\"siite-input-text\" value=\"#0C5586\" maxlength=\"7\">\n                    <\/div>\n                    \n                    <label>Popul\u00e6re valg & betydning<\/label>\n                    <div class=\"siite-presets\">\n                        <button class=\"siite-preset-btn\" onclick=\"setPreset('#0C5586', 'Professionel & Tillid')\">\n                            <span class=\"siite-preset-dot\" style=\"background:#0C5586\"><\/span> Bl\u00e5\n                        <\/button>\n                        <button class=\"siite-preset-btn\" onclick=\"setPreset('#22C55E', 'V\u00e6kst & Natur')\">\n                            <span class=\"siite-preset-dot\" style=\"background:#22C55E\"><\/span> Gr\u00f8n\n                        <\/button>\n                        <button class=\"siite-preset-btn\" onclick=\"setPreset('#F44C2E', 'Energi & Handling')\">\n                            <span class=\"siite-preset-dot\" style=\"background:#F44C2E\"><\/span> R\u00f8d\n                        <\/button>\n                        <button class=\"siite-preset-btn\" onclick=\"setPreset('#FACC15', 'Optimisme & Varme')\">\n                            <span class=\"siite-preset-dot\" style=\"background:#FACC15\"><\/span> Gul\n                        <\/button>\n                    <\/div>\n                    <p id=\"siite-meaning-text\" style=\"font-size:12px; color:#6b7280; margin-top:10px; font-style:italic;\">Betydning: Professionel & Tillid<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- PREVIEW SIDE -->\n        <div class=\"siite-preview-side\">\n            <div class=\"siite-palette-card\">\n                <h3>Din genererede palette<\/h3>\n                \n                <div class=\"siite-palette-row\">\n                    <span class=\"siite-palette-label\">Monokromatisk (Nuancer)<\/span>\n                    <div id=\"siite-mono-swatches\" class=\"siite-swatch-container\"><\/div>\n                <\/div>\n\n                <div class=\"siite-palette-row\">\n                    <span class=\"siite-palette-label\">Analog (Harmonisk)<\/span>\n                    <div id=\"siite-analog-swatches\" class=\"siite-swatch-container\"><\/div>\n                <\/div>\n\n                <div class=\"siite-palette-row\">\n                    <span class=\"siite-palette-label\">Kontrast & Dynamik<\/span>\n                    <div id=\"siite-comp-swatches\" class=\"siite-swatch-container\"><\/div>\n                <\/div>\n\n                <p style=\"font-size:11px; text-align:center; color:#9ca3af;\">Tip: Klik p\u00e5 en farve for at kopiere koden<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- KNOWLEDGE BASE -->\n    <div class=\"siite-kb-section\">\n        <span class=\"siite-kb-title\">Forst\u00e5 din farvepalette<\/span>\n        \n        <div class=\"siite-kb-grid\">\n            <div class=\"siite-kb-content\">\n                <div class=\"siite-theory-box\">\n                    <h5>Hvad betyder de forskellige typer?<\/h5>\n                    \n                    <div class=\"siite-theory-item\">\n                        <strong>Monokromatisk<\/strong>\n                        <p>Dette er forskellige toner og nuancer af den samme farve. Det skaber et meget rent, poleret og minimalistisk look, der aldrig virker overv\u00e6ldende.<\/p>\n                    <\/div>\n\n                    <div class=\"siite-theory-item\">\n                        <strong>Analog (Harmonisk)<\/strong>\n                        <p>Farver der ligger ved siden af hinanden p\u00e5 farvehjulet. De findes ofte i naturen og f\u00f8les behagelige og rolige for \u00f8jet, da de har en naturlig sammenh\u00e6ng.<\/p>\n                    <\/div>\n\n                    <div class=\"siite-theory-item\">\n                        <strong>Kontrast & Dynamik<\/strong>\n                        <p>Her bruges komplement\u00e6rfarver (modsat hinanden). Det skaber h\u00f8j energi og f\u00e5r specifikke elementer, som knapper eller tilbud, til at \"poppe\" og fange opm\u00e6rksomheden.<\/p>\n                    <\/div>\n                <\/div>\n\n                <h5>Hvilken farve passer til din virksomhed?<\/h5>\n                <p class=\"siite-kb-text\" style=\"font-size: 14px;\">\n                    Farvevalget b\u00f8r afspejle din branche og de f\u00f8lelser, du vil v\u00e6kke hos kunden:\n                    <br><br>\n                    \u2022 <strong>Servicevirksomheder (Konsulenter, IT, Advokater):<\/strong> Her dominerer <strong>Bl\u00e5<\/strong>, da det udstr\u00e5ler stabilitet, logik og professionalisme.\n                    <br><br>\n                    \u2022 <strong>Kreative & Sm\u00e5 virksomheder:<\/strong> <strong>Gul eller Orange<\/strong> virker im\u00f8dekommende og optimistisk. Det signalerer kreativitet og personlig service.\n                    <br><br>\n                    \u2022 <strong>H\u00e5ndv\u00e6rk & Produktion:<\/strong> <strong>R\u00f8d eller M\u00f8rkegr\u00e5<\/strong> sender et signal om styrke, energi og effektivitet.\n                    <br><br>\n                    \u2022 <strong>Wellness & Sundhed:<\/strong> <strong>Gr\u00f8n eller Pastel<\/strong>. Det symboliserer ro, balance og fornyelse.\n                <\/p>\n            <\/div>\n\n            <div class=\"siite-sidebar-box\">\n                <span class=\"siite-kb-title\">Design tips<\/span>\n                <ul class=\"siite-checklist\">\n                    <li>\n                        <span class=\"siite-icon-check\">\u2713<\/span>\n                        <div><b>60-30-10 Reglen<\/b>Brug den neutrale farve (baggrund) p\u00e5 60%, din prim\u00e6re p\u00e5 30% og din kontrastfarve p\u00e5 10% til highlights.<\/div>\n                    <\/li>\n                    <li>\n                        <span class=\"siite-icon-check\">\u2713<\/span>\n                        <div><b>L\u00e6sbarhed f\u00f8rst<\/b>S\u00f8rg altid for at din tekstfarve har en st\u00e6rk kontrast til baggrunden. Brug m\u00f8rk tekst p\u00e5 lys baggrund for bedst l\u00e6sbarhed.<\/div>\n                    <\/li>\n                    <li>\n                        <span class=\"siite-icon-check\">\u2713<\/span>\n                        <div><b>Mindre er mere<\/b>Hold dig til 2-3 hovedfarver. For mange farver kan virke forvirrende og mindske det professionelle udtryk.<\/div>\n                    <\/li>\n                <\/ul>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    const colorPicker = document.getElementById('siite-base-color');\n    const hexInput = document.getElementById('siite-hex-text');\n    const meaningText = document.getElementById('siite-meaning-text');\n\n    window.setPreset = function(hex, meaning) {\n        colorPicker.value = hex;\n        hexInput.value = hex.toUpperCase();\n        meaningText.innerText = \"Betydning: \" + meaning;\n        generatePalettes();\n    };\n\n    function hexToHSL(hex) {\n        let r = parseInt(hex.slice(1, 3), 16) \/ 255;\n        let g = parseInt(hex.slice(3, 5), 16) \/ 255;\n        let b = parseInt(hex.slice(5, 7), 16) \/ 255;\n        let max = Math.max(r, g, b), min = Math.min(r, g, b);\n        let h, s, l = (max + min) \/ 2;\n\n        if (max == min) { h = s = 0; } else {\n            let d = max - min;\n            s = l > 0.5 ? d \/ (2 - max - min) : d \/ (max + min);\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        return { h: h * 360, s: s * 100, l: l * 100 };\n    }\n\n    function hslToHex(h, s, l) {\n        l \/= 100;\n        const a = s * Math.min(l, 1 - l) \/ 100;\n        const f = n => {\n            const k = (n + h \/ 30) % 12;\n            const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n            return Math.round(255 * color).toString(16).padStart(2, '0');\n        };\n        return `#${f(0)}${f(8)}${f(4)}`.toUpperCase();\n    }\n\n    function createSwatch(hex) {\n        const swatch = document.createElement('div');\n        swatch.className = 'siite-swatch';\n        swatch.style.backgroundColor = hex;\n        swatch.innerHTML = `<span>${hex}<\/span>`;\n        swatch.onclick = () => {\n            navigator.clipboard.writeText(hex);\n            const span = swatch.querySelector('span');\n            const old = span.innerText;\n            span.innerText = 'Kopieret!';\n            setTimeout(() => span.innerText = old, 1000);\n        };\n        return swatch;\n    }\n\n    function generatePalettes() {\n        const hex = colorPicker.value;\n        const hsl = hexToHSL(hex);\n        \n        const monoCont = document.getElementById('siite-mono-swatches');\n        const analogCont = document.getElementById('siite-analog-swatches');\n        const compCont = document.getElementById('siite-comp-swatches');\n\n        [monoCont, analogCont, compCont].forEach(c => c.innerHTML = '');\n\n        \/\/ Monochromatic\n        [25, 45, 65, 85].forEach(l => {\n            monoCont.appendChild(createSwatch(hslToHex(hsl.h, hsl.s, l)));\n        });\n\n        \/\/ Analogous\n        [-30, -15, 15, 30].forEach(offset => {\n            analogCont.appendChild(createSwatch(hslToHex((hsl.h + offset + 360) % 360, hsl.s, hsl.l)));\n        });\n\n        \/\/ Complementary & Triadic for Dynamic Look\n        [180, 150, 210, 30].forEach(offset => {\n            compCont.appendChild(createSwatch(hslToHex((hsl.h + offset + 360) % 360, hsl.s, hsl.l)));\n        });\n    }\n\n    colorPicker.oninput = (e) => {\n        hexInput.value = e.target.value.toUpperCase();\n        meaningText.innerText = \"Betydning: Brugerdefineret\";\n        generatePalettes();\n    };\n\n    hexInput.oninput = (e) => {\n        let val = e.target.value;\n        if (val.length === 7 && val.startsWith('#')) {\n            colorPicker.value = val;\n            generatePalettes();\n        }\n    };\n\n    generatePalettes();\n})();\n<\/script>\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>Forside Gratis farvepalette generator Skab professionelle og harmoniske farvekombinationer til dit n\u00e6ste projekt. Uanset om du designer en hjemmeside eller et logo, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":6218,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"Gratis farvepalette generator til harmonisk design","_seopress_titles_desc":"Gratis farvepalette generator til harmoniske farvekombinationer. Find perfekte farver til web og logo p\u00e5 f\u00e5 sekunder.","_seopress_robots_index":"","footnotes":""},"class_list":["post-6222","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/siite.dk\/en\/wp-json\/wp\/v2\/pages\/6222","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/siite.dk\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/siite.dk\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/siite.dk\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/siite.dk\/en\/wp-json\/wp\/v2\/comments?post=6222"}],"version-history":[{"count":11,"href":"https:\/\/siite.dk\/en\/wp-json\/wp\/v2\/pages\/6222\/revisions"}],"predecessor-version":[{"id":6245,"href":"https:\/\/siite.dk\/en\/wp-json\/wp\/v2\/pages\/6222\/revisions\/6245"}],"up":[{"embeddable":true,"href":"https:\/\/siite.dk\/en\/wp-json\/wp\/v2\/pages\/6218"}],"wp:attachment":[{"href":"https:\/\/siite.dk\/en\/wp-json\/wp\/v2\/media?parent=6222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}