{"id":61,"date":"2021-07-27T17:32:58","date_gmt":"2021-07-27T17:32:58","guid":{"rendered":"https:\/\/startertemplatecloud.com\/member-g02\/?page_id=61"},"modified":"2026-03-31T16:48:16","modified_gmt":"2026-03-31T15:48:16","slug":"colour_options_choose_your_perfect_colour_palette","status":"publish","type":"page","link":"https:\/\/colourmehappydesigns.com\/index.php\/colour_options_choose_your_perfect_colour_palette\/","title":{"rendered":"Colour Options \u2014 Choose Your Perfect Colour Palette"},"content":{"rendered":"<style>.kb-row-layout-id61_72c821-3d > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id61_72c821-3d > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id61_72c821-3d > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);max-width:1000px;margin-left:auto;margin-right:auto;padding-top:var(--global-kb-spacing-lg, 3rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id61_72c821-3d > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id61_72c821-3d > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id61_72c821-3d > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id61_72c821-3d alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column61_fe2aa6-38 > .kt-inside-inner-col{border-top:3px solid #a5005d;border-right:3px solid #a5005d;border-bottom:3px solid #a5005d;border-left:3px solid #a5005d;}.kadence-column61_fe2aa6-38 > .kt-inside-inner-col,.kadence-column61_fe2aa6-38 > .kt-inside-inner-col:before{border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-right-radius:20px;border-bottom-left-radius:20px;}.kadence-column61_fe2aa6-38 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column61_fe2aa6-38 > .kt-inside-inner-col{flex-direction:column;}.kadence-column61_fe2aa6-38 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column61_fe2aa6-38 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column61_fe2aa6-38{position:relative;}@media all and (max-width: 1024px){.kadence-column61_fe2aa6-38 > .kt-inside-inner-col{border-top:3px solid #a5005d;border-right:3px solid #a5005d;border-bottom:3px solid #a5005d;border-left:3px solid #a5005d;flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column61_fe2aa6-38 > .kt-inside-inner-col{border-top:3px solid #a5005d;border-right:3px solid #a5005d;border-bottom:3px solid #a5005d;border-left:3px solid #a5005d;flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column61_fe2aa6-38\"><div class=\"kt-inside-inner-col\"><style>.kadence-column61_aff34b-17 > .kt-inside-inner-col{padding-top:var(--global-kb-spacing-xs, 1rem);padding-right:var(--global-kb-spacing-xs, 1rem);padding-bottom:var(--global-kb-spacing-xs, 1rem);padding-left:var(--global-kb-spacing-xs, 1rem);}.kadence-column61_aff34b-17 > .kt-inside-inner-col,.kadence-column61_aff34b-17 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column61_aff34b-17 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column61_aff34b-17 > .kt-inside-inner-col{flex-direction:column;}.kadence-column61_aff34b-17 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column61_aff34b-17 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column61_aff34b-17{position:relative;}@media all and (max-width: 1024px){.kadence-column61_aff34b-17 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column61_aff34b-17 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column61_aff34b-17\"><div class=\"kt-inside-inner-col\"><style>.wp-block-kadence-advancedheading.kt-adv-heading61_5f3923-6e, .wp-block-kadence-advancedheading.kt-adv-heading61_5f3923-6e[data-kb-block=\"kb-adv-heading61_5f3923-6e\"]{text-align:center;font-size:18px;font-weight:400;font-style:normal;font-family:'Cinzel Decorative';text-transform:capitalize;color:#3f4666;}.wp-block-kadence-advancedheading.kt-adv-heading61_5f3923-6e mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading61_5f3923-6e[data-kb-block=\"kb-adv-heading61_5f3923-6e\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading61_5f3923-6e img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading61_5f3923-6e[data-kb-block=\"kb-adv-heading61_5f3923-6e\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading61_5f3923-6e wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading61_5f3923-6e\">Your colours, your story\u2026<\/h2>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading61_c07221-db, .wp-block-kadence-advancedheading.kt-adv-heading61_c07221-db[data-kb-block=\"kb-adv-heading61_c07221-db\"]{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;text-align:center;font-size:15px;line-height:2;font-weight:400;font-style:normal;font-family:'Comic Neue';text-transform:uppercase;color:#09adbe;}.wp-block-kadence-advancedheading.kt-adv-heading61_c07221-db mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading61_c07221-db[data-kb-block=\"kb-adv-heading61_c07221-db\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading61_c07221-db img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading61_c07221-db[data-kb-block=\"kb-adv-heading61_c07221-db\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading61_c07221-db wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading61_c07221-db\">Tap on a colour and the star paLette will fill up. Changed your mind? No problem, just tap the star and it will disappear allowing you to choose a new colour. Alternatively, hit the surprise me button and let us inspire you. Enjoy!<\/h2>\n<\/div><\/div>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-id61_e87278-06 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id61_e87278-06 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id61_e87278-06 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:0px;padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id61_e87278-06 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id61_e87278-06 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id61_e87278-06 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id61_e87278-06 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column61_4a321d-ff > .kt-inside-inner-col,.kadence-column61_4a321d-ff > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column61_4a321d-ff > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column61_4a321d-ff > .kt-inside-inner-col{flex-direction:column;}.kadence-column61_4a321d-ff > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column61_4a321d-ff > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column61_4a321d-ff{position:relative;}@media all and (max-width: 1024px){.kadence-column61_4a321d-ff > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column61_4a321d-ff > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column61_4a321d-ff\"><div class=\"kt-inside-inner-col\">\n<div id=\"colour-playground\"> <h2>Pick Your Colours<\/h2> <div class=\"swatch-grid\"> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#3f4664\"><\/div> <span class=\"swatch-label\">Navy<\/span> <\/div> \n\n<div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#64dddf\"><\/div> <span class=\"swatch-label\">Turqouise<\/span>\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#c0ccda\"><\/div> <span class=\"swatch-label\">Sky<\/span>\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#698ece\"><\/div> <span class=\"swatch-label\">Blue<\/span>\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#628db0\"><\/div> <span class=\"swatch-label\">Teal<\/span>\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#839097\"><\/div> <span class=\"swatch-label\">Sage<\/span>\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#336666\"><\/div> <span class=\"swatch-label\">Green<\/span>\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#7fcd48\"><\/div> <span class=\"swatch-label\">Lime<\/span>\n\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#a01816\"><\/div> <span class=\"swatch-label\">Red<\/span>\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#690c0b\"><\/div> <span class=\"swatch-label\">Maroon<\/span>\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#956f87\"><\/div> <span class=\"swatch-label\">Raspberry<\/span>\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#a5005d\"><\/div> <span class=\"swatch-label\">HotPink<\/span>\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#D8A3B3\"><\/div> <span class=\"swatch-label\">Dusk<\/span>\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#ebe0df\"><\/div> <span class=\"swatch-label\">Pink<\/span>\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#8c9de2\"><\/div> <span class=\"swatch-label\">Lavender<\/span>\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#4d4d6c\"><\/div> <span class=\"swatch-label\">Plum<\/span>\n\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#f90654\"><\/div> <span class=\"swatch-label\">Fluoro<\/span>\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#e75931\"><\/div> <span class=\"swatch-label\">Orange<\/span>\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#eba217\"><\/div> <span class=\"swatch-label\">Yellow<\/span>\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#e3dac9\"><\/div> <span class=\"swatch-label\">Sand<\/span>\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#e9e4d6ab\"><\/div> <span class=\"swatch-label\">Cream<\/span>\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#64544b75\"><\/div> <span class=\"swatch-label\">Mocha<\/span>\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#64544b\"><\/div> <span class=\"swatch-label\">Brown<\/span>\n<\/div> <div class=\"swatch-wrapper\"> <div class=\"swatch-star\" data-colour=\"#333333\"><\/div> <span class=\"swatch-label\">Grey<\/span> <\/div>\n\n<h2>Your Palette<\/h2>\n<div class=\"chosen-grid\">\n  <div class=\"chosen-item\">\n    <div class=\"chosen-star\"><\/div>\n    <span class=\"chosen-label\"><\/span>\n  <\/div>\n  <div class=\"chosen-item\">\n    <div class=\"chosen-star\"><\/div>\n    <span class=\"chosen-label\"><\/span>\n  <\/div>\n  <div class=\"chosen-item\">\n    <div class=\"chosen-star\"><\/div>\n    <span class=\"chosen-label\"><\/span>\n  <\/div>\n  <div class=\"chosen-item\">\n    <div class=\"chosen-star\"><\/div>\n    <span class=\"chosen-label\"><\/span>\n  <\/div>\n  <div class=\"chosen-item\">\n    <div class=\"chosen-star\"><\/div>\n    <span class=\"chosen-label\"><\/span>\n  <\/div>\n<\/div>\n <div class=\"name-row\">\n  <label for=\"name-input\" class=\"name-label\">YOUR NAME<\/label>\n  <input id=\"name-input\" type=\"text\" placeholder=\"Type a name to start the magic..\">\n<\/div>\n\n<div class=\"preview-layout\">\n\n  <div class=\"preview-left\">\n    <div id=\"mini-preview\">\n      <svg id=\"mini-print\" width=\"300\" height=\"200\" viewBox=\"0 0 300 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\n        <rect id=\"bg\" x=\"0\" y=\"0\" width=\"300\" height=\"200\"\n              fill=\"#ffffff\" stroke=\"#3f4666\" stroke-width=\"5\" rx=\"4\" ry=\"4\" \/>\n\n        <rect id=\"inner\" x=\"60\" y=\"70\" width=\"180\" height=\"50\"\n              fill=\"#ffffff\" stroke=\"#3f4666\" stroke-width=\"3\" rx=\"4\" ry=\"4\" \/>\n\n        <text id=\"name\" x=\"150\" y=\"100\" text-anchor=\"middle\"\n              dominant-baseline=\"middle\" font-size=\"45\"\n              font-family=\"The Circus Font\" fill=\"#3f4666\"><\/text>\n\n        <polygon id=\"top1\" points=\"150,10 157,25 173,25 160,35 165,50 150,40 135,50 140,35 127,25 143,25\"\n                 fill=\"#ffffff\" stroke=\"#3f4666\" stroke-width=\"2\"\/>\n\n        <polygon id=\"bot1\" points=\"75,150 82,165 98,165 85,175 90,190 75,180 60,190 65,175 52,165 68,165\"\n                 fill=\"#ffffff\" stroke=\"#3f4666\" stroke-width=\"2\"\/>\n\n        <polygon id=\"bot2\" points=\"150,150 157,165 173,165 160,175 165,190 150,180 135,190 140,175 127,165 143,165\"\n                 fill=\"#ffffff\" stroke=\"#3f4666\" stroke-width=\"2\"\/>\n\n        <polygon id=\"bot3\" points=\"225,150 232,165 248,165 235,175 240,190 225,180 210,190 215,175 202,165 218,165\"\n                 fill=\"#ffffff\" stroke=\"#3f4666\" stroke-width=\"2\"\/>\n\n      <\/svg>\n    <\/div> <!-- closes mini-preview -->\n  <\/div> <!-- closes preview-left -->\n\n  <div class=\"preview-right\">\n    <button id=\"surprise-me\">Surprise Me<\/button>\n    <button id=\"clear-palette\">Clear All<\/button>\n    <button id=\"copy-palette\">Copy My Palette<\/button>\n  <\/div>\n\n<\/div> <!-- closes preview-layout -->\n\n\n<style>\n#surprise-me,\n#clear-palette,\n#copy-palette {\n  background-color: #3f4666;   \/* same navy as your brand *\/\n  color: white;\n  padding: 0.6rem 1.2rem;\n  border: none;\n  border-radius: 8px;          \/* rounded corners *\/\n  font-size: 1rem;             \/* matching font size *\/\n  cursor: pointer;\n  width: 180px;                \/* keeps all buttons same width *\/\n  text-align: center;\n}\n#surprise-me:hover,\n#clear-palette:hover,\n#copy-palette:hover {\n  background-color: #50577a;\n  transform: translateY(-2px);\n  transition: 0.15s ease;\n}\n\n\n.swatch-star.pop {\n  animation: swatchPop 0.25s ease-out;\n}\n@keyframes swatchPop {\n  0% { transform: scale(1); }\n  50% { transform: scale(1.25); }\n  100% { transform: scale(1); }\n}\n\/* Animation for chosen stars *\/\n.chosen-star.filled {\n  animation: starPop 0.35s ease-out;\n}\n@keyframes starPop {\n  0% {\n    transform: scale(0.6);\n    opacity: 0;\n    box-shadow: 0 0 0px rgba(255, 255, 255, 0);\n  }\n  60% {\n    transform: scale(1.15);\n    opacity: 1;\n    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n    box-shadow: 0 0 0px rgba(255, 255, 255, 0);\n  }\n}\n#colour-playground h2 {\n  font-weight: 400 !important;\n}\n.name-row {\n  display: flex;\n  align-items: center;\n  gap: 1rem; \/* space between label and input *\/\n  margin: 0.5rem 0 0.5rem 0; \/* spacing above and below *\/\n}\n.name-label {\n  font-size: 1.4rem;\n  font-family: Cinzel;\n  font-weight: 400;\n  white-space: nowrap; \/* keeps YOUR NAME on one line *\/\n}\n#name-input {\n  padding: 0.4rem 0.6rem;\n  font-size: 1.2rem;\n  width: 350px;\n}\n.preview-layout {\n  align-items: stretch; \/* make both columns equal height *\/\n}\n  .preview-left {\n    flex: 1;\n    margin-left: -20px; \/* nudge preview left *\/\n  }\n#mini-preview {\n  display: block;\n  min-height: 200px;\n}\n}\n.preview-right {\n  display: flex;\n  flex-direction: column;\n  justify-content: center; \/* centre vertically *\/\n  align-items: center;     \/* centre horizontally *\/\n  gap: 1.5rem;\n}\n\n\/* Add more space above YOUR PALETTE *\/\nh2 + .chosen-grid {\n  margin-top: 1rem; \/* increase this if you want more space *\/\n}\n\/* Reduce space BELOW the chosen palette *\/\n.chosen-grid {\n  margin-bottom: 0.5rem; \/* reduce this number to pull PREVIEW closer *\/\n    flex: 1;\n    margin-left: 10px; \/* nudge preview right*\/\n  }\n<\/style>\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\nconst copyBtn = document.getElementById(\"copy-palette\");\ncopyBtn.addEventListener(\"click\", () => {\n  const name = nameInput.value.trim() || \"[name]\";\n  const chosenLabels = Array.from(document.querySelectorAll(\".chosen-label\"))\n    .map(label => label.textContent)\n    .filter(text => text !== \"\");\n  const colourList = chosenLabels.length > 0 ? chosenLabels.join(\", \") : \"[no colours selected]\";\n  const textToCopy = \n`Name: ${name}\nColours: ${colourList}`;\n  navigator.clipboard.writeText(textToCopy).then(() => {\n    copyBtn.textContent = \"Copied!\";\n       setTimeout(() => {\n      copyBtn.textContent = \"Copy My Palette\";\n      copyBtn.classList.remove(\"bounce\");\n    }, 1500);\n  });\n});\nconst nameInput = document.getElementById(\"name-input\");\nconst nameText = document.getElementById(\"name\");\nnameInput.addEventListener(\"input\", () => {\n  const value = nameInput.value.trim();\n  \/\/ Update the SVG text\n  nameText.textContent = value.toUpperCase();\n  \/\/ Auto-resize font for long names\n  let baseSize = 45;\n  let length = value.length;\n  if (length > 8) {\n    nameText.setAttribute(\"font-size\", baseSize - (length - 8) * 2);\n  } else {\n    nameText.setAttribute(\"font-size\", baseSize);\n  }\n});\n  const swatches = document.querySelectorAll(\".swatch-star\");\n  const chosen = document.querySelectorAll(\".chosen-star\");\n  const clearBtn = document.getElementById(\"clear-palette\");\n  const surpriseBtn = document.getElementById(\"surprise-me\");\n  function updateMiniPreview() {\n  const filled = Array.from(document.querySelectorAll(\".chosen-star.filled\"))\n                      .map(star => star.style.background);\n  \/\/ 1st colour \u2192 background\n  const bg = document.getElementById(\"bg\");\n  if (bg) bg.style.fill = filled[0] || \"#ffffff\";\n  \/\/ 2nd colour \u2192 all top stars\nconst topStar = document.getElementById(\"top1\");\nif (topStar) topStar.style.fill = filled[1] || \"#ffffff\";\n  \/\/ 3rd, 4th, 5th colours \u2192 bottom stars\n  const bottom = [\"bot1\", \"bot2\", \"bot3\"];\n  bottom.forEach((id, i) => {\n    const el = document.getElementById(id);\n    if (el) el.style.fill = filled[i + 2] || \"#ffffff\";\n  });\n}\n  \/\/ --- SWATCH CLICK (ADD COLOUR) ---\n  swatches.forEach(swatch => {\n    swatch.style.background = swatch.dataset.colour;\n    swatch.addEventListener(\"click\", () => {\n      swatch.classList.add(\"pop\");\n      setTimeout(() => swatch.classList.remove(\"pop\"), 200);\n      const emptySpot = Array.from(chosen).find(star => !star.classList.contains(\"filled\"));\n     if (emptySpot) {\n  \/\/ Fill the star\n  emptySpot.style.background = swatch.dataset.colour;\n  emptySpot.classList.add(\"filled\");\n  \/\/ Fill the label under the star\n  const label = emptySpot.parentElement.querySelector(\".chosen-label\");\n  label.textContent = swatch.nextElementSibling.textContent;\n}\n      updateMiniPreview();\n    });\n  });\n  \/\/ --- REMOVE COLOUR ---\n  chosen.forEach(star => {\n    star.addEventListener(\"click\", () => {\n      if (star.classList.contains(\"filled\")) {\n     star.addEventListener(\"animationend\", () => {\n  star.style.background = \"#eee\";\n  star.classList.remove(\"filled\");\n  star.classList.remove(\"fade-out\");\n  \/\/ Clear the label\n  const label = star.parentElement.querySelector(\".chosen-label\");\n  label.textContent = \"\";\n  updateMiniPreview();\n}, { once: true });\n        star.classList.add(\"fade-out\");\n      }\n    });\n  });\n  \/\/ --- CLEAR ALL ---\n  clearBtn.addEventListener(\"click\", () => {\n   chosen.forEach(star => {\n  star.style.background = \"#eee\";\n  star.classList.remove(\"filled\");\n  const label = star.parentElement.querySelector(\".chosen-label\");\n  label.textContent = \"\";\n});\n    updateMiniPreview();\n  });\n  \/\/ --- SURPRISE ME ---\n  surpriseBtn.addEventListener(\"click\", () => {\n    chosen.forEach(star => {\n      star.style.background = \"#eee\";\n      star.classList.remove(\"filled\");\n    });\n    const randomSwatches = Array.from(swatches)\n      .sort(() => 0.5 - Math.random())\n      .slice(0, 5);\n    randomSwatches.forEach((swatch, index) => {\n      const spot = chosen[index];\n      spot.style.background = swatch.dataset.colour;\nspot.classList.add(\"filled\");\nconst label = spot.parentElement.querySelector(\".chosen-label\");\nlabel.textContent = swatch.nextElementSibling.textContent;\n      spot.classList.add(\"pop\");\n      setTimeout(() => spot.classList.remove(\"pop\"), 200);\n    });\n    updateMiniPreview();\n  });\n});\n<\/script>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-id61_95e661-e9 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id61_95e661-e9 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id61_95e661-e9 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);max-width:1000px;margin-left:auto;margin-right:auto;padding-top:0px;padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id61_95e661-e9 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id61_95e661-e9 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id61_95e661-e9 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id61_95e661-e9 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column61_931b52-5b > .kt-inside-inner-col{border-top:3px solid #a5005d;border-right:3px solid #a5005d;border-bottom:3px solid #a5005d;border-left:3px solid #a5005d;}.kadence-column61_931b52-5b > .kt-inside-inner-col,.kadence-column61_931b52-5b > .kt-inside-inner-col:before{border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-right-radius:20px;border-bottom-left-radius:20px;}.kadence-column61_931b52-5b > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column61_931b52-5b > .kt-inside-inner-col{flex-direction:column;}.kadence-column61_931b52-5b > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column61_931b52-5b > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column61_931b52-5b{position:relative;}@media all and (max-width: 1024px){.kadence-column61_931b52-5b > .kt-inside-inner-col{border-top:3px solid #a5005d;border-right:3px solid #a5005d;border-bottom:3px solid #a5005d;border-left:3px solid #a5005d;flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column61_931b52-5b > .kt-inside-inner-col{border-top:3px solid #a5005d;border-right:3px solid #a5005d;border-bottom:3px solid #a5005d;border-left:3px solid #a5005d;flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column61_931b52-5b\"><div class=\"kt-inside-inner-col\"><style>.kadence-column61_8772d6-a5 > .kt-inside-inner-col{padding-top:var(--global-kb-spacing-xs, 1rem);padding-right:var(--global-kb-spacing-xs, 1rem);padding-bottom:var(--global-kb-spacing-xs, 1rem);padding-left:var(--global-kb-spacing-xs, 1rem);}.kadence-column61_8772d6-a5 > .kt-inside-inner-col,.kadence-column61_8772d6-a5 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column61_8772d6-a5 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column61_8772d6-a5 > .kt-inside-inner-col{flex-direction:column;}.kadence-column61_8772d6-a5 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column61_8772d6-a5 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column61_8772d6-a5{position:relative;}@media all and (max-width: 1024px){.kadence-column61_8772d6-a5 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column61_8772d6-a5 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column61_8772d6-a5\"><div class=\"kt-inside-inner-col\"><style>.wp-block-kadence-advancedheading.kt-adv-heading61_aed3d4-1a, .wp-block-kadence-advancedheading.kt-adv-heading61_aed3d4-1a[data-kb-block=\"kb-adv-heading61_aed3d4-1a\"]{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;text-align:center;font-size:15px;line-height:2;font-weight:400;font-style:normal;font-family:'Comic Neue';text-transform:uppercase;color:#09adbe;}.wp-block-kadence-advancedheading.kt-adv-heading61_aed3d4-1a mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading61_aed3d4-1a[data-kb-block=\"kb-adv-heading61_aed3d4-1a\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading61_aed3d4-1a img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading61_aed3d4-1a[data-kb-block=\"kb-adv-heading61_aed3d4-1a\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading61_aed3d4-1a wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading61_aed3d4-1a\">if you would love one of my posters in your colour palette, just choose your colours and click on the &#8216;Copy my palette&#8217; button. then paste the results straight into a message to me. along with the name of the poster.<\/h2>\n<\/div><\/div>\n<\/div><\/div>\n\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Your colours, your story\u2026 Tap on a colour and the star paLette will fill up. Changed your mind? No problem, just tap the star and it will disappear allowing you to choose a new colour. Alternatively, hit the surprise me button and let us inspire you. Enjoy! Pick Your Colours Navy Turqouise Sky Blue Teal&#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":true,"_kad_post_transparent":"enable","_kad_post_title":"hide","_kad_post_layout":"normal","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"show","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-61","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Colour Options \u2014 Choose Your Perfect Colour Palette - Colour Me Happy<\/title>\n<meta name=\"description\" content=\"Explore colour options for all Colour Me Happy prints. Choose soft pastels, bold brights or custom palettes to match your child\u2019s room.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colourmehappydesigns.com\/index.php\/colour_options_choose_your_perfect_colour_palette\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Colour Options \u2014 Choose Your Perfect Colour Palette - Colour Me Happy\" \/>\n<meta property=\"og:description\" content=\"Explore colour options for all Colour Me Happy prints. Choose soft pastels, bold brights or custom palettes to match your child\u2019s room.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colourmehappydesigns.com\/index.php\/colour_options_choose_your_perfect_colour_palette\/\" \/>\n<meta property=\"og:site_name\" content=\"Colour Me Happy\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-31T15:48:16+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/colourmehappydesigns.com\\\/index.php\\\/colour_options_choose_your_perfect_colour_palette\\\/\",\"url\":\"https:\\\/\\\/colourmehappydesigns.com\\\/index.php\\\/colour_options_choose_your_perfect_colour_palette\\\/\",\"name\":\"Colour Options \u2014 Choose Your Perfect Colour Palette - Colour Me Happy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/colourmehappydesigns.com\\\/#website\"},\"datePublished\":\"2021-07-27T17:32:58+00:00\",\"dateModified\":\"2026-03-31T15:48:16+00:00\",\"description\":\"Explore colour options for all Colour Me Happy prints. Choose soft pastels, bold brights or custom palettes to match your child\u2019s room.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/colourmehappydesigns.com\\\/index.php\\\/colour_options_choose_your_perfect_colour_palette\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/colourmehappydesigns.com\\\/index.php\\\/colour_options_choose_your_perfect_colour_palette\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/colourmehappydesigns.com\\\/index.php\\\/colour_options_choose_your_perfect_colour_palette\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/colourmehappydesigns.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Colour Options \u2014 Choose Your Perfect Colour Palette\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/colourmehappydesigns.com\\\/#website\",\"url\":\"https:\\\/\\\/colourmehappydesigns.com\\\/\",\"name\":\"Colour Me Happy Designs\",\"description\":\"Kid&#039;s Wall Art\",\"publisher\":{\"@id\":\"https:\\\/\\\/colourmehappydesigns.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/colourmehappydesigns.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/colourmehappydesigns.com\\\/#organization\",\"name\":\"Colour Me Happy Designs\",\"url\":\"https:\\\/\\\/colourmehappydesigns.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/colourmehappydesigns.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/colourmehappydesigns.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/Home-Page-Round-Logo.png\",\"contentUrl\":\"https:\\\/\\\/colourmehappydesigns.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/Home-Page-Round-Logo.png\",\"width\":921,\"height\":921,\"caption\":\"Colour Me Happy Designs\"},\"image\":{\"@id\":\"https:\\\/\\\/colourmehappydesigns.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Colour Options \u2014 Choose Your Perfect Colour Palette - Colour Me Happy","description":"Explore colour options for all Colour Me Happy prints. Choose soft pastels, bold brights or custom palettes to match your child\u2019s room.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/colourmehappydesigns.com\/index.php\/colour_options_choose_your_perfect_colour_palette\/","og_locale":"en_GB","og_type":"article","og_title":"Colour Options \u2014 Choose Your Perfect Colour Palette - Colour Me Happy","og_description":"Explore colour options for all Colour Me Happy prints. Choose soft pastels, bold brights or custom palettes to match your child\u2019s room.","og_url":"https:\/\/colourmehappydesigns.com\/index.php\/colour_options_choose_your_perfect_colour_palette\/","og_site_name":"Colour Me Happy","article_modified_time":"2026-03-31T15:48:16+00:00","twitter_card":"summary_large_image","twitter_misc":{"Estimated reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/colourmehappydesigns.com\/index.php\/colour_options_choose_your_perfect_colour_palette\/","url":"https:\/\/colourmehappydesigns.com\/index.php\/colour_options_choose_your_perfect_colour_palette\/","name":"Colour Options \u2014 Choose Your Perfect Colour Palette - Colour Me Happy","isPartOf":{"@id":"https:\/\/colourmehappydesigns.com\/#website"},"datePublished":"2021-07-27T17:32:58+00:00","dateModified":"2026-03-31T15:48:16+00:00","description":"Explore colour options for all Colour Me Happy prints. Choose soft pastels, bold brights or custom palettes to match your child\u2019s room.","breadcrumb":{"@id":"https:\/\/colourmehappydesigns.com\/index.php\/colour_options_choose_your_perfect_colour_palette\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colourmehappydesigns.com\/index.php\/colour_options_choose_your_perfect_colour_palette\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/colourmehappydesigns.com\/index.php\/colour_options_choose_your_perfect_colour_palette\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colourmehappydesigns.com\/"},{"@type":"ListItem","position":2,"name":"Colour Options \u2014 Choose Your Perfect Colour Palette"}]},{"@type":"WebSite","@id":"https:\/\/colourmehappydesigns.com\/#website","url":"https:\/\/colourmehappydesigns.com\/","name":"Colour Me Happy Designs","description":"Kid&#039;s Wall Art","publisher":{"@id":"https:\/\/colourmehappydesigns.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colourmehappydesigns.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/colourmehappydesigns.com\/#organization","name":"Colour Me Happy Designs","url":"https:\/\/colourmehappydesigns.com\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/colourmehappydesigns.com\/#\/schema\/logo\/image\/","url":"https:\/\/colourmehappydesigns.com\/wp-content\/uploads\/2026\/03\/Home-Page-Round-Logo.png","contentUrl":"https:\/\/colourmehappydesigns.com\/wp-content\/uploads\/2026\/03\/Home-Page-Round-Logo.png","width":921,"height":921,"caption":"Colour Me Happy Designs"},"image":{"@id":"https:\/\/colourmehappydesigns.com\/#\/schema\/logo\/image\/"}}]}},"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"Emma Milner-Smith","author_link":"https:\/\/colourmehappydesigns.com\/index.php\/author\/cmhadmin\/"},"comment_info":0,"_links":{"self":[{"href":"https:\/\/colourmehappydesigns.com\/index.php\/wp-json\/wp\/v2\/pages\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/colourmehappydesigns.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/colourmehappydesigns.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/colourmehappydesigns.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/colourmehappydesigns.com\/index.php\/wp-json\/wp\/v2\/comments?post=61"}],"version-history":[{"count":411,"href":"https:\/\/colourmehappydesigns.com\/index.php\/wp-json\/wp\/v2\/pages\/61\/revisions"}],"predecessor-version":[{"id":3826,"href":"https:\/\/colourmehappydesigns.com\/index.php\/wp-json\/wp\/v2\/pages\/61\/revisions\/3826"}],"wp:attachment":[{"href":"https:\/\/colourmehappydesigns.com\/index.php\/wp-json\/wp\/v2\/media?parent=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}