Colour Palette Builder \u2014 HOGAI<\/title>\n <meta name=\"description\" content=\"Build your perfect interior colour palette in 4 steps. Get tailored HOGAI recommendations matched to your room, mood, and lighting.\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Raleway:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n <style>\n :root {\n --hogai-black: #000000;\n --hogai-white: #ffffff;\n --hogai-off-white: #f9f9f9;\n --hogai-gray-light: #dddddd;\n --hogai-gray-border: #cccccc;\n --hogai-gray-medium: #999999;\n --hogai-text-primary: #212529;\n --hogai-text-heading: #000000;\n --hogai-accent-orange:#DA6E00;\n --hogai-pink: #D8A0A6;\n --hogai-cobalt: #1440b8;\n --hogai-burgundy: #6e1332;\n --hogai-lavender: #9b8bb4;\n --hogai-sage: #a3b18a;\n --hogai-ecru: #d5c9a1;\n\n --hogai-font-primary: 'Raleway', system-ui, -apple-system, sans-serif;\n --hogai-fw-regular: 400;\n --hogai-fw-semibold: 600;\n --hogai-fw-bold: 700;\n\n --hogai-fs-xs: 10px;\n --hogai-fs-sm: 12px;\n --hogai-fs-base: 15px;\n --hogai-fs-md: 16px;\n --hogai-fs-lg: 18px;\n --hogai-fs-xl: 22px;\n --hogai-fs-3xl: 28px;\n --hogai-fs-5xl: 38px;\n\n --hogai-lh-tight: 1.2;\n --hogai-lh-base: 1.5;\n --hogai-ls-sm: 0.28px;\n --hogai-ls-md: 0.32px;\n --hogai-ls-lg: 0.36px;\n\n --hogai-radius-sm: 4px;\n --hogai-radius-pill: 20px;\n --hogai-shadow-card: 0 2px 8px rgba(0,0,0,0.06);\n --hogai-transition-base: 250ms ease;\n --hogai-transition-fast: 150ms ease;\n }\n\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }\n body {\n font-family: var(--hogai-font-primary);\n font-size: var(--hogai-fs-md);\n font-weight: var(--hogai-fw-regular);\n line-height: var(--hogai-lh-base);\n color: var(--hogai-text-primary);\n background-color: var(--hogai-white);\n }\n img, svg { display: block; max-width: 100%; height: auto; }\n ul { list-style: none; }\n ::selection { background-color: var(--hogai-black); color: var(--hogai-white); }\n :focus-visible { outline: 2px solid var(--hogai-black); outline-offset: 2px; }\n\n \/* \u2500\u2500 LAYOUT \u2500\u2500 *\/\n .hogai-wrap {\n width: 100%;\n max-width: 760px;\n margin-inline: auto;\n padding-inline: 20px;\n }\n\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\n .tool-hero {\n text-align: center;\n margin-bottom: 48px;\n padding-top: 40px;\n }\n .tool-hero h1 {\n font-family: var(--hogai-font-primary);\n font-size: clamp(24px, 5vw, var(--hogai-fs-5xl));\n font-weight: var(--hogai-fw-regular);\n text-transform: uppercase;\n line-height: var(--hogai-lh-tight);\n color: var(--hogai-text-heading);\n margin-bottom: 16px;\n }\n .tool-hero__dots {\n display: inline-flex;\n gap: 6px;\n margin-bottom: 20px;\n }\n .tool-hero__dots span {\n display: block;\n width: 6px; height: 6px;\n border-radius: 50%;\n background-color: var(--hogai-gray-light);\n transition: background-color var(--hogai-transition-base);\n }\n .tool-hero__dots span.active { background-color: var(--hogai-black); }\n\n \/* \u2500\u2500 BRAND INTRO \u2500\u2500 *\/\n .brand-intro { margin-bottom: 36px; }\n .brand-intro__lead {\n font-size: var(--hogai-fs-base);\n line-height: 1.7;\n color: var(--hogai-text-primary);\n margin-bottom: 24px;\n }\n .brand-intro__lead strong {\n color: var(--hogai-black);\n font-weight: var(--hogai-fw-bold);\n }\n .color-categories {\n display: flex;\n flex-direction: column;\n gap: 0;\n border: 1px solid var(--hogai-gray-light);\n border-radius: var(--hogai-radius-sm);\n overflow: hidden;\n margin-bottom: 28px;\n }\n .color-cat {\n display: flex;\n flex-wrap: wrap;\n border-bottom: 1px solid var(--hogai-gray-light);\n background-color: var(--hogai-off-white);\n }\n .color-cat:last-child { border-bottom: none; }\n .color-cat__meta {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 14px 16px;\n border-right: 1px solid var(--hogai-gray-light);\n min-width: 220px;\n }\n .color-cat__tag {\n display: inline-block;\n font-size: 9px;\n text-transform: uppercase;\n letter-spacing: 1.2px;\n font-weight: 600;\n color: var(--hogai-white);\n padding: 2px 8px;\n border-radius: var(--hogai-radius-pill);\n white-space: nowrap;\n flex-shrink: 0;\n }\n .color-cat__tag--dopamine { background-color: #DA6E00; }\n .color-cat__tag--deep { background-color: #1a1a1a; }\n .color-cat__tag--pastel { background-color: #9b8bb4; }\n .color-cat__title {\n font-size: var(--hogai-fs-sm);\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: var(--hogai-ls-md);\n color: var(--hogai-black);\n white-space: nowrap;\n }\n .color-cat__swatches {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n gap: 14px;\n padding: 14px 20px;\n align-items: flex-start;\n }\n .color-chip {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 5px;\n width: 58px;\n }\n .color-chip__dot {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,0.08);\n flex-shrink: 0;\n }\n .color-chip__name {\n font-size: 9px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--hogai-gray-medium);\n text-align: center;\n line-height: 1.3;\n word-break: break-word;\n }\n @media (max-width: 640px) {\n .color-cat { flex-direction: column; }\n .color-cat__meta { border-right: none; border-bottom: 1px solid var(--hogai-gray-light); }\n .color-chip__dot { width: 30px; height: 30px; }\n }\n\n .brand-intro__cta-hint {\n font-size: var(--hogai-fs-base);\n color: var(--hogai-gray-medium);\n margin-bottom: 0;\n }\n\n \/* \u2500\u2500 FORM \u2500\u2500 *\/\n .palette-form {\n display: flex;\n flex-direction: column;\n gap: 32px;\n margin-bottom: 48px;\n }\n .form-field { display: flex; flex-direction: column; gap: 8px; }\n .form-field__label {\n font-size: var(--hogai-fs-sm);\n font-weight: var(--hogai-fw-bold);\n text-transform: uppercase;\n letter-spacing: var(--hogai-ls-md);\n color: var(--hogai-black);\n }\n .form-field__helper {\n font-size: var(--hogai-fs-sm);\n color: var(--hogai-gray-medium);\n margin-top: -4px;\n }\n\n .option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }\n .option-grid--wall { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }\n\n .option-card input[type=\"radio\"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }\n .option-card label {\n display: flex; flex-direction: column; align-items: center; gap: 8px;\n padding: 14px 10px; height: 100%;\n border: 1px solid var(--hogai-gray-border);\n border-radius: var(--hogai-radius-sm);\n cursor: pointer;\n transition: border-color var(--hogai-transition-base), background-color var(--hogai-transition-base);\n text-align: center;\n user-select: none;\n }\n .option-card label:hover { border-color: var(--hogai-black); }\n .option-card input[type=\"radio\"]:checked + label { border-color: var(--hogai-black); background-color: var(--hogai-off-white); }\n .option-card input[type=\"radio\"]:focus-visible + label { outline: 2px solid var(--hogai-black); outline-offset: 2px; }\n .option-card__swatch { width: 32px; height: 32px; border-radius: var(--hogai-radius-sm); border: 1px solid rgba(0,0,0,0.08); flex-shrink: 0; }\n .option-card__text { font-size: var(--hogai-fs-sm); text-transform: uppercase; letter-spacing: var(--hogai-ls-md); color: var(--hogai-black); line-height: 1.3; }\n .option-card__sub { font-size: 11px; color: var(--hogai-gray-medium); text-transform: none; letter-spacing: 0; margin-top: -4px; }\n\n \/* Range *\/\n .range-row { display: flex; align-items: center; gap: 12px; }\n .range-row input[type=\"range\"] {\n flex: 1; -webkit-appearance: none; height: 2px;\n background: var(--hogai-gray-light); border-radius: 1px; outline: none; cursor: pointer;\n }\n .range-row input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none; width: 18px; height: 18px;\n border-radius: 50%; background: var(--hogai-black); cursor: pointer;\n transition: transform var(--hogai-transition-fast);\n }\n .range-row input[type=\"range\"]::-webkit-slider-thumb:hover { transform: scale(1.2); }\n .range-row input[type=\"range\"]::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: 50%; background: var(--hogai-black); cursor: pointer; }\n .range-row input[type=\"range\"]:focus-visible { outline: 2px solid var(--hogai-black); outline-offset: 4px; }\n .range-label { font-size: var(--hogai-fs-sm); color: var(--hogai-gray-medium); white-space: nowrap; min-width: 80px; text-align: right; }\n\n .btn-build {\n display: block; width: 100%; padding: 14px 20px;\n font-family: var(--hogai-font-primary); font-size: var(--hogai-fs-md);\n font-weight: var(--hogai-fw-regular); text-transform: uppercase;\n letter-spacing: var(--hogai-ls-lg); color: var(--hogai-white);\n background-color: var(--hogai-black); border: 1px solid var(--hogai-black);\n border-radius: var(--hogai-radius-sm); cursor: pointer;\n transition: background-color var(--hogai-transition-base); text-align: center;\n }\n .btn-build:hover { background-color: #333; }\n\n .field-error { display: none; font-size: var(--hogai-fs-sm); color: #c0392b; margin-top: 4px; }\n .field-error.visible { display: block; }\n\n \/* \u2500\u2500 RESULTS \u2500\u2500 *\/\n #results { display: none; margin-bottom: 40px; }\n #results.visible { display: block; }\n .results-divider { border: none; border-top: 1px solid var(--hogai-gray-light); margin-bottom: 40px; }\n .results-heading { font-family: var(--hogai-font-primary); font-size: var(--hogai-fs-xl); font-weight: var(--hogai-fw-regular); text-transform: uppercase; color: var(--hogai-text-heading); margin-bottom: 6px; }\n .results-sub { font-size: var(--hogai-fs-base); color: var(--hogai-gray-medium); margin-bottom: 32px; }\n\n .palette-strip { display: flex; height: 80px; border-radius: var(--hogai-radius-sm); overflow: hidden; margin-bottom: 32px; box-shadow: var(--hogai-shadow-card); }\n .palette-strip__block { flex: 1; }\n\n .colour-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; }\n .colour-card { border: 1px solid var(--hogai-gray-light); border-radius: var(--hogai-radius-sm); overflow: hidden; }\n .colour-card__swatch { height: 80px; width: 100%; }\n .colour-card__body { padding: 14px; }\n .colour-card__role { font-size: var(--hogai-fs-xs); text-transform: uppercase; letter-spacing: 1.5px; color: var(--hogai-gray-medium); margin-bottom: 4px; }\n .colour-card__name { font-size: var(--hogai-fs-base); font-weight: var(--hogai-fw-bold); text-transform: uppercase; color: var(--hogai-black); margin-bottom: 6px; }\n .colour-card__product { font-size: var(--hogai-fs-sm); color: var(--hogai-text-primary); line-height: 1.4; }\n .colour-card__hex { display: inline-block; margin-top: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--hogai-gray-medium); padding: 2px 6px; border: 1px solid var(--hogai-gray-light); border-radius: var(--hogai-radius-pill); }\n\n .rationale-box { padding: 20px; background-color: var(--hogai-off-white); border-left: 3px solid var(--hogai-black); margin-bottom: 20px; }\n .rationale-box p { font-size: var(--hogai-fs-base); line-height: var(--hogai-lh-base); color: var(--hogai-text-primary); }\n\n .lighting-note { display: none; align-items: flex-start; gap: 10px; padding: 14px 16px; background-color: #fff8f0; border: 1px solid #ffe0c0; border-radius: var(--hogai-radius-sm); margin-bottom: 32px; font-size: var(--hogai-fs-sm); color: var(--hogai-text-primary); line-height: 1.5; }\n .lighting-note.visible { display: flex; }\n .lighting-note__icon { flex-shrink: 0; font-size: 18px; }\n\n \/* \u2500\u2500 PRODUCT SHOWCASE \u2500\u2500 *\/\n .product-showcase { margin-bottom: 48px; }\n .products-heading { font-family: var(--hogai-font-primary); font-size: var(--hogai-fs-xl); font-weight: var(--hogai-fw-regular); text-transform: uppercase; color: var(--hogai-text-heading); margin-bottom: 6px; }\n .products-sub { font-size: var(--hogai-fs-base); color: var(--hogai-gray-medium); margin-bottom: 24px; }\n\n .product-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }\n\n .prod-card { display: flex; flex-direction: column; border: 1px solid var(--hogai-gray-light); border-radius: var(--hogai-radius-sm); overflow: hidden; transition: box-shadow var(--hogai-transition-base); text-decoration: none; color: inherit; }\n .prod-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }\n .prod-card__img-wrap { aspect-ratio: 1 \/ 1; overflow: hidden; background-color: var(--hogai-off-white); }\n .prod-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--hogai-transition-base); }\n .prod-card:hover .prod-card__img-wrap img { transform: scale(1.03); }\n .prod-card__body { padding: 14px; display: flex; flex-direction: column; flex: 1; }\n .prod-card__type { font-size: var(--hogai-fs-xs); text-transform: uppercase; letter-spacing: 1.5px; color: var(--hogai-gray-medium); margin-bottom: 4px; }\n .prod-card__name { font-size: var(--hogai-fs-base); font-weight: var(--hogai-fw-regular); text-transform: uppercase; color: var(--hogai-black); margin-bottom: 8px; line-height: 1.3; flex: 1; }\n .prod-card__price { font-size: var(--hogai-fs-base); font-weight: var(--hogai-fw-bold); color: var(--hogai-black); margin-bottom: 12px; }\n .prod-card__link { display: inline-block; font-size: var(--hogai-fs-sm); text-transform: uppercase; letter-spacing: var(--hogai-ls-md); color: var(--hogai-black); text-decoration: none; border-bottom: 1px solid var(--hogai-black); padding-bottom: 2px; transition: opacity var(--hogai-transition-fast); align-self: flex-start; }\n .prod-card:hover .prod-card__link { opacity: 0.6; }\n .products-note { font-size: var(--hogai-fs-sm); color: var(--hogai-gray-medium); text-align: center; margin-top: 16px; }\n\n \/* \u2500\u2500 CTA \u2500\u2500 *\/\n #cta { display: none; padding: 40px 32px; background-color: #e6e6e6; border-radius: var(--hogai-radius-sm); text-align: center; margin-bottom: 64px; }\n #cta.visible { display: block; }\n .cta__eyebrow { font-size: var(--hogai-fs-sm); text-transform: uppercase; letter-spacing: 2px; color: rgba(0,0,0,0.5); margin-bottom: 12px; }\n .cta__heading { font-family: var(--hogai-font-primary); font-size: clamp(20px, 4vw, var(--hogai-fs-3xl)); font-weight: var(--hogai-fw-regular); text-transform: uppercase; color: var(--hogai-black); margin-bottom: 12px; line-height: var(--hogai-lh-tight); }\n .cta__sub { font-size: var(--hogai-fs-base); color: rgba(0,0,0,0.65); margin-bottom: 28px; max-width: 460px; margin-inline: auto; }\n .btn-cta { display: inline-block; padding: 14px 32px; font-family: var(--hogai-font-primary); font-size: var(--hogai-fs-md); font-weight: var(--hogai-fw-regular); text-transform: uppercase; letter-spacing: var(--hogai-ls-lg); color: var(--hogai-white); background-color: var(--hogai-black); border: 1px solid var(--hogai-black); border-radius: var(--hogai-radius-sm); cursor: pointer; text-decoration: none; transition: background-color var(--hogai-transition-base), color var(--hogai-transition-base); }\n .btn-cta:hover { background-color: transparent; color: var(--hogai-black); }\n .cta__phone { margin-top: 20px; margin-bottom: 4px; font-size: var(--hogai-fs-base); color: rgba(0,0,0,0.75); }\n .cta__trust { margin-top: 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(0,0,0,0.35); }\n .reset-link { display: block; text-align: center; margin-top: 16px; font-size: var(--hogai-fs-sm); color: rgba(0,0,0,0.5); text-decoration: underline; cursor: pointer; background: none; border: none; font-family: var(--hogai-font-primary); }\n .reset-link:hover { color: var(--hogai-black); }\n\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n @media (max-width: 600px) {\n .option-grid { grid-template-columns: repeat(2, 1fr); }\n .option-grid--wall { grid-template-columns: repeat(3, 1fr); }\n .colour-cards { grid-template-columns: 1fr; }\n .product-grid-3 { grid-template-columns: 1fr; }\n #cta { padding: 28px 20px; }\n }\n @media (min-width: 601px) and (max-width: 860px) {\n .product-grid-3 { grid-template-columns: repeat(2, 1fr); }\n }\n @media (max-width: 380px) {\n .option-grid--wall { grid-template-columns: repeat(2, 1fr); }\n }\n\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(12px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .anim-fade-up { animation: fadeUp 0.4s ease both; }\n <\/style>\n<\/head>\n<body>\n\n<main id=\"main-content\">\n <div class=\"hogai-wrap\">\n\n \n <section class=\"tool-hero\" aria-labelledby=\"tool-title\">\n <div class=\"tool-hero__dots\" aria-hidden=\"true\">\n <span class=\"active\" id=\"dot-1\"><\/span>\n <span id=\"dot-2\"><\/span>\n <span id=\"dot-3\"><\/span>\n <span id=\"dot-4\"><\/span>\n <\/div>\n <h1 id=\"tool-title\">Build Your Colour Palette<\/h1>\n <\/section>\n\n \n <section class=\"brand-intro\" aria-label=\"About HOGAI colours\">\n <p class=\"brand-intro__lead\">\n Every HOGAI furniture piece and textile exists in <strong>12 carefully considered colours<\/strong> \u2014 none accidental, every one intentional. Inspired simultaneously by the minimalist discipline of the Bauhaus and the energy of Memphis pattern, these colours are not a backdrop. They are <strong>a design tool<\/strong>: each carries its own emotion, its own role, and its own place in an interior composition.\n <\/p>\n\n <div class=\"color-categories\" role=\"list\" aria-label=\"Three HOGAI colour categories\">\n\n \n <div class=\"color-cat\" role=\"listitem\">\n <div class=\"color-cat__meta\">\n <span class=\"color-cat__tag color-cat__tag--dopamine\">Dopamine Colors<\/span>\n <h3 class=\"color-cat__title\">Energetic<\/h3>\n <\/div>\n <div class=\"color-cat__swatches\" aria-label=\"Energetic colours: Cobalt Love, Orange Joy, Red Light\">\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#1440b8;\" title=\"Cobalt Love\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Cobalt Love<\/span>\n <\/div>\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#DA6E00;\" title=\"Orange Joy\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Orange Joy<\/span>\n <\/div>\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#e0281a;\" title=\"Red Light\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Red Light<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"color-cat\" role=\"listitem\">\n <div class=\"color-cat__meta\">\n <span class=\"color-cat__tag color-cat__tag--deep\">Deep Shades<\/span>\n <h3 class=\"color-cat__title\">Deep<\/h3>\n <\/div>\n <div class=\"color-cat__swatches\" aria-label=\"Deep colours: Burgundy Star, Green Bottle, Blue Jeans, Black Night\">\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#6e1332;\" title=\"Burgundy Star\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Burgundy Star<\/span>\n <\/div>\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#375e30;\" title=\"Green Bottle\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Green Bottle<\/span>\n <\/div>\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#2a5fa5;\" title=\"Blue Jeans\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Blue Jeans<\/span>\n <\/div>\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#000000;\" title=\"Black Night\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Black Night<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"color-cat\" role=\"listitem\">\n <div class=\"color-cat__meta\">\n <span class=\"color-cat__tag color-cat__tag--pastel\">Pastels<\/span>\n <h3 class=\"color-cat__title\">Soft & Subtle<\/h3>\n <\/div>\n <div class=\"color-cat__swatches\" aria-label=\"Pastel colours: Pink Power, Baby Blue, Grey Flow, Dusty Sage, Ecru Lady\">\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#D8A0A6;\" title=\"Pink Power\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Pink Power<\/span>\n <\/div>\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#8ab4cc;\" title=\"Baby Blue\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Baby Blue<\/span>\n <\/div>\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#9ea3b0;\" title=\"Grey Flow\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Grey Flow<\/span>\n <\/div>\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#a3b18a;\" title=\"Dusty Sage\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Dusty Sage<\/span>\n <\/div>\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#d5c9a1;\" title=\"Ecru Lady\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Ecru Lady<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n <p class=\"brand-intro__cta-hint\">Answer 4 questions. Get a custom 3-colour HOGAI palette \u2014 with product suggestions for your interior.<\/p>\n <\/section>\n\n \n <form class=\"palette-form\" id=\"palette-form\" novalidate aria-label=\"Colour palette builder\" onsubmit=\"return false;\">\n\n \n <fieldset class=\"form-field\">\n <legend class=\"form-field__label\" id=\"wall-legend\">1. What’s the dominant tone of your walls or floor?<\/legend>\n <p class=\"form-field__helper\" id=\"wall-helper\">Choose the colour that covers the most surface in your room.<\/p>\n <div class=\"option-grid option-grid--wall\" role=\"group\" aria-labelledby=\"wall-legend\" aria-describedby=\"wall-helper\">\n <div class=\"option-card\">\n <input type=\"radio\" name=\"wall\" id=\"wall-white\" value=\"white\" aria-label=\"Pure white\">\n <label for=\"wall-white\"><span class=\"option-card__swatch\" style=\"background:#ffffff;border-color:#ddd;\" aria-hidden=\"true\"><\/span><span class=\"option-card__text\">White<\/span><\/label>\n <\/div>\n <div class=\"option-card\">\n <input type=\"radio\" name=\"wall\" id=\"wall-offwhite\" value=\"offwhite\" aria-label=\"Cream \/ off-white\">\n <label for=\"wall-offwhite\"><span class=\"option-card__swatch\" style=\"background:#f5f0e8;\" aria-hidden=\"true\"><\/span><span class=\"option-card__text\">Cream<\/span><\/label>\n <\/div>\n <div class=\"option-card\">\n <input type=\"radio\" name=\"wall\" id=\"wall-lightgrey\" value=\"lightgrey\" aria-label=\"Light grey\">\n <label for=\"wall-lightgrey\"><span class=\"option-card__swatch\" style=\"background:#c8c8c8;\" aria-hidden=\"true\"><\/span><span class=\"option-card__text\">Light Grey<\/span><\/label>\n <\/div>\n <div class=\"option-card\">\n <input type=\"radio\" name=\"wall\" id=\"wall-beige\" value=\"beige\" aria-label=\"Warm beige\">\n <label for=\"wall-beige\"><span class=\"option-card__swatch\" style=\"background:#c5a880;\" aria-hidden=\"true\"><\/span><span class=\"option-card__text\">Warm Beige<\/span><\/label>\n <\/div>\n <div class=\"option-card\">\n <input type=\"radio\" name=\"wall\" id=\"wall-dark\" value=\"dark\" aria-label=\"Dark or charcoal\">\n <label for=\"wall-dark\"><span class=\"option-card__swatch\" style=\"background:#333333;\" aria-hidden=\"true\"><\/span><span class=\"option-card__text\">Dark \/ Charcoal<\/span><\/label>\n <\/div>\n <div class=\"option-card\">\n <input type=\"radio\" name=\"wall\" id=\"wall-wood\" value=\"wood\" aria-label=\"Natural wood\">\n <label for=\"wall-wood\"><span class=\"option-card__swatch\" style=\"background:#a0714f;\" aria-hidden=\"true\"><\/span><span class=\"option-card__text\">Natural Wood<\/span><\/label>\n <\/div>\n <\/div>\n <span class=\"field-error\" id=\"wall-error\" role=\"alert\" aria-live=\"assertive\">Please choose a wall tone to continue.<\/span>\n <\/fieldset>\n\n \n <fieldset class=\"form-field\">\n <legend class=\"form-field__label\" id=\"mood-legend\">2. What feeling should your room give off?<\/legend>\n <p class=\"form-field__helper\" id=\"mood-helper\">Think of the first word your guest should feel walking in.<\/p>\n <div class=\"option-grid\" role=\"group\" aria-labelledby=\"mood-legend\" aria-describedby=\"mood-helper\">\n <div class=\"option-card\">\n <input type=\"radio\" name=\"mood\" id=\"mood-energetic\" value=\"energetic\" aria-label=\"Energetic \u2014 bold, vibrant\">\n <label for=\"mood-energetic\"><span style=\"font-size:22px;\" aria-hidden=\"true\">\u26a1<\/span><span class=\"option-card__text\">Energetic<\/span><span class=\"option-card__sub\">Bold, vibrant<\/span><\/label>\n <\/div>\n <div class=\"option-card\">\n <input type=\"radio\" name=\"mood\" id=\"mood-calm\" value=\"calm\" aria-label=\"Calm \u2014 soft, soothing\">\n <label for=\"mood-calm\"><span style=\"font-size:22px;\" aria-hidden=\"true\">\ud83c\udf3f<\/span><span class=\"option-card__text\">Calm<\/span><span class=\"option-card__sub\">Soft, soothing<\/span><\/label>\n <\/div>\n <div class=\"option-card\">\n <input type=\"radio\" name=\"mood\" id=\"mood-dramatic\" value=\"dramatic\" aria-label=\"Dramatic \u2014 intense, expressive\">\n <label for=\"mood-dramatic\"><span style=\"font-size:22px;\" aria-hidden=\"true\">\ud83c\udfad<\/span><span class=\"option-card__text\">Dramatic<\/span><span class=\"option-card__sub\">Intense, expressive<\/span><\/label>\n <\/div>\n <div class=\"option-card\">\n <input type=\"radio\" name=\"mood\" id=\"mood-playful\" value=\"playful\" aria-label=\"Playful \u2014 joyful, expressive\">\n <label for=\"mood-playful\"><span style=\"font-size:22px;\" aria-hidden=\"true\">\ud83c\udfa8<\/span><span class=\"option-card__text\">Playful<\/span><span class=\"option-card__sub\">Joyful, expressive<\/span><\/label>\n <\/div>\n <\/div>\n <span class=\"field-error\" id=\"mood-error\" role=\"alert\" aria-live=\"assertive\">Please choose a mood to continue.<\/span>\n <\/fieldset>\n\n \n <div class=\"form-field\">\n <label class=\"form-field__label\" for=\"pieces-range\" id=\"pieces-label\">3. How many HOGAI accent pieces are you planning?<\/label>\n <p class=\"form-field__helper\" id=\"pieces-helper\">One bold piece makes a statement. Three let you tell the full story.<\/p>\n <div class=\"range-row\">\n <input type=\"range\" id=\"pieces-range\" name=\"pieces\" min=\"1\" max=\"3\" step=\"1\" value=\"2\"\n aria-labelledby=\"pieces-label\" aria-describedby=\"pieces-helper pieces-value-label\"\n aria-valuemin=\"1\" aria-valuemax=\"3\" aria-valuenow=\"2\" aria-valuetext=\"2 pieces\"\n oninput=\"updatePiecesLabel(this)\">\n <span class=\"range-label\" id=\"pieces-value-label\" aria-live=\"polite\">2 pieces<\/span>\n <\/div>\n <\/div>\n\n \n <fieldset class=\"form-field\">\n <legend class=\"form-field__label\" id=\"lighting-legend\">4. What’s the main light source in this room?<\/legend>\n <p class=\"form-field__helper\" id=\"lighting-helper\">Colours read differently in warm artificial light than in natural daylight.<\/p>\n <div class=\"option-grid\" role=\"group\" aria-labelledby=\"lighting-legend\" aria-describedby=\"lighting-helper\">\n <div class=\"option-card\">\n <input type=\"radio\" name=\"lighting\" id=\"lighting-natural\" value=\"natural\" aria-label=\"Mainly natural daylight\">\n <label for=\"lighting-natural\"><span style=\"font-size:22px;\" aria-hidden=\"true\">\u2600\ufe0f<\/span><span class=\"option-card__text\">Natural<\/span><span class=\"option-card__sub\">Mostly daylight<\/span><\/label>\n <\/div>\n <div class=\"option-card\">\n <input type=\"radio\" name=\"lighting\" id=\"lighting-artificial\" value=\"artificial\" aria-label=\"Mainly artificial warm bulbs\">\n <label for=\"lighting-artificial\"><span style=\"font-size:22px;\" aria-hidden=\"true\">\ud83d\udca1<\/span><span class=\"option-card__text\">Artificial<\/span><span class=\"option-card__sub\">Warm bulbs<\/span><\/label>\n <\/div>\n <div class=\"option-card\">\n <input type=\"radio\" name=\"lighting\" id=\"lighting-mixed\" value=\"mixed\" aria-label=\"Mixed \u2014 both sources\">\n <label for=\"lighting-mixed\"><span style=\"font-size:22px;\" aria-hidden=\"true\">\ud83c\udf24<\/span><span class=\"option-card__text\">Mixed<\/span><span class=\"option-card__sub\">Both sources<\/span><\/label>\n <\/div>\n <\/div>\n <span class=\"field-error\" id=\"lighting-error\" role=\"alert\" aria-live=\"assertive\">Please choose a lighting type to continue.<\/span>\n <\/fieldset>\n\n <button type=\"button\" class=\"btn-build\" id=\"build-btn\" onclick=\"buildPalette()\">Build my palette<\/button>\n\n <\/form>\n\n \n <section id=\"results\" aria-label=\"Your colour palette\" aria-live=\"polite\" aria-atomic=\"true\">\n <hr class=\"results-divider\" aria-hidden=\"true\">\n <h2 class=\"results-heading\" id=\"results-name\"><\/h2>\n <p class=\"results-sub\" id=\"results-sub\"><\/p>\n <div class=\"palette-strip\" id=\"palette-strip\" aria-hidden=\"true\"><\/div>\n <div class=\"colour-cards\" id=\"colour-cards\"><\/div>\n <div class=\"rationale-box\" role=\"note\" aria-label=\"Why this palette works\">\n <p id=\"rationale-text\"><\/p>\n <\/div>\n <div class=\"lighting-note\" id=\"lighting-note\" role=\"note\" aria-label=\"Lighting tip\">\n <span class=\"lighting-note__icon\" aria-hidden=\"true\">\ud83d\udca1<\/span>\n <span id=\"lighting-note-text\"><\/span>\n <\/div>\n <\/section>\n\n \n <section id=\"product-showcase\" class=\"product-showcase\" style=\"display:none;\" aria-label=\"Products in your palette\">\n <h3 class=\"products-heading\">Products in your palette<\/h3>\n <p class=\"products-sub\">Selected HOGAI pieces in the colours of your composition.<\/p>\n <div class=\"product-grid-3\" id=\"product-grid\"><\/div>\n <p class=\"products-note\">Prices incl. VAT & shipping \u00b7 Free shipping in Poland from PLN 600<\/p>\n <\/section>\n\n \n <section id=\"cta\" aria-label=\"Explore the HOGAI collection\">\n <p class=\"cta__eyebrow\">Your palette is ready<\/p>\n <h2 class=\"cta__heading\" id=\"cta-heading\">Explore the full collection<\/h2>\n <p class=\"cta__sub\">Every piece is designed and made in Poland. Free shipping within Poland on orders over PLN 600.<\/p>\n <a id=\"cta-btn\"\n href=\"https:\/\/hogai.store\/en\/store\/?utm_source=palette-tool&utm_medium=lead-magnet&utm_campaign=colour-palette-builder\"\n class=\"btn-cta\" target=\"_blank\" rel=\"noopener noreferrer\"\n aria-label=\"Explore the HOGAI collection \u2014 opens in a new tab\"\n onclick=\"fireCTAEvent()\">\n Explore the collection →\n <\/a>\n <p class=\"cta__phone\">Call us to discuss your choices: <a href=\"tel:+48780635148\" style=\"color:inherit;text-decoration:underline;\">+48 780 635 148<\/a><\/p>\n <p class=\"cta__trust\">Polish design \u00b7 Bauhaus meets Memphis \u00b7 Vogue, Design Milk, Architectural Digest<\/p>\n <button class=\"reset-link\" onclick=\"resetTool()\" aria-label=\"Start over and build a new palette\">Build another palette<\/button>\n <\/section>\n\n <\/div>\n<\/main>\n\n<script>\n window.dataLayer = window.dataLayer || [];\n\n \/* \u2500\u2500 PRODUCT DATABASE (English URLs & EUR prices) \u2500\u2500 *\/\n \/* EDIT: Update product names, prices, image URLs, or product page links below *\/\n const PRODUCTS = {\n '#1440b8': {\n mirror: { name: 'Cellist Mirror COBALT LOVE', price: '\u20ac2 444', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2023\/03\/2.04.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/cellist-mirror-cobalt-love\/' },\n table: { name: 'Tailor Nightstand COBALT LOVE', price: '\u20ac664', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2024\/06\/w029_1_4.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/tailor-nightstand-cobalt-love\/' },\n textile: { name: 'Sprinkle Cotton Blanket COBALT POP',price: '\u20ac133', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2026\/03\/sprinkle2_front.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/sprinkle-cotton-blanket-cobalt-pop\/' }\n },\n '#e91e7e': {\n mirror: { name: 'Cellist Mirror PINK POWER', price: '\u20ac2 444', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2023\/03\/2.09.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/cellist-mirror-pink-power\/' },\n table: { name: 'Tailor Nightstand PINK POWER', price: '\u20ac664', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2024\/06\/w029_1_9.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/tailor-nightsand-pink-power\/' },\n textile: { name: 'Iggy Cotton Blanket PINK LUKIER', price: '\u20ac133', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2026\/02\/49-1.png', url: 'https:\/\/hogai.store\/en\/produkt\/cotton-blanket-iggy-pink-lukier\/' }\n },\n '#ff5723': {\n mirror: { name: 'Artist Mirror ORANGE JOY', price: '\u20ac2 955', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2023\/03\/3.03.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/artist-mirror-orange-joy\/' },\n table: { name: 'Tailor Nightstand ORANGE JOY', price: '\u20ac664', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2024\/06\/w029_1_3.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/tailor-nightstand-orange-joy\/' },\n textile: { name: 'Sprinkle Cotton Blanket PASTEL BLOSSOM', price: '\u20ac133', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2026\/03\/sprinkle1_front.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/sprinkle-cotton-blanket-pastel-blossom\/' }\n },\n '#a3b18a': {\n mirror: { name: 'Cellist Mirror DUSTY SAGE', price: '\u20ac2 444', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2025\/12\/2.01.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/cellist-mirror-dusty-sage\/' },\n table: { name: 'Tailor Nightstand GREEN BOTTLE', price: '\u20ac664', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2024\/06\/w029_1_6.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/tailor-nightstand-green-bottle\/' },\n textile: { name: 'Iggy Cotton Blanket CREAM KOKOS', price: '\u20ac133', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2026\/02\/4.png', url: 'https:\/\/hogai.store\/en\/produkt\/cotton-blanket-iggy-cream-kokos\/' }\n },\n '#6e1332': {\n mirror: { name: 'Artist Mirror BURGUNDY STAR', price: '\u20ac2 955', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2023\/03\/3.05.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/artist-mirror-burgundy-star\/' },\n table: { name: 'Tutor Nightstand BURGUNDY STAR', price: '\u20ac623', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2024\/06\/w030_1_5.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/tutor-nightstand-burgundy-star\/' },\n textile: { name: 'Iggy Cotton Blanket BURGUNDY LOLA', price: '\u20ac133', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2026\/02\/30.png', url: 'https:\/\/hogai.store\/en\/produkt\/cotton-blanket-iggy-burgundy-lola\/' }\n },\n '#000000': {\n mirror: { name: 'Cellist Mirror BLACK NIGHT', price: '\u20ac2 444', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2023\/03\/2.07.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/cellist-mirror-black-night\/' },\n table: { name: 'Tailor Nightstand BLACK NIGHT', price: '\u20ac664', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2024\/06\/w029_1_7.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/tailor-nightstand-black-night\/' },\n textile: { name: 'Op-Art Cotton Blanket POWER PUSSY', price: '\u20ac169', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2024\/01\/17.png', url: 'https:\/\/hogai.store\/en\/produkt\/op-art-blanket-power-pussy\/' }\n },\n '#9b8bb4': {\n mirror: { name: 'Cellist Mirror GREY FLOW', price: '\u20ac2 444', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2023\/03\/2.10.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/cellist-mirror-grey-flow\/' },\n table: { name: 'Tailor Nightstand GREY FLOW', price: '\u20ac664', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2024\/06\/w029_1_10.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/tailor-nightstand-grey-flow\/' },\n textile: { name: 'Iggy Cotton Blanket LILLY PIXEL', price: '\u20ac133', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2026\/02\/LilyPixel_front.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/cotton-blanket-iggy-lilly-pixel\/' }\n },\n '#d5c9a1': {\n mirror: { name: 'Cellist Mirror ECRU LADY', price: '\u20ac2 444', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2023\/03\/2.08.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/cellist-mirror-ecru-lady\/' },\n table: { name: 'Tailor Nightstand ECRU LADY', price: '\u20ac664', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2024\/06\/w029_1_8.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/tailor-nightstand-ecru-lady\/' },\n textile: { name: 'Iggy Cotton Blanket CREAM CUKIER', price: '\u20ac133', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2026\/02\/58-1.png', url: 'https:\/\/hogai.store\/en\/produkt\/cotton-blanket-iggy-cream-cukier\/' }\n }\n };\n\n \/* \u2500\u2500 PALETTE DATA \u2500\u2500 *\/\n \/* EDIT: English rationale text, palette names, or product descriptions *\/\n const PALETTES = {\n white_energetic: {\n name: \"Electric Contrast\",\n rationale: \"White walls act as an empty canvas \u2014 cobalt lands with full force. Orange adds energy without competing with the anchor, and ecru softens the composition, giving it the character of a deliberate choice.\",\n colors: [\n { hex: '#1440b8', label: 'Anchor \u00b7 30%', colorName: 'Cobalt', product: 'Mirror or coffee table \u2014 the centrepiece that stops the eye.' },\n { hex: '#ff5723', label: 'Pop \u00b7 10%', colorName: 'Orange', product: 'Side table or accessories \u2014 energy in a compact form.' },\n { hex: '#d5c9a1', label: 'Bridge \u00b7 60%', colorName: 'Ecru', product: 'Blanket or cushion \u2014 ties the palette together without competing.' }\n ]\n },\n white_calm: {\n name: \"Still Morning\",\n rationale: \"Sage and lavender are natural colours that hold the eye in stillness. On white they feel light, not flat. Ecru warms the whole without letting the interior read as clinical.\",\n colors: [\n { hex: '#a3b18a', label: 'Anchor \u00b7 30%', colorName: 'Sage', product: 'Cotton blanket or textiles \u2014 quiet centrepiece of a calm interior.' },\n { hex: '#9b8bb4', label: 'Pop \u00b7 10%', colorName: 'Lavender',product: 'Decorative mirror or cushion \u2014 a gentle optical lift.' },\n { hex: '#d5c9a1', label: 'Bridge \u00b7 60%', colorName: 'Ecru', product: 'Bedding or throw \u2014 warmth that holds everything together.' }\n ]\n },\n white_dramatic: {\n name: \"Monochrome Power\",\n rationale: \"Black on white is the quintessence of the Bauhaus manifesto. Burgundy adds depth and emotion without diluting the drama. Orange is the single warm note that keeps it from severity.\",\n colors: [\n { hex: '#000000', label: 'Anchor \u00b7 30%', colorName: 'Black', product: 'Wall shelf or floor mirror \u2014 architectural and absolute.' },\n { hex: '#6e1332', label: 'Pop \u00b7 10%', colorName: 'Burgundy',product: 'Nightstand \u2014 deep colour in a compact form.' },\n { hex: '#ff5723', label: 'Bridge \u00b7 60%', colorName: 'Orange', product: 'Cushion or accessory \u2014 the only glowing note in a stark interior.' }\n ]\n },\n white_playful: {\n name: \"Studio Joy\",\n rationale: \"Pink is a colour of courage \u2014 on white it reads bold, not sweet. Lavender eases the contrast just enough, and orange gives the whole palette a Memphis vivacity that feels genuinely joyful.\",\n colors: [\n { hex: '#e91e7e', label: 'Anchor \u00b7 30%', colorName: 'Pink', product: 'Statement mirror \u2014 the first thing you see, the last thing you forget.' },\n { hex: '#ff5723', label: 'Pop \u00b7 10%', colorName: 'Orange', product: 'Stool or small table \u2014 playful scale, serious colour.' },\n { hex: '#9b8bb4', label: 'Bridge \u00b7 60%', colorName: 'Lavender',product: 'Cushion or throw \u2014 the cool note that keeps the palette cohesive.' }\n ]\n },\n offwhite_energetic: {\n name: \"Warm Pulse\",\n rationale: \"Cream walls carry warmth \u2014 pink transforms them into something vibrant rather than sleepy. Cobalt introduces a cool contrast that charges the space with energy, while ecru weaves through the walls for continuity.\",\n colors: [\n { hex: '#e91e7e', label: 'Anchor \u00b7 30%', colorName: 'Pink', product: 'Mirror \u2014 saturated colour that cuts clearly against the warm base.' },\n { hex: '#1440b8', label: 'Pop \u00b7 10%', colorName: 'Cobalt', product: 'Coffee table or shelf \u2014 cool anchor on a warm background.' },\n { hex: '#d5c9a1', label: 'Bridge \u00b7 60%', colorName: 'Ecru', product: 'Blanket or cushion \u2014 echo of the walls that unifies the palette.' }\n ]\n },\n offwhite_calm: {\n name: \"Quiet Warmth\",\n rationale: \"On cream walls, sage feels organic and deeply considered. Ecru as bridge is almost invisible \u2014 a seamless extension of the base. Lavender provides just enough contrast to keep the room from feeling one-note.\",\n colors: [\n { hex: '#a3b18a', label: 'Anchor \u00b7 30%', colorName: 'Sage', product: 'Jacquard blanket \u2014 texture and colour working as one.' },\n { hex: '#d5c9a1', label: 'Bridge \u00b7 60%', colorName: 'Ecru', product: 'Bedding or throw \u2014 warmth bridging wall and accent.' },\n { hex: '#9b8bb4', label: 'Pop \u00b7 10%', colorName: 'Lavender',product: 'Decorative cushion \u2014 quiet note that rewards a second glance.' }\n ]\n },\n offwhite_dramatic: {\n name: \"Old World Drama\",\n rationale: \"Burgundy on cream has the quality of Flemish painting \u2014 rich, but not aggressive. Black sharpens everything, and ecru connects the wall to the palette, making drama feel liveable, not theatrical.\",\n colors: [\n { hex: '#6e1332', label: 'Anchor \u00b7 30%', colorName: 'Burgundy',product: 'Mirror or table \u2014 richness in architectural form.' },\n { hex: '#000000', label: 'Pop \u00b7 10%', colorName: 'Black', product: 'Shelf or hanger \u2014 sharp element that defines the composition.' },\n { hex: '#d5c9a1', label: 'Bridge \u00b7 60%', colorName: 'Ecru', product: 'Blanket or cushion \u2014 keeps drama from overwhelming.' }\n ]\n },\n offwhite_playful: {\n name: \"Garden Party\",\n rationale: \"Pink on cream is unexpectedly sophisticated \u2014 the wall's warmth softens the saturation into something remarkable. Lavender adds a whimsical note, and sage keeps it fresh and grounded.\",\n colors: [\n { hex: '#e91e7e', label: 'Anchor \u00b7 30%', colorName: 'Pink', product: 'Statement mirror \u2014 colour that reads as a conscious choice, not coincidence.' },\n { hex: '#9b8bb4', label: 'Pop \u00b7 10%', colorName: 'Lavender',product: 'Cushion or ornament \u2014 a dreamy secondary note.' },\n { hex: '#a3b18a', label: 'Bridge \u00b7 60%', colorName: 'Sage', product: 'Throw or textiles \u2014 earthy grounding for a light palette.' }\n ]\n },\n lightgrey_energetic: {\n name: \"Urban Heat\",\n rationale: \"Grey is neutral enough to let orange fully express itself \u2014 the contrast is instant and alive. Cobalt adds intellectual depth, and sage grounds the palette so it reads as designed, not accidental.\",\n colors: [\n { hex: '#ff5723', label: 'Anchor \u00b7 30%', colorName: 'Orange', product: 'Coffee table or shelf \u2014 warmth jumping off the cool grey.' },\n { hex: '#1440b8', label: 'Pop \u00b7 10%', colorName: 'Cobalt', product: 'Mirror \u2014 cool counterpoint that sharpens the whole palette.' },\n { hex: '#a3b18a', label: 'Bridge \u00b7 60%', colorName: 'Sage', product: 'Blanket \u2014 organic note softening the urban edge.' }\n ]\n },\n lightgrey_calm: {\n name: \"Nordic Haze\",\n rationale: \"Lavender and grey share a cool undertone that creates effortless harmony. Sage brings in nature, and ecru provides warmth so the room doesn't read as cold.\",\n colors: [\n { hex: '#9b8bb4', label: 'Anchor \u00b7 30%', colorName: 'Lavender',product: 'Mirror \u2014 colour that reads painterly against a cool grey wall.' },\n { hex: '#a3b18a', label: 'Pop \u00b7 10%', colorName: 'Sage', product: 'Textiles or cushion \u2014 organic life in a muted palette.' },\n { hex: '#d5c9a1', label: 'Bridge \u00b7 60%', colorName: 'Ecru', product: 'Blanket \u2014 warmth saving the palette from sterility.' }\n ]\n },\n lightgrey_dramatic: {\n name: \"Blueprint\",\n rationale: \"Cobalt on grey is architectural perfection \u2014 two cool tones amplifying each other. Black defines structure, and burgundy introduces emotional depth so the room tells a story.\",\n colors: [\n { hex: '#1440b8', label: 'Anchor \u00b7 30%', colorName: 'Cobalt', product: 'Large mirror \u2014 a single element that redefines the room.' },\n { hex: '#000000', label: 'Pop \u00b7 10%', colorName: 'Black', product: 'Shelf or stool \u2014 geometric anchor of the composition.' },\n { hex: '#6e1332', label: 'Bridge \u00b7 60%', colorName: 'Burgundy',product: 'Cushion or small textile \u2014 human warmth in a cool palette.' }\n ]\n },\n lightgrey_playful: {\n name: \"Confetti\",\n rationale: \"Grey is the ideal neutral for bold, playful colours \u2014 it never competes. Pink brings joy, cobalt adds credibility, and orange ties them like a Memphis mood board come to life.\",\n colors: [\n { hex: '#e91e7e', label: 'Anchor \u00b7 30%', colorName: 'Pink', product: 'Mirror \u2014 joyful saturation on a calm grey base.' },\n { hex: '#1440b8', label: 'Pop \u00b7 10%', colorName: 'Cobalt', product: 'Table \u2014 cool note giving pink something to play off.' },\n { hex: '#ff5723', label: 'Bridge \u00b7 60%', colorName: 'Orange', product: 'Accessory or cushion \u2014 the third note completing the Memphis triad.' }\n ]\n },\n beige_energetic: {\n name: \"Desert Charge\",\n rationale: \"Beige and cobalt is a timeless pairing \u2014 warmth meets cool in a way that feels both energetic and resolved. Orange amplifies the energy while sage keeps the palette from tipping over.\",\n colors: [\n { hex: '#1440b8', label: 'Anchor \u00b7 30%', colorName: 'Cobalt', product: 'Mirror or coffee table \u2014 cool boldness on warm walls.' },\n { hex: '#ff5723', label: 'Pop \u00b7 10%', colorName: 'Orange', product: 'Accessories or table \u2014 energetic peak in the palette.' },\n { hex: '#a3b18a', label: 'Bridge \u00b7 60%', colorName: 'Sage', product: 'Textiles \u2014 natural mediator between warm and cool.' }\n ]\n },\n beige_calm: {\n name: \"Earth Ritual\",\n rationale: \"Beige, sage, and ecru are variations on one organic theme \u2014 quiet, warm, grounded. This palette is about tonal sophistication: each colour is distinct, but together they read as a family.\",\n colors: [\n { hex: '#a3b18a', label: 'Anchor \u00b7 30%', colorName: 'Sage', product: 'Cotton blanket \u2014 quiet anchor of an earthy, layered palette.' },\n { hex: '#d5c9a1', label: 'Bridge \u00b7 60%', colorName: 'Ecru', product: 'Bedding or throw \u2014 almost invisible, deeply considered.' },\n { hex: '#9b8bb4', label: 'Pop \u00b7 10%', colorName: 'Lavender',product: 'Decorative cushion \u2014 the single lifted note in an earthy room.' }\n ]\n },\n beige_dramatic: {\n name: \"Terra Nova\",\n rationale: \"Burgundy is a natural drama partner for warm beige \u2014 they share a reddish earth undertone that reads old and intentional. Black sharpens the composition and ecru makes it liveable.\",\n colors: [\n { hex: '#6e1332', label: 'Anchor \u00b7 30%', colorName: 'Burgundy',product: 'Mirror or nightstand \u2014 depth complementing the warmth of the walls.' },\n { hex: '#000000', label: 'Pop \u00b7 10%', colorName: 'Black', product: 'Shelf \u2014 structural outline in a warm palette.' },\n { hex: '#d5c9a1', label: 'Bridge \u00b7 60%', colorName: 'Ecru', product: 'Cushion or blanket \u2014 bridge between wall and main piece.' }\n ]\n },\n beige_playful: {\n name: \"Bohemian Summer\",\n rationale: \"Pink on beige reads warm rather than cold \u2014 the wall softens the saturation into something unexpectedly rich. Orange adds festivity, and sage provides a botanical grounding note.\",\n colors: [\n { hex: '#e91e7e', label: 'Anchor \u00b7 30%', colorName: 'Pink', product: 'Statement mirror \u2014 warm saturation on a warm base: bold but not aggressive.' },\n { hex: '#ff5723', label: 'Pop \u00b7 10%', colorName: 'Orange', product: 'Small table or stool \u2014 a summer note in the palette.' },\n { hex: '#a3b18a', label: 'Bridge \u00b7 60%', colorName: 'Sage', product: 'Blanket \u2014 botanical breath preventing oversaturation.' }\n ]\n },\n dark_energetic: {\n name: \"Neon Archive\",\n rationale: \"Dark walls are the stage \u2014 and orange is the performer. The contrast is maximum and uncompromising. Pink adds a second vibration so the palette pulses, and ecru lifts it with warmth.\",\n colors: [\n { hex: '#ff5723', label: 'Anchor \u00b7 30%', colorName: 'Orange', product: 'Coffee table or shelf \u2014 luminous against dark walls.' },\n { hex: '#e91e7e', label: 'Pop \u00b7 10%', colorName: 'Pink', product: 'Mirror or cushion \u2014 a second frequency in the composition.' },\n { hex: '#d5c9a1', label: 'Bridge \u00b7 60%', colorName: 'Ecru', product: 'Blanket \u2014 warmth preventing dark rooms from feeling cold.' }\n ]\n },\n dark_calm: {\n name: \"Midnight Linen\",\n rationale: \"Ecru and sage on dark walls glow \u2014 they catch surrounding light. Lavender is the quiet detail that makes the room read as curated rather than stark.\",\n colors: [\n { hex: '#d5c9a1', label: 'Anchor \u00b7 30%', colorName: 'Ecru', product: 'Blanket or bedding \u2014 warmth glowing in a dark room.' },\n { hex: '#a3b18a', label: 'Bridge \u00b7 60%', colorName: 'Sage', product: 'Textiles or throw \u2014 organic life in a moody interior.' },\n { hex: '#9b8bb4', label: 'Pop \u00b7 10%', colorName: 'Lavender',product: 'Cushion \u2014 quiet note completing the palette.' }\n ]\n },\n dark_dramatic: {\n name: \"Midnight Gallery\",\n rationale: \"Dark walls demand equal weight from the palette \u2014 cobalt delivers. Burgundy adds a second layer of drama that reads painterly rather than aggressive. Orange is the single warm detail that prevents coldness.\",\n colors: [\n { hex: '#1440b8', label: 'Anchor \u00b7 30%', colorName: 'Cobalt', product: 'Large mirror \u2014 equal in weight to the dark wall behind it.' },\n { hex: '#6e1332', label: 'Pop \u00b7 10%', colorName: 'Burgundy',product: 'Table \u2014 second deep note in a high-contrast palette.' },\n { hex: '#ff5723', label: 'Bridge \u00b7 60%', colorName: 'Orange', product: 'Cushion or small accessory \u2014 warm ember saving the drama.' }\n ]\n },\n dark_playful: {\n name: \"Disco Modernism\",\n rationale: \"Pink on dark walls is a full-volume design decision \u2014 genuinely surprising and genuinely joyful. Orange amplifies the energy, and lavender cools the palette just enough to let the room breathe.\",\n colors: [\n { hex: '#e91e7e', label: 'Anchor \u00b7 30%', colorName: 'Pink', product: 'Mirror \u2014 the element that defines the room in one gesture.' },\n { hex: '#ff5723', label: 'Pop \u00b7 10%', colorName: 'Orange', product: 'Stool or table \u2014 warm amplifier of the palette.' },\n { hex: '#9b8bb4', label: 'Bridge \u00b7 60%', colorName: 'Lavender',product: 'Cushion or throw \u2014 a breath in an electrified palette.' }\n ]\n },\n wood_energetic: {\n name: \"Artisan Workshop\",\n rationale: \"Wood and orange share the same warm wavelength \u2014 combined they feel intentional and alive. Cobalt is the unexpected contrast that elevates the palette from cosy to considered. Sage grounds it in nature.\",\n colors: [\n { hex: '#ff5723', label: 'Anchor \u00b7 30%', colorName: 'Orange', product: 'Coffee table or shelf \u2014 colour resonating with the wood grain.' },\n { hex: '#1440b8', label: 'Pop \u00b7 10%', colorName: 'Cobalt', product: 'Mirror \u2014 cool counterpoint making the whole room smarter.' },\n { hex: '#a3b18a', label: 'Bridge \u00b7 60%', colorName: 'Sage', product: 'Blanket \u2014 botanical note completing the craftsman story.' }\n ]\n },\n wood_calm: {\n name: \"Forest Edit\",\n rationale: \"Wood, sage, and ecru are one colour family \u2014 the palette tells the story of a forest at dusk. Lavender is the single unexpected note that keeps the room from predictability.\",\n colors: [\n { hex: '#a3b18a', label: 'Anchor \u00b7 30%', colorName: 'Sage', product: 'Jacquard blanket \u2014 fabric that belongs to the space.' },\n { hex: '#d5c9a1', label: 'Bridge \u00b7 60%', colorName: 'Ecru', product: 'Throw or cushion \u2014 quasi-neutral deepening the warmth.' },\n { hex: '#9b8bb4', label: 'Pop \u00b7 10%', colorName: 'Lavender',product: 'Decorative mirror \u2014 the only note not from the forest.' }\n ]\n },\n wood_dramatic: {\n name: \"Dark Cabin\",\n rationale: \"Burgundy sits in the same warm register as wood \u2014 the contrast is subtle, but the depth is real. Black defines structure, and sage keeps enough nature in the palette to keep it liveable.\",\n colors: [\n { hex: '#6e1332', label: 'Anchor \u00b7 30%', colorName: 'Burgundy',product: 'Mirror or nightstand \u2014 depth echoing and amplifying the wood.' },\n { hex: '#000000', label: 'Pop \u00b7 10%', colorName: 'Black', product: 'Shelf \u2014 sharp geometric contrast against organic warmth.' },\n { hex: '#a3b18a', label: 'Bridge \u00b7 60%', colorName: 'Sage', product: 'Textiles \u2014 keeps a dramatic palette from overwhelming.' }\n ]\n },\n wood_playful: {\n name: \"Memphis Cabin\",\n rationale: \"The playfulness of orange on natural wood is irresistible \u2014 Memphis energy meets Scandinavian material honesty. Pink adds an unexpected pulse, and sage keeps the palette grounded.\",\n colors: [\n { hex: '#ff5723', label: 'Anchor \u00b7 30%', colorName: 'Orange', product: 'Statement table or stool \u2014 colour rhyming with the wood.' },\n { hex: '#e91e7e', label: 'Pop \u00b7 10%', colorName: 'Pink', product: 'Mirror \u2014 the pink you didn\\'t expect to love.' },\n { hex: '#a3b18a', label: 'Bridge \u00b7 60%', colorName: 'Sage', product: 'Blanket or textiles \u2014 natural note grounding the playfulness.' }\n ]\n }\n };\n\n \/* \u2500\u2500 LIGHTING NOTES \u2500\u2500 *\/\n \/* EDIT: English lighting tip text *\/\n const LIGHTING_NOTES = {\n cobalt_artificial: \"Cobalt reads very cool under warm artificial light. Consider adding an ecru or orange textile to balance the colour temperature \u2014 or switch to daylight bulbs above 4000K.\",\n warm_natural: \"Your room gets good natural light \u2014 your warm palette will look even richer in afternoon sun. Place the main piece on the wall opposite the window for maximum impact.\",\n dark_artificial: \"Dark walls absorb a lot of light under artificial sources. Choose bulbs above 2700K and position lamps near accent pieces so colours show their full saturation.\"\n };\n\n const PIECE_LABELS = { '1': '1 piece', '2': '2 pieces', '3': '3 or more' };\n \/* EDIT: Product type labels *\/\n const PRODUCT_TYPES = { mirror: 'Mirror', table: 'Nightstand', textile: 'Blanket' };\n\n \/* \u2500\u2500 HELPERS \u2500\u2500 *\/\n function updatePiecesLabel(input) {\n const val = input.value;\n const label = document.getElementById('pieces-value-label');\n label.textContent = PIECE_LABELS[val] || val + ' pieces';\n input.setAttribute('aria-valuenow', val);\n input.setAttribute('aria-valuetext', PIECE_LABELS[val] || val + ' pieces');\n updateDots(parseInt(val) + 1);\n }\n function updateDots(step) {\n for (let i = 1; i <= 4; i++) {\n const d = document.getElementById('dot-' + i);\n if (d) d.classList.toggle('active', i <= step);\n }\n }\n function getRadioValue(name) {\n const el = document.querySelector('input[name=\"' + name + '\"]:checked');\n return el ? el.value : null;\n }\n\n \/* \u2500\u2500 VALIDATION \u2500\u2500 *\/\n function validateForm() {\n let valid = true;\n [['wall','wall-error'],['mood','mood-error'],['lighting','lighting-error']].forEach(([name, errId]) => {\n const err = document.getElementById(errId);\n if (!getRadioValue(name)) { err.classList.add('visible'); valid = false; }\n else err.classList.remove('visible');\n });\n return valid;\n }\n\n \/* \u2500\u2500 RENDER PRODUCTS \u2500\u2500 *\/\n function renderProducts(colors) {\n const grid = document.getElementById('product-grid');\n const showcase = document.getElementById('product-showcase');\n\n const slots = [\n { type: 'mirror', key: colors[0].hex },\n { type: 'table', key: (colors[1] || colors[0]).hex },\n { type: 'textile', key: (colors[2] || colors[0]).hex }\n ];\n\n const html = slots.map(({ type, key }) => {\n const products = PRODUCTS[key];\n if (!products || !products[type]) return '';\n const p = products[type];\n return `\n <a class=\"prod-card anim-fade-up\" href=\"${p.url}?utm_source=palette-tool&utm_medium=lead-magnet&utm_campaign=colour-palette-builder\"\n target=\"_blank\" rel=\"noopener noreferrer\"\n aria-label=\"${PRODUCT_TYPES[type]}: ${p.name}, ${p.price} \u2014 opens in a new tab\"\n onclick=\"window.dataLayer.push({event:'product_card_click',tool:'colour-palette-builder',product:'${p.name}',type:'${type}'})\">\n <div class=\"prod-card__img-wrap\">\n <img decoding=\"async\" src=\"${p.img}\" alt=\"${p.name}\" loading=\"lazy\" width=\"400\" height=\"400\">\n <\/div>\n <div class=\"prod-card__body\">\n <p class=\"prod-card__type\">${PRODUCT_TYPES[type]}<\/p>\n <p class=\"prod-card__name\">${p.name}<\/p>\n <p class=\"prod-card__price\">${p.price}<\/p>\n <span class=\"prod-card__link\" aria-hidden=\"true\">View product →<\/span>\n <\/div>\n <\/a>`;\n }).join('');\n\n grid.innerHTML = html;\n showcase.style.display = html.trim() ? 'block' : 'none';\n }\n\n \/* \u2500\u2500 BUILD PALETTE \u2500\u2500 *\/\n function buildPalette() {\n if (!validateForm()) {\n const firstErr = document.querySelector('.field-error.visible');\n if (firstErr) firstErr.scrollIntoView({ behavior: 'smooth', block: 'center' });\n return;\n }\n\n const wall = getRadioValue('wall');\n const mood = getRadioValue('mood');\n const pieces = parseInt(document.getElementById('pieces-range').value);\n const lighting = getRadioValue('lighting');\n const key = wall + '_' + mood;\n const palette = PALETTES[key];\n if (!palette) return;\n\n const visibleColors = palette.colors.slice(0, Math.min(pieces, palette.colors.length));\n const wallLabel = { white:'white', offwhite:'cream', lightgrey:'light grey', beige:'warm beige', dark:'dark', wood:'natural wood' }[wall] || wall;\n\n document.getElementById('results-name').textContent = palette.name;\n document.getElementById('results-sub').textContent = `A ${visibleColors.length}-colour palette for a room with ${wallLabel} walls.`;\n\n document.getElementById('palette-strip').innerHTML = visibleColors\n .map(c => `<div class=\"palette-strip__block\" style=\"background:${c.hex};\" title=\"${c.colorName}\" aria-label=\"${c.colorName}\"><\/div>`)\n .join('');\n\n document.getElementById('colour-cards').innerHTML = visibleColors.map(c => `\n <div class=\"colour-card anim-fade-up\">\n <div class=\"colour-card__swatch\" style=\"background:${c.hex};\" aria-hidden=\"true\"><\/div>\n <div class=\"colour-card__body\">\n <p class=\"colour-card__role\">${c.label}<\/p>\n <p class=\"colour-card__name\">${c.colorName}<\/p>\n <p class=\"colour-card__product\">${c.product}<\/p>\n <span class=\"colour-card__hex\">${c.hex}<\/span>\n <\/div>\n <\/div>`).join('');\n\n document.getElementById('rationale-text').textContent = palette.rationale;\n\n const note = document.getElementById('lighting-note');\n const noteText = document.getElementById('lighting-note-text');\n const hasCobalts = visibleColors.some(c => c.hex === '#1440b8');\n const isAllWarm = visibleColors.every(c => ['#ff5723','#d5c9a1','#6e1332','#a3b18a','#e91e7e','#9b8bb4'].includes(c.hex));\n let lightMsg = '';\n if (lighting === 'artificial' && hasCobalts) lightMsg = LIGHTING_NOTES.cobalt_artificial;\n else if (lighting === 'artificial' && wall === 'dark') lightMsg = LIGHTING_NOTES.dark_artificial;\n else if (lighting === 'natural' && isAllWarm) lightMsg = LIGHTING_NOTES.warm_natural;\n noteText.textContent = lightMsg;\n note.classList.toggle('visible', !!lightMsg);\n\n renderProducts(visibleColors);\n\n document.getElementById('cta-heading').textContent = 'Explore palette ' + palette.name;\n const params = new URLSearchParams({ utm_source:'palette-tool', utm_medium:'lead-magnet', utm_campaign:'colour-palette-builder', utm_content: key });\n document.getElementById('cta-btn').href = 'https:\/\/hogai.store\/en\/store\/?' + params.toString();\n\n document.getElementById('results').classList.add('visible');\n document.getElementById('cta').classList.add('visible');\n document.getElementById('results').scrollIntoView({ behavior: 'smooth', block: 'start' });\n\n window.dataLayer.push({ event:'palette_generated', tool:'colour-palette-builder', palette:palette.name, wall, mood, pieces, lighting });\n }\n\n function fireCTAEvent() {\n window.dataLayer.push({ event:'tool_cta_click', tool:'colour-palette-builder' });\n }\n\n function resetTool() {\n document.querySelectorAll('input[type=\"radio\"]').forEach(r => r.checked = false);\n const range = document.getElementById('pieces-range');\n range.value = '2'; updatePiecesLabel(range);\n document.querySelectorAll('.field-error').forEach(e => e.classList.remove('visible'));\n document.getElementById('results').classList.remove('visible');\n document.getElementById('cta').classList.remove('visible');\n document.getElementById('product-showcase').style.display = 'none';\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n\n document.querySelectorAll('input[type=\"radio\"]').forEach(radio => {\n radio.addEventListener('change', () => {\n const w = getRadioValue('wall'), m = getRadioValue('mood'), l = getRadioValue('lighting');\n updateDots(w ? (m ? (l ? 4 : 3) : 2) : 1);\n });\n });\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Colour Palette Builder \u2014 HOGAI Build Your Colour Palette Every HOGAI furniture piece and textile exists in 12 carefully considered colours \u2014 none accidental, every one intentional. Inspired simultaneously by the minimalist discipline of the Bauhaus and the energy of Memphis pattern, these colours are not a backdrop. They are a design tool: each carries […]<\/p>\n","protected":false},"author":8,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-parts\/page_full_width.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-21847","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/pages\/21847","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/comments?post=21847"}],"version-history":[{"count":0,"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/pages\/21847\/revisions"}],"wp:attachment":[{"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/media?parent=21847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":21847,"date":"2026-03-21T09:53:36","date_gmt":"2026-03-21T08:53:36","guid":{"rendered":"https:\/\/hogai.store\/?page_id=21847"},"modified":"2026-03-21T09:54:04","modified_gmt":"2026-03-21T08:54:04","slug":"build-your-colour-palette","status":"publish","type":"page","link":"https:\/\/hogai.store\/en\/build-your-colour-palette\/","title":{"rendered":"Build Your Colour Palette"},"content":{"rendered":"\n\n\n\n\n\n \n \n Colour Palette Builder \u2014 HOGAI<\/title>\n <meta name=\"description\" content=\"Build your perfect interior colour palette in 4 steps. Get tailored HOGAI recommendations matched to your room, mood, and lighting.\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Raleway:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n <style>\n :root {\n --hogai-black: #000000;\n --hogai-white: #ffffff;\n --hogai-off-white: #f9f9f9;\n --hogai-gray-light: #dddddd;\n --hogai-gray-border: #cccccc;\n --hogai-gray-medium: #999999;\n --hogai-text-primary: #212529;\n --hogai-text-heading: #000000;\n --hogai-accent-orange:#DA6E00;\n --hogai-pink: #D8A0A6;\n --hogai-cobalt: #1440b8;\n --hogai-burgundy: #6e1332;\n --hogai-lavender: #9b8bb4;\n --hogai-sage: #a3b18a;\n --hogai-ecru: #d5c9a1;\n\n --hogai-font-primary: 'Raleway', system-ui, -apple-system, sans-serif;\n --hogai-fw-regular: 400;\n --hogai-fw-semibold: 600;\n --hogai-fw-bold: 700;\n\n --hogai-fs-xs: 10px;\n --hogai-fs-sm: 12px;\n --hogai-fs-base: 15px;\n --hogai-fs-md: 16px;\n --hogai-fs-lg: 18px;\n --hogai-fs-xl: 22px;\n --hogai-fs-3xl: 28px;\n --hogai-fs-5xl: 38px;\n\n --hogai-lh-tight: 1.2;\n --hogai-lh-base: 1.5;\n --hogai-ls-sm: 0.28px;\n --hogai-ls-md: 0.32px;\n --hogai-ls-lg: 0.36px;\n\n --hogai-radius-sm: 4px;\n --hogai-radius-pill: 20px;\n --hogai-shadow-card: 0 2px 8px rgba(0,0,0,0.06);\n --hogai-transition-base: 250ms ease;\n --hogai-transition-fast: 150ms ease;\n }\n\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }\n body {\n font-family: var(--hogai-font-primary);\n font-size: var(--hogai-fs-md);\n font-weight: var(--hogai-fw-regular);\n line-height: var(--hogai-lh-base);\n color: var(--hogai-text-primary);\n background-color: var(--hogai-white);\n }\n img, svg { display: block; max-width: 100%; height: auto; }\n ul { list-style: none; }\n ::selection { background-color: var(--hogai-black); color: var(--hogai-white); }\n :focus-visible { outline: 2px solid var(--hogai-black); outline-offset: 2px; }\n\n \/* \u2500\u2500 LAYOUT \u2500\u2500 *\/\n .hogai-wrap {\n width: 100%;\n max-width: 760px;\n margin-inline: auto;\n padding-inline: 20px;\n }\n\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\n .tool-hero {\n text-align: center;\n margin-bottom: 48px;\n padding-top: 40px;\n }\n .tool-hero h1 {\n font-family: var(--hogai-font-primary);\n font-size: clamp(24px, 5vw, var(--hogai-fs-5xl));\n font-weight: var(--hogai-fw-regular);\n text-transform: uppercase;\n line-height: var(--hogai-lh-tight);\n color: var(--hogai-text-heading);\n margin-bottom: 16px;\n }\n .tool-hero__dots {\n display: inline-flex;\n gap: 6px;\n margin-bottom: 20px;\n }\n .tool-hero__dots span {\n display: block;\n width: 6px; height: 6px;\n border-radius: 50%;\n background-color: var(--hogai-gray-light);\n transition: background-color var(--hogai-transition-base);\n }\n .tool-hero__dots span.active { background-color: var(--hogai-black); }\n\n \/* \u2500\u2500 BRAND INTRO \u2500\u2500 *\/\n .brand-intro { margin-bottom: 36px; }\n .brand-intro__lead {\n font-size: var(--hogai-fs-base);\n line-height: 1.7;\n color: var(--hogai-text-primary);\n margin-bottom: 24px;\n }\n .brand-intro__lead strong {\n color: var(--hogai-black);\n font-weight: var(--hogai-fw-bold);\n }\n .color-categories {\n display: flex;\n flex-direction: column;\n gap: 0;\n border: 1px solid var(--hogai-gray-light);\n border-radius: var(--hogai-radius-sm);\n overflow: hidden;\n margin-bottom: 28px;\n }\n .color-cat {\n display: flex;\n flex-wrap: wrap;\n border-bottom: 1px solid var(--hogai-gray-light);\n background-color: var(--hogai-off-white);\n }\n .color-cat:last-child { border-bottom: none; }\n .color-cat__meta {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 14px 16px;\n border-right: 1px solid var(--hogai-gray-light);\n min-width: 220px;\n }\n .color-cat__tag {\n display: inline-block;\n font-size: 9px;\n text-transform: uppercase;\n letter-spacing: 1.2px;\n font-weight: 600;\n color: var(--hogai-white);\n padding: 2px 8px;\n border-radius: var(--hogai-radius-pill);\n white-space: nowrap;\n flex-shrink: 0;\n }\n .color-cat__tag--dopamine { background-color: #DA6E00; }\n .color-cat__tag--deep { background-color: #1a1a1a; }\n .color-cat__tag--pastel { background-color: #9b8bb4; }\n .color-cat__title {\n font-size: var(--hogai-fs-sm);\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: var(--hogai-ls-md);\n color: var(--hogai-black);\n white-space: nowrap;\n }\n .color-cat__swatches {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n gap: 14px;\n padding: 14px 20px;\n align-items: flex-start;\n }\n .color-chip {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 5px;\n width: 58px;\n }\n .color-chip__dot {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,0.08);\n flex-shrink: 0;\n }\n .color-chip__name {\n font-size: 9px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--hogai-gray-medium);\n text-align: center;\n line-height: 1.3;\n word-break: break-word;\n }\n @media (max-width: 640px) {\n .color-cat { flex-direction: column; }\n .color-cat__meta { border-right: none; border-bottom: 1px solid var(--hogai-gray-light); }\n .color-chip__dot { width: 30px; height: 30px; }\n }\n\n .brand-intro__cta-hint {\n font-size: var(--hogai-fs-base);\n color: var(--hogai-gray-medium);\n margin-bottom: 0;\n }\n\n \/* \u2500\u2500 FORM \u2500\u2500 *\/\n .palette-form {\n display: flex;\n flex-direction: column;\n gap: 32px;\n margin-bottom: 48px;\n }\n .form-field { display: flex; flex-direction: column; gap: 8px; }\n .form-field__label {\n font-size: var(--hogai-fs-sm);\n font-weight: var(--hogai-fw-bold);\n text-transform: uppercase;\n letter-spacing: var(--hogai-ls-md);\n color: var(--hogai-black);\n }\n .form-field__helper {\n font-size: var(--hogai-fs-sm);\n color: var(--hogai-gray-medium);\n margin-top: -4px;\n }\n\n .option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }\n .option-grid--wall { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }\n\n .option-card input[type=\"radio\"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }\n .option-card label {\n display: flex; flex-direction: column; align-items: center; gap: 8px;\n padding: 14px 10px; height: 100%;\n border: 1px solid var(--hogai-gray-border);\n border-radius: var(--hogai-radius-sm);\n cursor: pointer;\n transition: border-color var(--hogai-transition-base), background-color var(--hogai-transition-base);\n text-align: center;\n user-select: none;\n }\n .option-card label:hover { border-color: var(--hogai-black); }\n .option-card input[type=\"radio\"]:checked + label { border-color: var(--hogai-black); background-color: var(--hogai-off-white); }\n .option-card input[type=\"radio\"]:focus-visible + label { outline: 2px solid var(--hogai-black); outline-offset: 2px; }\n .option-card__swatch { width: 32px; height: 32px; border-radius: var(--hogai-radius-sm); border: 1px solid rgba(0,0,0,0.08); flex-shrink: 0; }\n .option-card__text { font-size: var(--hogai-fs-sm); text-transform: uppercase; letter-spacing: var(--hogai-ls-md); color: var(--hogai-black); line-height: 1.3; }\n .option-card__sub { font-size: 11px; color: var(--hogai-gray-medium); text-transform: none; letter-spacing: 0; margin-top: -4px; }\n\n \/* Range *\/\n .range-row { display: flex; align-items: center; gap: 12px; }\n .range-row input[type=\"range\"] {\n flex: 1; -webkit-appearance: none; height: 2px;\n background: var(--hogai-gray-light); border-radius: 1px; outline: none; cursor: pointer;\n }\n .range-row input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none; width: 18px; height: 18px;\n border-radius: 50%; background: var(--hogai-black); cursor: pointer;\n transition: transform var(--hogai-transition-fast);\n }\n .range-row input[type=\"range\"]::-webkit-slider-thumb:hover { transform: scale(1.2); }\n .range-row input[type=\"range\"]::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: 50%; background: var(--hogai-black); cursor: pointer; }\n .range-row input[type=\"range\"]:focus-visible { outline: 2px solid var(--hogai-black); outline-offset: 4px; }\n .range-label { font-size: var(--hogai-fs-sm); color: var(--hogai-gray-medium); white-space: nowrap; min-width: 80px; text-align: right; }\n\n .btn-build {\n display: block; width: 100%; padding: 14px 20px;\n font-family: var(--hogai-font-primary); font-size: var(--hogai-fs-md);\n font-weight: var(--hogai-fw-regular); text-transform: uppercase;\n letter-spacing: var(--hogai-ls-lg); color: var(--hogai-white);\n background-color: var(--hogai-black); border: 1px solid var(--hogai-black);\n border-radius: var(--hogai-radius-sm); cursor: pointer;\n transition: background-color var(--hogai-transition-base); text-align: center;\n }\n .btn-build:hover { background-color: #333; }\n\n .field-error { display: none; font-size: var(--hogai-fs-sm); color: #c0392b; margin-top: 4px; }\n .field-error.visible { display: block; }\n\n \/* \u2500\u2500 RESULTS \u2500\u2500 *\/\n #results { display: none; margin-bottom: 40px; }\n #results.visible { display: block; }\n .results-divider { border: none; border-top: 1px solid var(--hogai-gray-light); margin-bottom: 40px; }\n .results-heading { font-family: var(--hogai-font-primary); font-size: var(--hogai-fs-xl); font-weight: var(--hogai-fw-regular); text-transform: uppercase; color: var(--hogai-text-heading); margin-bottom: 6px; }\n .results-sub { font-size: var(--hogai-fs-base); color: var(--hogai-gray-medium); margin-bottom: 32px; }\n\n .palette-strip { display: flex; height: 80px; border-radius: var(--hogai-radius-sm); overflow: hidden; margin-bottom: 32px; box-shadow: var(--hogai-shadow-card); }\n .palette-strip__block { flex: 1; }\n\n .colour-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; }\n .colour-card { border: 1px solid var(--hogai-gray-light); border-radius: var(--hogai-radius-sm); overflow: hidden; }\n .colour-card__swatch { height: 80px; width: 100%; }\n .colour-card__body { padding: 14px; }\n .colour-card__role { font-size: var(--hogai-fs-xs); text-transform: uppercase; letter-spacing: 1.5px; color: var(--hogai-gray-medium); margin-bottom: 4px; }\n .colour-card__name { font-size: var(--hogai-fs-base); font-weight: var(--hogai-fw-bold); text-transform: uppercase; color: var(--hogai-black); margin-bottom: 6px; }\n .colour-card__product { font-size: var(--hogai-fs-sm); color: var(--hogai-text-primary); line-height: 1.4; }\n .colour-card__hex { display: inline-block; margin-top: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--hogai-gray-medium); padding: 2px 6px; border: 1px solid var(--hogai-gray-light); border-radius: var(--hogai-radius-pill); }\n\n .rationale-box { padding: 20px; background-color: var(--hogai-off-white); border-left: 3px solid var(--hogai-black); margin-bottom: 20px; }\n .rationale-box p { font-size: var(--hogai-fs-base); line-height: var(--hogai-lh-base); color: var(--hogai-text-primary); }\n\n .lighting-note { display: none; align-items: flex-start; gap: 10px; padding: 14px 16px; background-color: #fff8f0; border: 1px solid #ffe0c0; border-radius: var(--hogai-radius-sm); margin-bottom: 32px; font-size: var(--hogai-fs-sm); color: var(--hogai-text-primary); line-height: 1.5; }\n .lighting-note.visible { display: flex; }\n .lighting-note__icon { flex-shrink: 0; font-size: 18px; }\n\n \/* \u2500\u2500 PRODUCT SHOWCASE \u2500\u2500 *\/\n .product-showcase { margin-bottom: 48px; }\n .products-heading { font-family: var(--hogai-font-primary); font-size: var(--hogai-fs-xl); font-weight: var(--hogai-fw-regular); text-transform: uppercase; color: var(--hogai-text-heading); margin-bottom: 6px; }\n .products-sub { font-size: var(--hogai-fs-base); color: var(--hogai-gray-medium); margin-bottom: 24px; }\n\n .product-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }\n\n .prod-card { display: flex; flex-direction: column; border: 1px solid var(--hogai-gray-light); border-radius: var(--hogai-radius-sm); overflow: hidden; transition: box-shadow var(--hogai-transition-base); text-decoration: none; color: inherit; }\n .prod-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }\n .prod-card__img-wrap { aspect-ratio: 1 \/ 1; overflow: hidden; background-color: var(--hogai-off-white); }\n .prod-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--hogai-transition-base); }\n .prod-card:hover .prod-card__img-wrap img { transform: scale(1.03); }\n .prod-card__body { padding: 14px; display: flex; flex-direction: column; flex: 1; }\n .prod-card__type { font-size: var(--hogai-fs-xs); text-transform: uppercase; letter-spacing: 1.5px; color: var(--hogai-gray-medium); margin-bottom: 4px; }\n .prod-card__name { font-size: var(--hogai-fs-base); font-weight: var(--hogai-fw-regular); text-transform: uppercase; color: var(--hogai-black); margin-bottom: 8px; line-height: 1.3; flex: 1; }\n .prod-card__price { font-size: var(--hogai-fs-base); font-weight: var(--hogai-fw-bold); color: var(--hogai-black); margin-bottom: 12px; }\n .prod-card__link { display: inline-block; font-size: var(--hogai-fs-sm); text-transform: uppercase; letter-spacing: var(--hogai-ls-md); color: var(--hogai-black); text-decoration: none; border-bottom: 1px solid var(--hogai-black); padding-bottom: 2px; transition: opacity var(--hogai-transition-fast); align-self: flex-start; }\n .prod-card:hover .prod-card__link { opacity: 0.6; }\n .products-note { font-size: var(--hogai-fs-sm); color: var(--hogai-gray-medium); text-align: center; margin-top: 16px; }\n\n \/* \u2500\u2500 CTA \u2500\u2500 *\/\n #cta { display: none; padding: 40px 32px; background-color: #e6e6e6; border-radius: var(--hogai-radius-sm); text-align: center; margin-bottom: 64px; }\n #cta.visible { display: block; }\n .cta__eyebrow { font-size: var(--hogai-fs-sm); text-transform: uppercase; letter-spacing: 2px; color: rgba(0,0,0,0.5); margin-bottom: 12px; }\n .cta__heading { font-family: var(--hogai-font-primary); font-size: clamp(20px, 4vw, var(--hogai-fs-3xl)); font-weight: var(--hogai-fw-regular); text-transform: uppercase; color: var(--hogai-black); margin-bottom: 12px; line-height: var(--hogai-lh-tight); }\n .cta__sub { font-size: var(--hogai-fs-base); color: rgba(0,0,0,0.65); margin-bottom: 28px; max-width: 460px; margin-inline: auto; }\n .btn-cta { display: inline-block; padding: 14px 32px; font-family: var(--hogai-font-primary); font-size: var(--hogai-fs-md); font-weight: var(--hogai-fw-regular); text-transform: uppercase; letter-spacing: var(--hogai-ls-lg); color: var(--hogai-white); background-color: var(--hogai-black); border: 1px solid var(--hogai-black); border-radius: var(--hogai-radius-sm); cursor: pointer; text-decoration: none; transition: background-color var(--hogai-transition-base), color var(--hogai-transition-base); }\n .btn-cta:hover { background-color: transparent; color: var(--hogai-black); }\n .cta__phone { margin-top: 20px; margin-bottom: 4px; font-size: var(--hogai-fs-base); color: rgba(0,0,0,0.75); }\n .cta__trust { margin-top: 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(0,0,0,0.35); }\n .reset-link { display: block; text-align: center; margin-top: 16px; font-size: var(--hogai-fs-sm); color: rgba(0,0,0,0.5); text-decoration: underline; cursor: pointer; background: none; border: none; font-family: var(--hogai-font-primary); }\n .reset-link:hover { color: var(--hogai-black); }\n\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n @media (max-width: 600px) {\n .option-grid { grid-template-columns: repeat(2, 1fr); }\n .option-grid--wall { grid-template-columns: repeat(3, 1fr); }\n .colour-cards { grid-template-columns: 1fr; }\n .product-grid-3 { grid-template-columns: 1fr; }\n #cta { padding: 28px 20px; }\n }\n @media (min-width: 601px) and (max-width: 860px) {\n .product-grid-3 { grid-template-columns: repeat(2, 1fr); }\n }\n @media (max-width: 380px) {\n .option-grid--wall { grid-template-columns: repeat(2, 1fr); }\n }\n\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(12px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .anim-fade-up { animation: fadeUp 0.4s ease both; }\n <\/style>\n<\/head>\n<body>\n\n<main id=\"main-content\">\n <div class=\"hogai-wrap\">\n\n \n <section class=\"tool-hero\" aria-labelledby=\"tool-title\">\n <div class=\"tool-hero__dots\" aria-hidden=\"true\">\n <span class=\"active\" id=\"dot-1\"><\/span>\n <span id=\"dot-2\"><\/span>\n <span id=\"dot-3\"><\/span>\n <span id=\"dot-4\"><\/span>\n <\/div>\n <h1 id=\"tool-title\">Build Your Colour Palette<\/h1>\n <\/section>\n\n \n <section class=\"brand-intro\" aria-label=\"About HOGAI colours\">\n <p class=\"brand-intro__lead\">\n Every HOGAI furniture piece and textile exists in <strong>12 carefully considered colours<\/strong> \u2014 none accidental, every one intentional. Inspired simultaneously by the minimalist discipline of the Bauhaus and the energy of Memphis pattern, these colours are not a backdrop. They are <strong>a design tool<\/strong>: each carries its own emotion, its own role, and its own place in an interior composition.\n <\/p>\n\n <div class=\"color-categories\" role=\"list\" aria-label=\"Three HOGAI colour categories\">\n\n \n <div class=\"color-cat\" role=\"listitem\">\n <div class=\"color-cat__meta\">\n <span class=\"color-cat__tag color-cat__tag--dopamine\">Dopamine Colors<\/span>\n <h3 class=\"color-cat__title\">Energetic<\/h3>\n <\/div>\n <div class=\"color-cat__swatches\" aria-label=\"Energetic colours: Cobalt Love, Orange Joy, Red Light\">\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#1440b8;\" title=\"Cobalt Love\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Cobalt Love<\/span>\n <\/div>\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#DA6E00;\" title=\"Orange Joy\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Orange Joy<\/span>\n <\/div>\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#e0281a;\" title=\"Red Light\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Red Light<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"color-cat\" role=\"listitem\">\n <div class=\"color-cat__meta\">\n <span class=\"color-cat__tag color-cat__tag--deep\">Deep Shades<\/span>\n <h3 class=\"color-cat__title\">Deep<\/h3>\n <\/div>\n <div class=\"color-cat__swatches\" aria-label=\"Deep colours: Burgundy Star, Green Bottle, Blue Jeans, Black Night\">\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#6e1332;\" title=\"Burgundy Star\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Burgundy Star<\/span>\n <\/div>\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#375e30;\" title=\"Green Bottle\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Green Bottle<\/span>\n <\/div>\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#2a5fa5;\" title=\"Blue Jeans\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Blue Jeans<\/span>\n <\/div>\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#000000;\" title=\"Black Night\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Black Night<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"color-cat\" role=\"listitem\">\n <div class=\"color-cat__meta\">\n <span class=\"color-cat__tag color-cat__tag--pastel\">Pastels<\/span>\n <h3 class=\"color-cat__title\">Soft & Subtle<\/h3>\n <\/div>\n <div class=\"color-cat__swatches\" aria-label=\"Pastel colours: Pink Power, Baby Blue, Grey Flow, Dusty Sage, Ecru Lady\">\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#D8A0A6;\" title=\"Pink Power\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Pink Power<\/span>\n <\/div>\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#8ab4cc;\" title=\"Baby Blue\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Baby Blue<\/span>\n <\/div>\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#9ea3b0;\" title=\"Grey Flow\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Grey Flow<\/span>\n <\/div>\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#a3b18a;\" title=\"Dusty Sage\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Dusty Sage<\/span>\n <\/div>\n <div class=\"color-chip\">\n <div class=\"color-chip__dot\" style=\"background:#d5c9a1;\" title=\"Ecru Lady\" aria-hidden=\"true\"><\/div>\n <span class=\"color-chip__name\">Ecru Lady<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n <p class=\"brand-intro__cta-hint\">Answer 4 questions. Get a custom 3-colour HOGAI palette \u2014 with product suggestions for your interior.<\/p>\n <\/section>\n\n \n <form class=\"palette-form\" id=\"palette-form\" novalidate aria-label=\"Colour palette builder\" onsubmit=\"return false;\">\n\n \n <fieldset class=\"form-field\">\n <legend class=\"form-field__label\" id=\"wall-legend\">1. What’s the dominant tone of your walls or floor?<\/legend>\n <p class=\"form-field__helper\" id=\"wall-helper\">Choose the colour that covers the most surface in your room.<\/p>\n <div class=\"option-grid option-grid--wall\" role=\"group\" aria-labelledby=\"wall-legend\" aria-describedby=\"wall-helper\">\n <div class=\"option-card\">\n <input type=\"radio\" name=\"wall\" id=\"wall-white\" value=\"white\" aria-label=\"Pure white\">\n <label for=\"wall-white\"><span class=\"option-card__swatch\" style=\"background:#ffffff;border-color:#ddd;\" aria-hidden=\"true\"><\/span><span class=\"option-card__text\">White<\/span><\/label>\n <\/div>\n <div class=\"option-card\">\n <input type=\"radio\" name=\"wall\" id=\"wall-offwhite\" value=\"offwhite\" aria-label=\"Cream \/ off-white\">\n <label for=\"wall-offwhite\"><span class=\"option-card__swatch\" style=\"background:#f5f0e8;\" aria-hidden=\"true\"><\/span><span class=\"option-card__text\">Cream<\/span><\/label>\n <\/div>\n <div class=\"option-card\">\n <input type=\"radio\" name=\"wall\" id=\"wall-lightgrey\" value=\"lightgrey\" aria-label=\"Light grey\">\n <label for=\"wall-lightgrey\"><span class=\"option-card__swatch\" style=\"background:#c8c8c8;\" aria-hidden=\"true\"><\/span><span class=\"option-card__text\">Light Grey<\/span><\/label>\n <\/div>\n <div class=\"option-card\">\n <input type=\"radio\" name=\"wall\" id=\"wall-beige\" value=\"beige\" aria-label=\"Warm beige\">\n <label for=\"wall-beige\"><span class=\"option-card__swatch\" style=\"background:#c5a880;\" aria-hidden=\"true\"><\/span><span class=\"option-card__text\">Warm Beige<\/span><\/label>\n <\/div>\n <div class=\"option-card\">\n <input type=\"radio\" name=\"wall\" id=\"wall-dark\" value=\"dark\" aria-label=\"Dark or charcoal\">\n <label for=\"wall-dark\"><span class=\"option-card__swatch\" style=\"background:#333333;\" aria-hidden=\"true\"><\/span><span class=\"option-card__text\">Dark \/ Charcoal<\/span><\/label>\n <\/div>\n <div class=\"option-card\">\n <input type=\"radio\" name=\"wall\" id=\"wall-wood\" value=\"wood\" aria-label=\"Natural wood\">\n <label for=\"wall-wood\"><span class=\"option-card__swatch\" style=\"background:#a0714f;\" aria-hidden=\"true\"><\/span><span class=\"option-card__text\">Natural Wood<\/span><\/label>\n <\/div>\n <\/div>\n <span class=\"field-error\" id=\"wall-error\" role=\"alert\" aria-live=\"assertive\">Please choose a wall tone to continue.<\/span>\n <\/fieldset>\n\n \n <fieldset class=\"form-field\">\n <legend class=\"form-field__label\" id=\"mood-legend\">2. What feeling should your room give off?<\/legend>\n <p class=\"form-field__helper\" id=\"mood-helper\">Think of the first word your guest should feel walking in.<\/p>\n <div class=\"option-grid\" role=\"group\" aria-labelledby=\"mood-legend\" aria-describedby=\"mood-helper\">\n <div class=\"option-card\">\n <input type=\"radio\" name=\"mood\" id=\"mood-energetic\" value=\"energetic\" aria-label=\"Energetic \u2014 bold, vibrant\">\n <label for=\"mood-energetic\"><span style=\"font-size:22px;\" aria-hidden=\"true\">\u26a1<\/span><span class=\"option-card__text\">Energetic<\/span><span class=\"option-card__sub\">Bold, vibrant<\/span><\/label>\n <\/div>\n <div class=\"option-card\">\n <input type=\"radio\" name=\"mood\" id=\"mood-calm\" value=\"calm\" aria-label=\"Calm \u2014 soft, soothing\">\n <label for=\"mood-calm\"><span style=\"font-size:22px;\" aria-hidden=\"true\">\ud83c\udf3f<\/span><span class=\"option-card__text\">Calm<\/span><span class=\"option-card__sub\">Soft, soothing<\/span><\/label>\n <\/div>\n <div class=\"option-card\">\n <input type=\"radio\" name=\"mood\" id=\"mood-dramatic\" value=\"dramatic\" aria-label=\"Dramatic \u2014 intense, expressive\">\n <label for=\"mood-dramatic\"><span style=\"font-size:22px;\" aria-hidden=\"true\">\ud83c\udfad<\/span><span class=\"option-card__text\">Dramatic<\/span><span class=\"option-card__sub\">Intense, expressive<\/span><\/label>\n <\/div>\n <div class=\"option-card\">\n <input type=\"radio\" name=\"mood\" id=\"mood-playful\" value=\"playful\" aria-label=\"Playful \u2014 joyful, expressive\">\n <label for=\"mood-playful\"><span style=\"font-size:22px;\" aria-hidden=\"true\">\ud83c\udfa8<\/span><span class=\"option-card__text\">Playful<\/span><span class=\"option-card__sub\">Joyful, expressive<\/span><\/label>\n <\/div>\n <\/div>\n <span class=\"field-error\" id=\"mood-error\" role=\"alert\" aria-live=\"assertive\">Please choose a mood to continue.<\/span>\n <\/fieldset>\n\n \n <div class=\"form-field\">\n <label class=\"form-field__label\" for=\"pieces-range\" id=\"pieces-label\">3. How many HOGAI accent pieces are you planning?<\/label>\n <p class=\"form-field__helper\" id=\"pieces-helper\">One bold piece makes a statement. Three let you tell the full story.<\/p>\n <div class=\"range-row\">\n <input type=\"range\" id=\"pieces-range\" name=\"pieces\" min=\"1\" max=\"3\" step=\"1\" value=\"2\"\n aria-labelledby=\"pieces-label\" aria-describedby=\"pieces-helper pieces-value-label\"\n aria-valuemin=\"1\" aria-valuemax=\"3\" aria-valuenow=\"2\" aria-valuetext=\"2 pieces\"\n oninput=\"updatePiecesLabel(this)\">\n <span class=\"range-label\" id=\"pieces-value-label\" aria-live=\"polite\">2 pieces<\/span>\n <\/div>\n <\/div>\n\n \n <fieldset class=\"form-field\">\n <legend class=\"form-field__label\" id=\"lighting-legend\">4. What’s the main light source in this room?<\/legend>\n <p class=\"form-field__helper\" id=\"lighting-helper\">Colours read differently in warm artificial light than in natural daylight.<\/p>\n <div class=\"option-grid\" role=\"group\" aria-labelledby=\"lighting-legend\" aria-describedby=\"lighting-helper\">\n <div class=\"option-card\">\n <input type=\"radio\" name=\"lighting\" id=\"lighting-natural\" value=\"natural\" aria-label=\"Mainly natural daylight\">\n <label for=\"lighting-natural\"><span style=\"font-size:22px;\" aria-hidden=\"true\">\u2600\ufe0f<\/span><span class=\"option-card__text\">Natural<\/span><span class=\"option-card__sub\">Mostly daylight<\/span><\/label>\n <\/div>\n <div class=\"option-card\">\n <input type=\"radio\" name=\"lighting\" id=\"lighting-artificial\" value=\"artificial\" aria-label=\"Mainly artificial warm bulbs\">\n <label for=\"lighting-artificial\"><span style=\"font-size:22px;\" aria-hidden=\"true\">\ud83d\udca1<\/span><span class=\"option-card__text\">Artificial<\/span><span class=\"option-card__sub\">Warm bulbs<\/span><\/label>\n <\/div>\n <div class=\"option-card\">\n <input type=\"radio\" name=\"lighting\" id=\"lighting-mixed\" value=\"mixed\" aria-label=\"Mixed \u2014 both sources\">\n <label for=\"lighting-mixed\"><span style=\"font-size:22px;\" aria-hidden=\"true\">\ud83c\udf24<\/span><span class=\"option-card__text\">Mixed<\/span><span class=\"option-card__sub\">Both sources<\/span><\/label>\n <\/div>\n <\/div>\n <span class=\"field-error\" id=\"lighting-error\" role=\"alert\" aria-live=\"assertive\">Please choose a lighting type to continue.<\/span>\n <\/fieldset>\n\n <button type=\"button\" class=\"btn-build\" id=\"build-btn\" onclick=\"buildPalette()\">Build my palette<\/button>\n\n <\/form>\n\n \n <section id=\"results\" aria-label=\"Your colour palette\" aria-live=\"polite\" aria-atomic=\"true\">\n <hr class=\"results-divider\" aria-hidden=\"true\">\n <h2 class=\"results-heading\" id=\"results-name\"><\/h2>\n <p class=\"results-sub\" id=\"results-sub\"><\/p>\n <div class=\"palette-strip\" id=\"palette-strip\" aria-hidden=\"true\"><\/div>\n <div class=\"colour-cards\" id=\"colour-cards\"><\/div>\n <div class=\"rationale-box\" role=\"note\" aria-label=\"Why this palette works\">\n <p id=\"rationale-text\"><\/p>\n <\/div>\n <div class=\"lighting-note\" id=\"lighting-note\" role=\"note\" aria-label=\"Lighting tip\">\n <span class=\"lighting-note__icon\" aria-hidden=\"true\">\ud83d\udca1<\/span>\n <span id=\"lighting-note-text\"><\/span>\n <\/div>\n <\/section>\n\n \n <section id=\"product-showcase\" class=\"product-showcase\" style=\"display:none;\" aria-label=\"Products in your palette\">\n <h3 class=\"products-heading\">Products in your palette<\/h3>\n <p class=\"products-sub\">Selected HOGAI pieces in the colours of your composition.<\/p>\n <div class=\"product-grid-3\" id=\"product-grid\"><\/div>\n <p class=\"products-note\">Prices incl. VAT & shipping \u00b7 Free shipping in Poland from PLN 600<\/p>\n <\/section>\n\n \n <section id=\"cta\" aria-label=\"Explore the HOGAI collection\">\n <p class=\"cta__eyebrow\">Your palette is ready<\/p>\n <h2 class=\"cta__heading\" id=\"cta-heading\">Explore the full collection<\/h2>\n <p class=\"cta__sub\">Every piece is designed and made in Poland. Free shipping within Poland on orders over PLN 600.<\/p>\n <a id=\"cta-btn\"\n href=\"https:\/\/hogai.store\/en\/store\/?utm_source=palette-tool&utm_medium=lead-magnet&utm_campaign=colour-palette-builder\"\n class=\"btn-cta\" target=\"_blank\" rel=\"noopener noreferrer\"\n aria-label=\"Explore the HOGAI collection \u2014 opens in a new tab\"\n onclick=\"fireCTAEvent()\">\n Explore the collection →\n <\/a>\n <p class=\"cta__phone\">Call us to discuss your choices: <a href=\"tel:+48780635148\" style=\"color:inherit;text-decoration:underline;\">+48 780 635 148<\/a><\/p>\n <p class=\"cta__trust\">Polish design \u00b7 Bauhaus meets Memphis \u00b7 Vogue, Design Milk, Architectural Digest<\/p>\n <button class=\"reset-link\" onclick=\"resetTool()\" aria-label=\"Start over and build a new palette\">Build another palette<\/button>\n <\/section>\n\n <\/div>\n<\/main>\n\n<script>\n window.dataLayer = window.dataLayer || [];\n\n \/* \u2500\u2500 PRODUCT DATABASE (English URLs & EUR prices) \u2500\u2500 *\/\n \/* EDIT: Update product names, prices, image URLs, or product page links below *\/\n const PRODUCTS = {\n '#1440b8': {\n mirror: { name: 'Cellist Mirror COBALT LOVE', price: '\u20ac2 444', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2023\/03\/2.04.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/cellist-mirror-cobalt-love\/' },\n table: { name: 'Tailor Nightstand COBALT LOVE', price: '\u20ac664', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2024\/06\/w029_1_4.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/tailor-nightstand-cobalt-love\/' },\n textile: { name: 'Sprinkle Cotton Blanket COBALT POP',price: '\u20ac133', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2026\/03\/sprinkle2_front.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/sprinkle-cotton-blanket-cobalt-pop\/' }\n },\n '#e91e7e': {\n mirror: { name: 'Cellist Mirror PINK POWER', price: '\u20ac2 444', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2023\/03\/2.09.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/cellist-mirror-pink-power\/' },\n table: { name: 'Tailor Nightstand PINK POWER', price: '\u20ac664', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2024\/06\/w029_1_9.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/tailor-nightsand-pink-power\/' },\n textile: { name: 'Iggy Cotton Blanket PINK LUKIER', price: '\u20ac133', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2026\/02\/49-1.png', url: 'https:\/\/hogai.store\/en\/produkt\/cotton-blanket-iggy-pink-lukier\/' }\n },\n '#ff5723': {\n mirror: { name: 'Artist Mirror ORANGE JOY', price: '\u20ac2 955', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2023\/03\/3.03.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/artist-mirror-orange-joy\/' },\n table: { name: 'Tailor Nightstand ORANGE JOY', price: '\u20ac664', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2024\/06\/w029_1_3.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/tailor-nightstand-orange-joy\/' },\n textile: { name: 'Sprinkle Cotton Blanket PASTEL BLOSSOM', price: '\u20ac133', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2026\/03\/sprinkle1_front.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/sprinkle-cotton-blanket-pastel-blossom\/' }\n },\n '#a3b18a': {\n mirror: { name: 'Cellist Mirror DUSTY SAGE', price: '\u20ac2 444', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2025\/12\/2.01.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/cellist-mirror-dusty-sage\/' },\n table: { name: 'Tailor Nightstand GREEN BOTTLE', price: '\u20ac664', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2024\/06\/w029_1_6.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/tailor-nightstand-green-bottle\/' },\n textile: { name: 'Iggy Cotton Blanket CREAM KOKOS', price: '\u20ac133', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2026\/02\/4.png', url: 'https:\/\/hogai.store\/en\/produkt\/cotton-blanket-iggy-cream-kokos\/' }\n },\n '#6e1332': {\n mirror: { name: 'Artist Mirror BURGUNDY STAR', price: '\u20ac2 955', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2023\/03\/3.05.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/artist-mirror-burgundy-star\/' },\n table: { name: 'Tutor Nightstand BURGUNDY STAR', price: '\u20ac623', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2024\/06\/w030_1_5.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/tutor-nightstand-burgundy-star\/' },\n textile: { name: 'Iggy Cotton Blanket BURGUNDY LOLA', price: '\u20ac133', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2026\/02\/30.png', url: 'https:\/\/hogai.store\/en\/produkt\/cotton-blanket-iggy-burgundy-lola\/' }\n },\n '#000000': {\n mirror: { name: 'Cellist Mirror BLACK NIGHT', price: '\u20ac2 444', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2023\/03\/2.07.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/cellist-mirror-black-night\/' },\n table: { name: 'Tailor Nightstand BLACK NIGHT', price: '\u20ac664', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2024\/06\/w029_1_7.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/tailor-nightstand-black-night\/' },\n textile: { name: 'Op-Art Cotton Blanket POWER PUSSY', price: '\u20ac169', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2024\/01\/17.png', url: 'https:\/\/hogai.store\/en\/produkt\/op-art-blanket-power-pussy\/' }\n },\n '#9b8bb4': {\n mirror: { name: 'Cellist Mirror GREY FLOW', price: '\u20ac2 444', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2023\/03\/2.10.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/cellist-mirror-grey-flow\/' },\n table: { name: 'Tailor Nightstand GREY FLOW', price: '\u20ac664', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2024\/06\/w029_1_10.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/tailor-nightstand-grey-flow\/' },\n textile: { name: 'Iggy Cotton Blanket LILLY PIXEL', price: '\u20ac133', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2026\/02\/LilyPixel_front.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/cotton-blanket-iggy-lilly-pixel\/' }\n },\n '#d5c9a1': {\n mirror: { name: 'Cellist Mirror ECRU LADY', price: '\u20ac2 444', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2023\/03\/2.08.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/cellist-mirror-ecru-lady\/' },\n table: { name: 'Tailor Nightstand ECRU LADY', price: '\u20ac664', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2024\/06\/w029_1_8.jpg', url: 'https:\/\/hogai.store\/en\/produkt\/tailor-nightstand-ecru-lady\/' },\n textile: { name: 'Iggy Cotton Blanket CREAM CUKIER', price: '\u20ac133', img: 'https:\/\/hogai.store\/wp-content\/uploads\/2026\/02\/58-1.png', url: 'https:\/\/hogai.store\/en\/produkt\/cotton-blanket-iggy-cream-cukier\/' }\n }\n };\n\n \/* \u2500\u2500 PALETTE DATA \u2500\u2500 *\/\n \/* EDIT: English rationale text, palette names, or product descriptions *\/\n const PALETTES = {\n white_energetic: {\n name: \"Electric Contrast\",\n rationale: \"White walls act as an empty canvas \u2014 cobalt lands with full force. Orange adds energy without competing with the anchor, and ecru softens the composition, giving it the character of a deliberate choice.\",\n colors: [\n { hex: '#1440b8', label: 'Anchor \u00b7 30%', colorName: 'Cobalt', product: 'Mirror or coffee table \u2014 the centrepiece that stops the eye.' },\n { hex: '#ff5723', label: 'Pop \u00b7 10%', colorName: 'Orange', product: 'Side table or accessories \u2014 energy in a compact form.' },\n { hex: '#d5c9a1', label: 'Bridge \u00b7 60%', colorName: 'Ecru', product: 'Blanket or cushion \u2014 ties the palette together without competing.' }\n ]\n },\n white_calm: {\n name: \"Still Morning\",\n rationale: \"Sage and lavender are natural colours that hold the eye in stillness. On white they feel light, not flat. Ecru warms the whole without letting the interior read as clinical.\",\n colors: [\n { hex: '#a3b18a', label: 'Anchor \u00b7 30%', colorName: 'Sage', product: 'Cotton blanket or textiles \u2014 quiet centrepiece of a calm interior.' },\n { hex: '#9b8bb4', label: 'Pop \u00b7 10%', colorName: 'Lavender',product: 'Decorative mirror or cushion \u2014 a gentle optical lift.' },\n { hex: '#d5c9a1', label: 'Bridge \u00b7 60%', colorName: 'Ecru', product: 'Bedding or throw \u2014 warmth that holds everything together.' }\n ]\n },\n white_dramatic: {\n name: \"Monochrome Power\",\n rationale: \"Black on white is the quintessence of the Bauhaus manifesto. Burgundy adds depth and emotion without diluting the drama. Orange is the single warm note that keeps it from severity.\",\n colors: [\n { hex: '#000000', label: 'Anchor \u00b7 30%', colorName: 'Black', product: 'Wall shelf or floor mirror \u2014 architectural and absolute.' },\n { hex: '#6e1332', label: 'Pop \u00b7 10%', colorName: 'Burgundy',product: 'Nightstand \u2014 deep colour in a compact form.' },\n { hex: '#ff5723', label: 'Bridge \u00b7 60%', colorName: 'Orange', product: 'Cushion or accessory \u2014 the only glowing note in a stark interior.' }\n ]\n },\n white_playful: {\n name: \"Studio Joy\",\n rationale: \"Pink is a colour of courage \u2014 on white it reads bold, not sweet. Lavender eases the contrast just enough, and orange gives the whole palette a Memphis vivacity that feels genuinely joyful.\",\n colors: [\n { hex: '#e91e7e', label: 'Anchor \u00b7 30%', colorName: 'Pink', product: 'Statement mirror \u2014 the first thing you see, the last thing you forget.' },\n { hex: '#ff5723', label: 'Pop \u00b7 10%', colorName: 'Orange', product: 'Stool or small table \u2014 playful scale, serious colour.' },\n { hex: '#9b8bb4', label: 'Bridge \u00b7 60%', colorName: 'Lavender',product: 'Cushion or throw \u2014 the cool note that keeps the palette cohesive.' }\n ]\n },\n offwhite_energetic: {\n name: \"Warm Pulse\",\n rationale: \"Cream walls carry warmth \u2014 pink transforms them into something vibrant rather than sleepy. Cobalt introduces a cool contrast that charges the space with energy, while ecru weaves through the walls for continuity.\",\n colors: [\n { hex: '#e91e7e', label: 'Anchor \u00b7 30%', colorName: 'Pink', product: 'Mirror \u2014 saturated colour that cuts clearly against the warm base.' },\n { hex: '#1440b8', label: 'Pop \u00b7 10%', colorName: 'Cobalt', product: 'Coffee table or shelf \u2014 cool anchor on a warm background.' },\n { hex: '#d5c9a1', label: 'Bridge \u00b7 60%', colorName: 'Ecru', product: 'Blanket or cushion \u2014 echo of the walls that unifies the palette.' }\n ]\n },\n offwhite_calm: {\n name: \"Quiet Warmth\",\n rationale: \"On cream walls, sage feels organic and deeply considered. Ecru as bridge is almost invisible \u2014 a seamless extension of the base. Lavender provides just enough contrast to keep the room from feeling one-note.\",\n colors: [\n { hex: '#a3b18a', label: 'Anchor \u00b7 30%', colorName: 'Sage', product: 'Jacquard blanket \u2014 texture and colour working as one.' },\n { hex: '#d5c9a1', label: 'Bridge \u00b7 60%', colorName: 'Ecru', product: 'Bedding or throw \u2014 warmth bridging wall and accent.' },\n { hex: '#9b8bb4', label: 'Pop \u00b7 10%', colorName: 'Lavender',product: 'Decorative cushion \u2014 quiet note that rewards a second glance.' }\n ]\n },\n offwhite_dramatic: {\n name: \"Old World Drama\",\n rationale: \"Burgundy on cream has the quality of Flemish painting \u2014 rich, but not aggressive. Black sharpens everything, and ecru connects the wall to the palette, making drama feel liveable, not theatrical.\",\n colors: [\n { hex: '#6e1332', label: 'Anchor \u00b7 30%', colorName: 'Burgundy',product: 'Mirror or table \u2014 richness in architectural form.' },\n { hex: '#000000', label: 'Pop \u00b7 10%', colorName: 'Black', product: 'Shelf or hanger \u2014 sharp element that defines the composition.' },\n { hex: '#d5c9a1', label: 'Bridge \u00b7 60%', colorName: 'Ecru', product: 'Blanket or cushion \u2014 keeps drama from overwhelming.' }\n ]\n },\n offwhite_playful: {\n name: \"Garden Party\",\n rationale: \"Pink on cream is unexpectedly sophisticated \u2014 the wall's warmth softens the saturation into something remarkable. Lavender adds a whimsical note, and sage keeps it fresh and grounded.\",\n colors: [\n { hex: '#e91e7e', label: 'Anchor \u00b7 30%', colorName: 'Pink', product: 'Statement mirror \u2014 colour that reads as a conscious choice, not coincidence.' },\n { hex: '#9b8bb4', label: 'Pop \u00b7 10%', colorName: 'Lavender',product: 'Cushion or ornament \u2014 a dreamy secondary note.' },\n { hex: '#a3b18a', label: 'Bridge \u00b7 60%', colorName: 'Sage', product: 'Throw or textiles \u2014 earthy grounding for a light palette.' }\n ]\n },\n lightgrey_energetic: {\n name: \"Urban Heat\",\n rationale: \"Grey is neutral enough to let orange fully express itself \u2014 the contrast is instant and alive. Cobalt adds intellectual depth, and sage grounds the palette so it reads as designed, not accidental.\",\n colors: [\n { hex: '#ff5723', label: 'Anchor \u00b7 30%', colorName: 'Orange', product: 'Coffee table or shelf \u2014 warmth jumping off the cool grey.' },\n { hex: '#1440b8', label: 'Pop \u00b7 10%', colorName: 'Cobalt', product: 'Mirror \u2014 cool counterpoint that sharpens the whole palette.' },\n { hex: '#a3b18a', label: 'Bridge \u00b7 60%', colorName: 'Sage', product: 'Blanket \u2014 organic note softening the urban edge.' }\n ]\n },\n lightgrey_calm: {\n name: \"Nordic Haze\",\n rationale: \"Lavender and grey share a cool undertone that creates effortless harmony. Sage brings in nature, and ecru provides warmth so the room doesn't read as cold.\",\n colors: [\n { hex: '#9b8bb4', label: 'Anchor \u00b7 30%', colorName: 'Lavender',product: 'Mirror \u2014 colour that reads painterly against a cool grey wall.' },\n { hex: '#a3b18a', label: 'Pop \u00b7 10%', colorName: 'Sage', product: 'Textiles or cushion \u2014 organic life in a muted palette.' },\n { hex: '#d5c9a1', label: 'Bridge \u00b7 60%', colorName: 'Ecru', product: 'Blanket \u2014 warmth saving the palette from sterility.' }\n ]\n },\n lightgrey_dramatic: {\n name: \"Blueprint\",\n rationale: \"Cobalt on grey is architectural perfection \u2014 two cool tones amplifying each other. Black defines structure, and burgundy introduces emotional depth so the room tells a story.\",\n colors: [\n { hex: '#1440b8', label: 'Anchor \u00b7 30%', colorName: 'Cobalt', product: 'Large mirror \u2014 a single element that redefines the room.' },\n { hex: '#000000', label: 'Pop \u00b7 10%', colorName: 'Black', product: 'Shelf or stool \u2014 geometric anchor of the composition.' },\n { hex: '#6e1332', label: 'Bridge \u00b7 60%', colorName: 'Burgundy',product: 'Cushion or small textile \u2014 human warmth in a cool palette.' }\n ]\n },\n lightgrey_playful: {\n name: \"Confetti\",\n rationale: \"Grey is the ideal neutral for bold, playful colours \u2014 it never competes. Pink brings joy, cobalt adds credibility, and orange ties them like a Memphis mood board come to life.\",\n colors: [\n { hex: '#e91e7e', label: 'Anchor \u00b7 30%', colorName: 'Pink', product: 'Mirror \u2014 joyful saturation on a calm grey base.' },\n { hex: '#1440b8', label: 'Pop \u00b7 10%', colorName: 'Cobalt', product: 'Table \u2014 cool note giving pink something to play off.' },\n { hex: '#ff5723', label: 'Bridge \u00b7 60%', colorName: 'Orange', product: 'Accessory or cushion \u2014 the third note completing the Memphis triad.' }\n ]\n },\n beige_energetic: {\n name: \"Desert Charge\",\n rationale: \"Beige and cobalt is a timeless pairing \u2014 warmth meets cool in a way that feels both energetic and resolved. Orange amplifies the energy while sage keeps the palette from tipping over.\",\n colors: [\n { hex: '#1440b8', label: 'Anchor \u00b7 30%', colorName: 'Cobalt', product: 'Mirror or coffee table \u2014 cool boldness on warm walls.' },\n { hex: '#ff5723', label: 'Pop \u00b7 10%', colorName: 'Orange', product: 'Accessories or table \u2014 energetic peak in the palette.' },\n { hex: '#a3b18a', label: 'Bridge \u00b7 60%', colorName: 'Sage', product: 'Textiles \u2014 natural mediator between warm and cool.' }\n ]\n },\n beige_calm: {\n name: \"Earth Ritual\",\n rationale: \"Beige, sage, and ecru are variations on one organic theme \u2014 quiet, warm, grounded. This palette is about tonal sophistication: each colour is distinct, but together they read as a family.\",\n colors: [\n { hex: '#a3b18a', label: 'Anchor \u00b7 30%', colorName: 'Sage', product: 'Cotton blanket \u2014 quiet anchor of an earthy, layered palette.' },\n { hex: '#d5c9a1', label: 'Bridge \u00b7 60%', colorName: 'Ecru', product: 'Bedding or throw \u2014 almost invisible, deeply considered.' },\n { hex: '#9b8bb4', label: 'Pop \u00b7 10%', colorName: 'Lavender',product: 'Decorative cushion \u2014 the single lifted note in an earthy room.' }\n ]\n },\n beige_dramatic: {\n name: \"Terra Nova\",\n rationale: \"Burgundy is a natural drama partner for warm beige \u2014 they share a reddish earth undertone that reads old and intentional. Black sharpens the composition and ecru makes it liveable.\",\n colors: [\n { hex: '#6e1332', label: 'Anchor \u00b7 30%', colorName: 'Burgundy',product: 'Mirror or nightstand \u2014 depth complementing the warmth of the walls.' },\n { hex: '#000000', label: 'Pop \u00b7 10%', colorName: 'Black', product: 'Shelf \u2014 structural outline in a warm palette.' },\n { hex: '#d5c9a1', label: 'Bridge \u00b7 60%', colorName: 'Ecru', product: 'Cushion or blanket \u2014 bridge between wall and main piece.' }\n ]\n },\n beige_playful: {\n name: \"Bohemian Summer\",\n rationale: \"Pink on beige reads warm rather than cold \u2014 the wall softens the saturation into something unexpectedly rich. Orange adds festivity, and sage provides a botanical grounding note.\",\n colors: [\n { hex: '#e91e7e', label: 'Anchor \u00b7 30%', colorName: 'Pink', product: 'Statement mirror \u2014 warm saturation on a warm base: bold but not aggressive.' },\n { hex: '#ff5723', label: 'Pop \u00b7 10%', colorName: 'Orange', product: 'Small table or stool \u2014 a summer note in the palette.' },\n { hex: '#a3b18a', label: 'Bridge \u00b7 60%', colorName: 'Sage', product: 'Blanket \u2014 botanical breath preventing oversaturation.' }\n ]\n },\n dark_energetic: {\n name: \"Neon Archive\",\n rationale: \"Dark walls are the stage \u2014 and orange is the performer. The contrast is maximum and uncompromising. Pink adds a second vibration so the palette pulses, and ecru lifts it with warmth.\",\n colors: [\n { hex: '#ff5723', label: 'Anchor \u00b7 30%', colorName: 'Orange', product: 'Coffee table or shelf \u2014 luminous against dark walls.' },\n { hex: '#e91e7e', label: 'Pop \u00b7 10%', colorName: 'Pink', product: 'Mirror or cushion \u2014 a second frequency in the composition.' },\n { hex: '#d5c9a1', label: 'Bridge \u00b7 60%', colorName: 'Ecru', product: 'Blanket \u2014 warmth preventing dark rooms from feeling cold.' }\n ]\n },\n dark_calm: {\n name: \"Midnight Linen\",\n rationale: \"Ecru and sage on dark walls glow \u2014 they catch surrounding light. Lavender is the quiet detail that makes the room read as curated rather than stark.\",\n colors: [\n { hex: '#d5c9a1', label: 'Anchor \u00b7 30%', colorName: 'Ecru', product: 'Blanket or bedding \u2014 warmth glowing in a dark room.' },\n { hex: '#a3b18a', label: 'Bridge \u00b7 60%', colorName: 'Sage', product: 'Textiles or throw \u2014 organic life in a moody interior.' },\n { hex: '#9b8bb4', label: 'Pop \u00b7 10%', colorName: 'Lavender',product: 'Cushion \u2014 quiet note completing the palette.' }\n ]\n },\n dark_dramatic: {\n name: \"Midnight Gallery\",\n rationale: \"Dark walls demand equal weight from the palette \u2014 cobalt delivers. Burgundy adds a second layer of drama that reads painterly rather than aggressive. Orange is the single warm detail that prevents coldness.\",\n colors: [\n { hex: '#1440b8', label: 'Anchor \u00b7 30%', colorName: 'Cobalt', product: 'Large mirror \u2014 equal in weight to the dark wall behind it.' },\n { hex: '#6e1332', label: 'Pop \u00b7 10%', colorName: 'Burgundy',product: 'Table \u2014 second deep note in a high-contrast palette.' },\n { hex: '#ff5723', label: 'Bridge \u00b7 60%', colorName: 'Orange', product: 'Cushion or small accessory \u2014 warm ember saving the drama.' }\n ]\n },\n dark_playful: {\n name: \"Disco Modernism\",\n rationale: \"Pink on dark walls is a full-volume design decision \u2014 genuinely surprising and genuinely joyful. Orange amplifies the energy, and lavender cools the palette just enough to let the room breathe.\",\n colors: [\n { hex: '#e91e7e', label: 'Anchor \u00b7 30%', colorName: 'Pink', product: 'Mirror \u2014 the element that defines the room in one gesture.' },\n { hex: '#ff5723', label: 'Pop \u00b7 10%', colorName: 'Orange', product: 'Stool or table \u2014 warm amplifier of the palette.' },\n { hex: '#9b8bb4', label: 'Bridge \u00b7 60%', colorName: 'Lavender',product: 'Cushion or throw \u2014 a breath in an electrified palette.' }\n ]\n },\n wood_energetic: {\n name: \"Artisan Workshop\",\n rationale: \"Wood and orange share the same warm wavelength \u2014 combined they feel intentional and alive. Cobalt is the unexpected contrast that elevates the palette from cosy to considered. Sage grounds it in nature.\",\n colors: [\n { hex: '#ff5723', label: 'Anchor \u00b7 30%', colorName: 'Orange', product: 'Coffee table or shelf \u2014 colour resonating with the wood grain.' },\n { hex: '#1440b8', label: 'Pop \u00b7 10%', colorName: 'Cobalt', product: 'Mirror \u2014 cool counterpoint making the whole room smarter.' },\n { hex: '#a3b18a', label: 'Bridge \u00b7 60%', colorName: 'Sage', product: 'Blanket \u2014 botanical note completing the craftsman story.' }\n ]\n },\n wood_calm: {\n name: \"Forest Edit\",\n rationale: \"Wood, sage, and ecru are one colour family \u2014 the palette tells the story of a forest at dusk. Lavender is the single unexpected note that keeps the room from predictability.\",\n colors: [\n { hex: '#a3b18a', label: 'Anchor \u00b7 30%', colorName: 'Sage', product: 'Jacquard blanket \u2014 fabric that belongs to the space.' },\n { hex: '#d5c9a1', label: 'Bridge \u00b7 60%', colorName: 'Ecru', product: 'Throw or cushion \u2014 quasi-neutral deepening the warmth.' },\n { hex: '#9b8bb4', label: 'Pop \u00b7 10%', colorName: 'Lavender',product: 'Decorative mirror \u2014 the only note not from the forest.' }\n ]\n },\n wood_dramatic: {\n name: \"Dark Cabin\",\n rationale: \"Burgundy sits in the same warm register as wood \u2014 the contrast is subtle, but the depth is real. Black defines structure, and sage keeps enough nature in the palette to keep it liveable.\",\n colors: [\n { hex: '#6e1332', label: 'Anchor \u00b7 30%', colorName: 'Burgundy',product: 'Mirror or nightstand \u2014 depth echoing and amplifying the wood.' },\n { hex: '#000000', label: 'Pop \u00b7 10%', colorName: 'Black', product: 'Shelf \u2014 sharp geometric contrast against organic warmth.' },\n { hex: '#a3b18a', label: 'Bridge \u00b7 60%', colorName: 'Sage', product: 'Textiles \u2014 keeps a dramatic palette from overwhelming.' }\n ]\n },\n wood_playful: {\n name: \"Memphis Cabin\",\n rationale: \"The playfulness of orange on natural wood is irresistible \u2014 Memphis energy meets Scandinavian material honesty. Pink adds an unexpected pulse, and sage keeps the palette grounded.\",\n colors: [\n { hex: '#ff5723', label: 'Anchor \u00b7 30%', colorName: 'Orange', product: 'Statement table or stool \u2014 colour rhyming with the wood.' },\n { hex: '#e91e7e', label: 'Pop \u00b7 10%', colorName: 'Pink', product: 'Mirror \u2014 the pink you didn\\'t expect to love.' },\n { hex: '#a3b18a', label: 'Bridge \u00b7 60%', colorName: 'Sage', product: 'Blanket or textiles \u2014 natural note grounding the playfulness.' }\n ]\n }\n };\n\n \/* \u2500\u2500 LIGHTING NOTES \u2500\u2500 *\/\n \/* EDIT: English lighting tip text *\/\n const LIGHTING_NOTES = {\n cobalt_artificial: \"Cobalt reads very cool under warm artificial light. Consider adding an ecru or orange textile to balance the colour temperature \u2014 or switch to daylight bulbs above 4000K.\",\n warm_natural: \"Your room gets good natural light \u2014 your warm palette will look even richer in afternoon sun. Place the main piece on the wall opposite the window for maximum impact.\",\n dark_artificial: \"Dark walls absorb a lot of light under artificial sources. Choose bulbs above 2700K and position lamps near accent pieces so colours show their full saturation.\"\n };\n\n const PIECE_LABELS = { '1': '1 piece', '2': '2 pieces', '3': '3 or more' };\n \/* EDIT: Product type labels *\/\n const PRODUCT_TYPES = { mirror: 'Mirror', table: 'Nightstand', textile: 'Blanket' };\n\n \/* \u2500\u2500 HELPERS \u2500\u2500 *\/\n function updatePiecesLabel(input) {\n const val = input.value;\n const label = document.getElementById('pieces-value-label');\n label.textContent = PIECE_LABELS[val] || val + ' pieces';\n input.setAttribute('aria-valuenow', val);\n input.setAttribute('aria-valuetext', PIECE_LABELS[val] || val + ' pieces');\n updateDots(parseInt(val) + 1);\n }\n function updateDots(step) {\n for (let i = 1; i <= 4; i++) {\n const d = document.getElementById('dot-' + i);\n if (d) d.classList.toggle('active', i <= step);\n }\n }\n function getRadioValue(name) {\n const el = document.querySelector('input[name=\"' + name + '\"]:checked');\n return el ? el.value : null;\n }\n\n \/* \u2500\u2500 VALIDATION \u2500\u2500 *\/\n function validateForm() {\n let valid = true;\n [['wall','wall-error'],['mood','mood-error'],['lighting','lighting-error']].forEach(([name, errId]) => {\n const err = document.getElementById(errId);\n if (!getRadioValue(name)) { err.classList.add('visible'); valid = false; }\n else err.classList.remove('visible');\n });\n return valid;\n }\n\n \/* \u2500\u2500 RENDER PRODUCTS \u2500\u2500 *\/\n function renderProducts(colors) {\n const grid = document.getElementById('product-grid');\n const showcase = document.getElementById('product-showcase');\n\n const slots = [\n { type: 'mirror', key: colors[0].hex },\n { type: 'table', key: (colors[1] || colors[0]).hex },\n { type: 'textile', key: (colors[2] || colors[0]).hex }\n ];\n\n const html = slots.map(({ type, key }) => {\n const products = PRODUCTS[key];\n if (!products || !products[type]) return '';\n const p = products[type];\n return `\n <a class=\"prod-card anim-fade-up\" href=\"${p.url}?utm_source=palette-tool&utm_medium=lead-magnet&utm_campaign=colour-palette-builder\"\n target=\"_blank\" rel=\"noopener noreferrer\"\n aria-label=\"${PRODUCT_TYPES[type]}: ${p.name}, ${p.price} \u2014 opens in a new tab\"\n onclick=\"window.dataLayer.push({event:'product_card_click',tool:'colour-palette-builder',product:'${p.name}',type:'${type}'})\">\n <div class=\"prod-card__img-wrap\">\n <img decoding=\"async\" src=\"${p.img}\" alt=\"${p.name}\" loading=\"lazy\" width=\"400\" height=\"400\">\n <\/div>\n <div class=\"prod-card__body\">\n <p class=\"prod-card__type\">${PRODUCT_TYPES[type]}<\/p>\n <p class=\"prod-card__name\">${p.name}<\/p>\n <p class=\"prod-card__price\">${p.price}<\/p>\n <span class=\"prod-card__link\" aria-hidden=\"true\">View product →<\/span>\n <\/div>\n <\/a>`;\n }).join('');\n\n grid.innerHTML = html;\n showcase.style.display = html.trim() ? 'block' : 'none';\n }\n\n \/* \u2500\u2500 BUILD PALETTE \u2500\u2500 *\/\n function buildPalette() {\n if (!validateForm()) {\n const firstErr = document.querySelector('.field-error.visible');\n if (firstErr) firstErr.scrollIntoView({ behavior: 'smooth', block: 'center' });\n return;\n }\n\n const wall = getRadioValue('wall');\n const mood = getRadioValue('mood');\n const pieces = parseInt(document.getElementById('pieces-range').value);\n const lighting = getRadioValue('lighting');\n const key = wall + '_' + mood;\n const palette = PALETTES[key];\n if (!palette) return;\n\n const visibleColors = palette.colors.slice(0, Math.min(pieces, palette.colors.length));\n const wallLabel = { white:'white', offwhite:'cream', lightgrey:'light grey', beige:'warm beige', dark:'dark', wood:'natural wood' }[wall] || wall;\n\n document.getElementById('results-name').textContent = palette.name;\n document.getElementById('results-sub').textContent = `A ${visibleColors.length}-colour palette for a room with ${wallLabel} walls.`;\n\n document.getElementById('palette-strip').innerHTML = visibleColors\n .map(c => `<div class=\"palette-strip__block\" style=\"background:${c.hex};\" title=\"${c.colorName}\" aria-label=\"${c.colorName}\"><\/div>`)\n .join('');\n\n document.getElementById('colour-cards').innerHTML = visibleColors.map(c => `\n <div class=\"colour-card anim-fade-up\">\n <div class=\"colour-card__swatch\" style=\"background:${c.hex};\" aria-hidden=\"true\"><\/div>\n <div class=\"colour-card__body\">\n <p class=\"colour-card__role\">${c.label}<\/p>\n <p class=\"colour-card__name\">${c.colorName}<\/p>\n <p class=\"colour-card__product\">${c.product}<\/p>\n <span class=\"colour-card__hex\">${c.hex}<\/span>\n <\/div>\n <\/div>`).join('');\n\n document.getElementById('rationale-text').textContent = palette.rationale;\n\n const note = document.getElementById('lighting-note');\n const noteText = document.getElementById('lighting-note-text');\n const hasCobalts = visibleColors.some(c => c.hex === '#1440b8');\n const isAllWarm = visibleColors.every(c => ['#ff5723','#d5c9a1','#6e1332','#a3b18a','#e91e7e','#9b8bb4'].includes(c.hex));\n let lightMsg = '';\n if (lighting === 'artificial' && hasCobalts) lightMsg = LIGHTING_NOTES.cobalt_artificial;\n else if (lighting === 'artificial' && wall === 'dark') lightMsg = LIGHTING_NOTES.dark_artificial;\n else if (lighting === 'natural' && isAllWarm) lightMsg = LIGHTING_NOTES.warm_natural;\n noteText.textContent = lightMsg;\n note.classList.toggle('visible', !!lightMsg);\n\n renderProducts(visibleColors);\n\n document.getElementById('cta-heading').textContent = 'Explore palette ' + palette.name;\n const params = new URLSearchParams({ utm_source:'palette-tool', utm_medium:'lead-magnet', utm_campaign:'colour-palette-builder', utm_content: key });\n document.getElementById('cta-btn').href = 'https:\/\/hogai.store\/en\/store\/?' + params.toString();\n\n document.getElementById('results').classList.add('visible');\n document.getElementById('cta').classList.add('visible');\n document.getElementById('results').scrollIntoView({ behavior: 'smooth', block: 'start' });\n\n window.dataLayer.push({ event:'palette_generated', tool:'colour-palette-builder', palette:palette.name, wall, mood, pieces, lighting });\n }\n\n function fireCTAEvent() {\n window.dataLayer.push({ event:'tool_cta_click', tool:'colour-palette-builder' });\n }\n\n function resetTool() {\n document.querySelectorAll('input[type=\"radio\"]').forEach(r => r.checked = false);\n const range = document.getElementById('pieces-range');\n range.value = '2'; updatePiecesLabel(range);\n document.querySelectorAll('.field-error').forEach(e => e.classList.remove('visible'));\n document.getElementById('results').classList.remove('visible');\n document.getElementById('cta').classList.remove('visible');\n document.getElementById('product-showcase').style.display = 'none';\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n\n document.querySelectorAll('input[type=\"radio\"]').forEach(radio => {\n radio.addEventListener('change', () => {\n const w = getRadioValue('wall'), m = getRadioValue('mood'), l = getRadioValue('lighting');\n updateDots(w ? (m ? (l ? 4 : 3) : 2) : 1);\n });\n });\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Colour Palette Builder \u2014 HOGAI Build Your Colour Palette Every HOGAI furniture piece and textile exists in 12 carefully considered colours \u2014 none accidental, every one intentional. Inspired simultaneously by the minimalist discipline of the Bauhaus and the energy of Memphis pattern, these colours are not a backdrop. They are a design tool: each carries […]<\/p>\n","protected":false},"author":8,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-parts\/page_full_width.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-21847","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/pages\/21847","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/comments?post=21847"}],"version-history":[{"count":0,"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/pages\/21847\/revisions"}],"wp:attachment":[{"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/media?parent=21847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}