{"id":2414,"date":"2026-06-25T03:37:13","date_gmt":"2026-06-25T03:37:13","guid":{"rendered":"https:\/\/polysoft.devstudio.work\/?page_id=2414"},"modified":"2026-06-25T09:19:42","modified_gmt":"2026-06-25T09:19:42","slug":"colour-mixer","status":"publish","type":"page","link":"https:\/\/polysoft.devstudio.work\/index.php\/colour-mixer\/","title":{"rendered":"Colour Mixer"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2414\" class=\"elementor elementor-2414\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b6d5155 e-con-full e-flex e-con e-parent\" data-id=\"b6d5155\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-538157c e-flex e-con-boxed e-con e-child\" data-id=\"538157c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-92ea4b4 e-con-full e-flex e-con e-child\" data-id=\"92ea4b4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-92b2822 elementor-widget elementor-widget-heading\" data-id=\"92b2822\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Build Your Perfect Blend<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e7f6a1d elementor-widget elementor-widget-text-editor\" data-id=\"e7f6a1d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Pick four colours, preview your mix in real time. No guesswork, just results.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4736d34 e-con-full e-flex e-con e-parent\" data-id=\"4736d34\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-450f0fd e-flex e-con-boxed e-con e-child\" data-id=\"450f0fd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dbb6ed3 hide elementor-widget elementor-widget-html\" data-id=\"dbb6ed3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  \/* *,\r\n*::before,\r\n*::after {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n} *\/\r\n\r\n  :root {\r\n    --bg: #FAF7F2;\r\n    --surface: #FFFFFF;\r\n    --surface-2: #F6F2EA;\r\n    --border: #E8E1D4;\r\n    --border-strong: #D8CFBE;\r\n    --text: #1A1A1A;\r\n    --text-2: #4A4A4A;\r\n    --muted: #8A8275;\r\n    --accent: #E8622A;\r\n    --accent-soft: #FCE9DD;\r\n    --accent-deep: #B84A1B;\r\n    --ring: rgba(232, 98, 42, 0.28);\r\n    --shadow-sm: 0 1px 2px rgba(20, 16, 10, 0.04), 0 2px 6px rgba(20, 16, 10, 0.04);\r\n    --shadow-md: 0 1px 2px rgba(20, 16, 10, 0.04), 0 10px 28px rgba(20, 16, 10, 0.07);\r\n    --radius: 18px;\r\n    --radius-sm: 12px;\r\n  }\r\n\r\n  \/* html,\r\nbody {\r\n  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;\r\n} *\/\r\n\r\n  \/* body {\r\n  background:\r\n    radial-gradient(1100px 520px at 95% -8%, #FFE2CD 0%, rgba(255, 226, 205, 0) 60%),\r\n    radial-gradient(900px 520px at -8% 108%, #DEEFEA 0%, rgba(222, 239, 234, 0) 55%),\r\n    var(--bg);\r\n  color: var(--text);\r\n  min-height: 100vh;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  padding: 40px 20px 64px;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n} *\/\r\n\r\n  .html-section-header {\r\n    width: 100%;\r\n    \/* max-width: 1080px; *\/\r\n    margin-bottom: 26px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 16px;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  .brand {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 14px;\r\n  }\r\n\r\n  .brand-mark {\r\n    width: 44px;\r\n    height: 44px;\r\n    border-radius: 13px;\r\n    background:\r\n      conic-gradient(from 220deg at 50% 50%, #E8622A, #F0A24A, #E8C75A, #46A687, #3571D4, #75136C, #E8622A);\r\n    display: grid;\r\n    place-items: center;\r\n    box-shadow: 0 8px 20px rgba(232, 98, 42, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.45);\r\n    position: relative;\r\n  }\r\n\r\n  .brand-mark::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 5px;\r\n    border-radius: 9px;\r\n    background: #fff;\r\n  }\r\n\r\n  .brand-mark::after {\r\n    content: \"\";\r\n    position: relative;\r\n    width: 16px;\r\n    height: 16px;\r\n    border-radius: 50%;\r\n    background: linear-gradient(135deg, var(--accent) 0%, #F08A4A 100%);\r\n    box-shadow: 0 2px 4px rgba(184, 74, 27, 0.3);\r\n  }\r\n\r\n  .brand-text {\r\n    display: flex;\r\n    flex-direction: column;\r\n    line-height: 1.1;\r\n  }\r\n\r\n  .brand-name {\r\n    font-weight: 700;\r\n    font-size: 1.08rem;\r\n    letter-spacing: -0.01em;\r\n    color: var(--text);\r\n  }\r\n\r\n  .brand-sub {\r\n    font-weight: 500;\r\n    font-size: 0.72rem;\r\n    letter-spacing: 0.16em;\r\n    text-transform: uppercase;\r\n    color: var(--muted);\r\n    margin-top: 4px;\r\n  }\r\n\r\n  .header-hint {\r\n    font-size: 0.78rem;\r\n    color: var(--text-2);\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 9px;\r\n    padding: 8px 14px;\r\n    background: var(--surface);\r\n    border: 1px solid var(--border);\r\n    border-radius: 999px;\r\n    box-shadow: var(--shadow-sm);\r\n    font-weight: 500;\r\n  }\r\n\r\n  .header-hint .dot {\r\n    width: 7px;\r\n    height: 7px;\r\n    border-radius: 50%;\r\n    background: var(--accent);\r\n    box-shadow: 0 0 0 4px var(--accent-soft);\r\n  }\r\n\r\n  .app {\r\n    width: 100%;\r\n    \/* max-width: 1080px; *\/\r\n    display: grid;\r\n    grid-template-columns: 1fr;\r\n    gap: 22px;\r\n    align-items: start;\r\n  }\r\n\r\n  @media (min-width: 940px) {\r\n    .app {\r\n      grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);\r\n    }\r\n  }\r\n\r\n  .preview-panel {\r\n    background: var(--surface);\r\n    border: 1px solid var(--border);\r\n    border-radius: var(--radius);\r\n    overflow: hidden;\r\n    box-shadow: var(--shadow-md);\r\n  }\r\n\r\n  .preview-header {\r\n    padding: 16px 22px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    flex-wrap: wrap;\r\n    gap: 10px;\r\n    border-bottom: 1px solid var(--border);\r\n    background: linear-gradient(180deg, #FFFFFF 0%, #FBF8F3 100%);\r\n  }\r\n\r\n  .preview-title-wrap {\r\n    display: flex;\r\n    flex-direction: column;\r\n    line-height: 1.2;\r\n    min-width: 0;\r\n  }\r\n\r\n  .preview-eyebrow {\r\n    font-size: 0.66rem;\r\n    font-weight: 600;\r\n    letter-spacing: 0.16em;\r\n    text-transform: uppercase;\r\n    color: var(--accent);\r\n  }\r\n\r\n  .preview-title {\r\n    font-weight: 600;\r\n    font-size: 0.98rem;\r\n    letter-spacing: -0.01em;\r\n    color: var(--text);\r\n    margin-top: 2px;\r\n  }\r\n\r\n  canvas {\r\n    display: block;\r\n    width: 100%;\r\n    background: #1a1a1a;\r\n    border-radius: 10px;\r\n  }\r\n\r\n  .canvas-frame {\r\n    padding: 14px;\r\n    background: var(--surface-2);\r\n    border-bottom: 1px solid var(--border);\r\n  }\r\n\r\n  .legend-wrap {\r\n    display: flex;\r\n    gap: 14px 18px;\r\n    flex-wrap: wrap;\r\n    padding: 14px 22px 16px;\r\n    background: var(--surface);\r\n    border-bottom: 1px solid var(--border);\r\n  }\r\n\r\n  .legend-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 9px;\r\n    font-size: 0.78rem;\r\n    color: var(--text-2);\r\n  }\r\n\r\n  .legend-dot {\r\n    width: 14px;\r\n    height: 14px;\r\n    border-radius: 50%;\r\n    box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.28), inset 1px 1px 2px rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.06);\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .legend-dot.small {\r\n    width: 9px;\r\n    height: 9px;\r\n  }\r\n\r\n  .legend-name {\r\n    font-weight: 600;\r\n    color: var(--text);\r\n  }\r\n\r\n  .legend-meta {\r\n    color: var(--muted);\r\n  }\r\n\r\n  .canvas-footer {\r\n    padding: 13px 22px;\r\n    font-size: 0.78rem;\r\n    color: var(--muted);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 12px;\r\n    flex-wrap: wrap;\r\n    background: var(--surface);\r\n  }\r\n\r\n  .footer-note {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n  }\r\n\r\n  .footer-note svg {\r\n    width: 14px;\r\n    height: 14px;\r\n    color: var(--accent);\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .regen-btn {\r\n    background: var(--text);\r\n    color: #fff;\r\n    border: 1px solid var(--text);\r\n    border-radius: 999px;\r\n    padding: 9px 18px;\r\n    font-size: 0.8rem;\r\n    font-weight: 500;\r\n    font-family: inherit;\r\n    cursor: pointer;\r\n    transition: all 0.18s ease;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n  }\r\n\r\n  .regen-btn:hover {\r\n    background: var(--accent);\r\n    border-color: var(--accent);\r\n    transform: translateY(-1px);\r\n    box-shadow: 0 8px 16px rgba(232, 98, 42, 0.28);\r\n  }\r\n\r\n  .regen-btn:active {\r\n    transform: translateY(0);\r\n  }\r\n\r\n  .regen-btn svg {\r\n    width: 13px;\r\n    height: 13px;\r\n    transition: transform 0.4s ease;\r\n  }\r\n\r\n  .regen-btn:hover svg {\r\n    transform: rotate(180deg);\r\n  }\r\n\r\n  .regen-btn.secondary {\r\n    background: var(--surface);\r\n    color: var(--text);\r\n    border-color: var(--border-strong);\r\n  }\r\n\r\n  .regen-btn.secondary:hover {\r\n    background: var(--accent-soft);\r\n    color: var(--accent-deep);\r\n    border-color: var(--accent);\r\n    box-shadow: 0 6px 14px rgba(232, 98, 42, 0.18);\r\n  }\r\n\r\n  .regen-btn.secondary:hover svg {\r\n    transform: none;\r\n  }\r\n\r\n  .preview-actions {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  .selectors-section {\r\n    background: var(--surface);\r\n    border: 1px solid var(--border);\r\n    border-radius: var(--radius);\r\n    overflow: hidden;\r\n    box-shadow: var(--shadow-md);\r\n  }\r\n\r\n  .section-header {\r\n    padding: 18px 22px 16px;\r\n    border-bottom: 1px solid var(--border);\r\n  }\r\n\r\n  .section-eyebrow {\r\n    font-size: 0.66rem;\r\n    font-weight: 600;\r\n    letter-spacing: 0.16em;\r\n    text-transform: uppercase;\r\n    color: var(--accent);\r\n  }\r\n\r\n  .section-title {\r\n    font-weight: 600;\r\n    font-size: 1.08rem;\r\n    letter-spacing: -0.01em;\r\n    color: var(--text);\r\n    margin-top: 4px;\r\n  }\r\n\r\n  .section-sub {\r\n    font-size: 0.82rem;\r\n    color: var(--text-2);\r\n    margin-top: 5px;\r\n    line-height: 1.55;\r\n  }\r\n\r\n  .selectors {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 0;\r\n  }\r\n\r\n  .selector-card {\r\n    background: var(--surface);\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 16px;\r\n    border-right: 1px solid var(--border);\r\n    border-bottom: 1px solid var(--border);\r\n  }\r\n\r\n  .selector-card:nth-child(2n) {\r\n    border-right: none;\r\n  }\r\n\r\n  .selector-card:nth-last-child(-n+2) {\r\n    border-bottom: none;\r\n  }\r\n\r\n  @media (max-width: 520px) {\r\n    .selectors {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    .selector-card {\r\n      border-right: none;\r\n    }\r\n\r\n    .selector-card:nth-last-child(2) {\r\n      border-bottom: 1px solid var(--border);\r\n    }\r\n  }\r\n\r\n  .selector-top {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    margin-bottom: 12px;\r\n  }\r\n\r\n  .selector-preview {\r\n    width: 36px;\r\n    height: 36px;\r\n    border-radius: 50%;\r\n    flex-shrink: 0;\r\n    background: #ddd8d0;\r\n    transition: background 0.2s;\r\n    box-shadow:\r\n      inset -2px -2px 5px rgba(0, 0, 0, 0.28),\r\n      inset 2px 2px 4px rgba(255, 255, 255, 0.45),\r\n      0 0 0 1px rgba(0, 0, 0, 0.06),\r\n      0 2px 5px rgba(0, 0, 0, 0.1);\r\n  }\r\n\r\n  .selector-preview.small {\r\n    width: 24px;\r\n    height: 24px;\r\n  }\r\n\r\n  .selector-label {\r\n    flex: 1;\r\n    min-width: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    line-height: 1.15;\r\n  }\r\n\r\n  .selector-num {\r\n    font-size: 0.62rem;\r\n    letter-spacing: 0.13em;\r\n    text-transform: uppercase;\r\n    color: var(--muted);\r\n    font-weight: 600;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n  }\r\n\r\n  .selector-num .pct {\r\n    color: var(--accent-deep);\r\n    background: var(--accent-soft);\r\n    padding: 2px 7px;\r\n    border-radius: 999px;\r\n    letter-spacing: 0.05em;\r\n  }\r\n\r\n  .selector-name {\r\n    font-weight: 600;\r\n    font-size: 0.95rem;\r\n    color: var(--text);\r\n    margin-top: 5px;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    letter-spacing: -0.01em;\r\n  }\r\n\r\n  .swatch-scroll {\r\n    display: grid;\r\n    grid-template-columns: repeat(9, 1fr);\r\n    gap: 7px;\r\n    padding: 10px;\r\n    background: var(--surface-2);\r\n    border-radius: var(--radius-sm);\r\n    border: 1px solid var(--border);\r\n  }\r\n\r\n  .swatch {\r\n    position: relative;\r\n    aspect-ratio: 1;\r\n    border-radius: 50%;\r\n    cursor: pointer;\r\n    border: 2px solid transparent;\r\n    transition: transform 0.14s ease, box-shadow 0.14s ease;\r\n    box-shadow:\r\n      inset -1px -1px 3px rgba(0, 0, 0, 0.25),\r\n      inset 1px 1px 2px rgba(255, 255, 255, 0.4),\r\n      0 1px 3px rgba(0, 0, 0, 0.18);\r\n  }\r\n\r\n  .swatch:hover {\r\n    transform: scale(1.18);\r\n    z-index: 5;\r\n  }\r\n\r\n  .swatch.selected {\r\n    border-color: var(--accent);\r\n    box-shadow:\r\n      0 0 0 3px var(--ring),\r\n      inset -1px -1px 3px rgba(0, 0, 0, 0.25),\r\n      inset 1px 1px 2px rgba(255, 255, 255, 0.4),\r\n      0 2px 5px rgba(0, 0, 0, 0.18);\r\n    transform: scale(1.08);\r\n  }\r\n\r\n  .swatch-tip {\r\n    position: absolute;\r\n    bottom: calc(100% + 7px);\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    background: var(--text);\r\n    color: #fff;\r\n    font-size: 0.68rem;\r\n    font-weight: 500;\r\n    white-space: nowrap;\r\n    padding: 4px 8px;\r\n    border-radius: 6px;\r\n    pointer-events: none;\r\n    opacity: 0;\r\n    transition: opacity 0.12s;\r\n    z-index: 20;\r\n    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);\r\n  }\r\n\r\n  .swatch-tip::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 100%;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    border: 4px solid transparent;\r\n    border-top-color: var(--text);\r\n  }\r\n\r\n  .swatch:hover .swatch-tip {\r\n    opacity: 1;\r\n  }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a2ddc87 elementor-widget elementor-widget-html\" data-id=\"a2ddc87\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t  <div class=\"html-section-header\">\r\n    <div class=\"brand\">\r\n      <div class=\"brand-mark\" aria-hidden=\"true\"><\/div>\r\n      <div class=\"brand-text\">\r\n        <span class=\"brand-name\">PolySoft<\/span>\r\n        <span class=\"brand-sub\">Colour Mixer<\/span>\r\n      <\/div>\r\n    <\/div>\r\n    <span class=\"header-hint\"><span class=\"dot\"><\/span>Pick four colours \u00b7 preview your blend<\/span>\r\n  <\/div>\r\n\r\n  <div class=\"app\">\r\n\r\n    <!-- PREVIEW (LEFT COLUMN) -->\r\n    <div class=\"preview-col\">\r\n      <div class=\"preview-panel\">\r\n        <div class=\"preview-header\">\r\n          <div class=\"preview-title-wrap\">\r\n            <span class=\"preview-eyebrow\">Live Preview<\/span>\r\n          <\/div>\r\n          <div class=\"preview-actions\">\r\n            <button class=\"regen-btn secondary\" onclick=\"randomiseColours()\" aria-label=\"Randomise colour selection\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\">\r\n                <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\" \/>\r\n                <circle cx=\"8\" cy=\"8\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\" \/>\r\n                <circle cx=\"16\" cy=\"8\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\" \/>\r\n                <circle cx=\"12\" cy=\"12\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\" \/>\r\n                <circle cx=\"8\" cy=\"16\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\" \/>\r\n                <circle cx=\"16\" cy=\"16\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\" \/>\r\n              <\/svg>\r\n              Randomise\r\n            <\/button>\r\n            <button class=\"regen-btn\" onclick=\"generateMix()\" aria-label=\"Generate new variation\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\">\r\n                <path d=\"M21 12a9 9 0 1 1-3-6.7\" \/>\r\n                <path d=\"M21 4v5h-5\" \/>\r\n              <\/svg>\r\n              New variation\r\n            <\/button>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"canvas-frame\">\r\n          <canvas id=\"canvas\"><\/canvas>\r\n        <\/div>\r\n        <div class=\"legend-wrap\" id=\"legend\"><\/div>\r\n        <div class=\"canvas-footer\">\r\n          <span class=\"footer-note\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\" \/>\r\n              <path d=\"M12 8v4M12 16h.01\" \/>\r\n            <\/svg>\r\n            Each preview is uniquely generated &mdash; an indication only.\r\n          <\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- SELECTORS (RIGHT COLUMN) -->\r\n    <div class=\"selectors-col\">\r\n      <div class=\"selectors-section\">\r\n        <div class=\"section-header\">\r\n          <span class=\"section-eyebrow\">Build your blend<\/span>\r\n          <h3 class=\"section-title\">Choose your four colours<\/h3>\r\n          <p class=\"section-sub\">Three large granules plus one small granule, each at 25%. Tap a swatch to swap it in.\r\n          <\/p>\r\n        <\/div>\r\n        <div class=\"selectors\" id=\"selectors\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c16a3b hide elementor-widget elementor-widget-html\" data-id=\"9c16a3b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script>\r\n  const COLOURS = [\r\n    { name: 'Alabaster', hex: '#FFF1DB' },\r\n    { name: 'Arctic White', hex: '#FCFCFC' },\r\n    { name: 'Ash', hex: '#DBDBDB' },\r\n    { name: 'Burnt Amber', hex: '#FFD71C' },\r\n    { name: 'Crystal Blue', hex: '#0A2173' },\r\n    { name: 'Desert Tan', hex: '#D6BE94' },\r\n    { name: 'Granite', hex: '#676767' },\r\n    { name: 'Jade Breeze', hex: '#02D48D' },\r\n    { name: 'Liquid Turquoise', hex: '#005254' },\r\n    { name: 'Midnight', hex: '#0D0C0C' },\r\n    { name: 'Morning Sky', hex: '#3571D4' },\r\n    { name: 'Nullarbor', hex: '#B85009' },\r\n    { name: 'Purple', hex: '#75136C' },\r\n    { name: 'Silky Oak', hex: '#6B4310' },\r\n    { name: 'Sunrise', hex: '#FFEF00' },\r\n    { name: 'Sunset Fire', hex: '#FA9716' },\r\n    { name: 'Vermillion', hex: '#DE1B1B' },\r\n    { name: 'Viridian', hex: '#46A687' },\r\n  ];\r\n\r\n  \/\/ Default: first 4 colours pre-selected\r\n  const selected = [0, 1, 2, 3];\r\n\r\n  function buildSelectors() {\r\n    const container = document.getElementById('selectors');\r\n    container.innerHTML = '';\r\n    for (let si = 0; si < 4; si++) {\r\n      const ci = selected[si];\r\n      const colour = COLOURS[ci];\r\n      const isSmall = (si === 3);\r\n      const card = document.createElement('div');\r\n      card.className = 'selector-card';\r\n      card.innerHTML = `\r\n      <div class=\"selector-top\">\r\n        <div class=\"selector-preview${isSmall ? ' small' : ''}\" style=\"background:${colour.hex}\"><\/div>\r\n        <div class=\"selector-label\">\r\n          <div class=\"selector-num\"><span>${isSmall ? 'Small granule' : 'Large granule'} \u00b7 slot ${si + 1}<\/span><span class=\"pct\">25%<\/span><\/div>\r\n          <div class=\"selector-name\">${colour.name}<\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"swatch-scroll\">\r\n        ${COLOURS.map((c, cIdx) => `\r\n          <div class=\"swatch ${ci === cIdx ? 'selected' : ''}\" style=\"background:${c.hex}\"\r\n               onclick=\"pick(${si},${cIdx})\">\r\n            <span class=\"swatch-tip\">${c.name}<\/span>\r\n          <\/div>`).join('')}\r\n      <\/div>`;\r\n      container.appendChild(card);\r\n    }\r\n  }\r\n\r\n  function pick(si, ci) {\r\n    selected[si] = ci;\r\n    buildSelectors();\r\n    generateMix();\r\n  }\r\n\r\n  function randomiseColours() {\r\n    \/\/ Pick 4 distinct colour indices at random\r\n    const pool = COLOURS.map((_, i) => i);\r\n    for (let i = pool.length - 1; i > 0; i--) {\r\n      const j = Math.floor(Math.random() * (i + 1));\r\n      [pool[i], pool[j]] = [pool[j], pool[i]];\r\n    }\r\n    for (let s = 0; s < 4; s++) selected[s] = pool[s];\r\n    buildSelectors();\r\n    generateMix();\r\n  }\r\n\r\n  let resizeTimer;\r\n  window.addEventListener('resize', () => { clearTimeout(resizeTimer); resizeTimer = setTimeout(generateMix, 150); });\r\n\r\n  function makePRNG(seed) {\r\n    let s = (seed ^ 0xdeadbeef) >>> 0;\r\n    return () => {\r\n      s = Math.imul(s ^ s >>> 15, 1 | s);\r\n      s ^= s + Math.imul(s ^ s >>> 7, 61 | s);\r\n      return ((s ^ s >>> 14) >>> 0) \/ 4294967296;\r\n    };\r\n  }\r\n\r\n  function hexToRgb(hex) {\r\n    const n = parseInt(hex.slice(1), 16);\r\n    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];\r\n  }\r\n\r\n  const LIGHT = { x: -0.55, y: -0.65, z: 0.52 };\r\n  const LIGHT_LEN = Math.sqrt(LIGHT.x ** 2 + LIGHT.y ** 2 + LIGHT.z ** 2);\r\n  const LN = { x: LIGHT.x \/ LIGHT_LEN, y: LIGHT.y \/ LIGHT_LEN, z: LIGHT.z \/ LIGHT_LEN };\r\n  const SHADOW_OX = 0.5;\r\n  const SHADOW_OY = 0.65;\r\n\r\n  \/\/ Pre-render a bead sprite for a given hex colour at a fixed size.\r\n  \/\/ Returns an offscreen canvas. We cache these so each colour is only\r\n  \/\/ rendered once per generateMix call regardless of bead count.\r\n  const SPRITE_SIZE = 32; \/\/ px, power of 2 for GPU efficiency\r\n  const spriteCache = {};\r\n\r\n  function getSprite(hex) {\r\n    if (spriteCache[hex]) return spriteCache[hex];\r\n    const s = SPRITE_SIZE;\r\n    const oc = document.createElement('canvas');\r\n    oc.width = s; oc.height = s;\r\n    const octx = oc.getContext('2d');\r\n    const cx = s \/ 2, cy = s \/ 2, r = s \/ 2 - 1;\r\n    const [R, G, B] = hexToRgb(hex);\r\n\r\n    \/\/ Sphere gradient \u2014 light from upper-left\r\n    const hlx = cx + r * LN.x * -0.38;\r\n    const hly = cy + r * LN.y * -0.38;\r\n    const g = octx.createRadialGradient(hlx, hly, 0, cx - r * LN.x * 0.12, cy - r * LN.y * 0.12, r * 1.05);\r\n    g.addColorStop(0, `rgb(${Math.min(255, R + 65)},${Math.min(255, G + 65)},${Math.min(255, B + 65)})`);\r\n    g.addColorStop(0.28, `rgb(${Math.min(255, R + 20)},${Math.min(255, G + 20)},${Math.min(255, B + 20)})`);\r\n    g.addColorStop(0.62, `rgb(${R},${G},${B})`);\r\n    g.addColorStop(1, `rgb(${Math.round(R * 0.55)},${Math.round(G * 0.55)},${Math.round(B * 0.55)})`);\r\n    octx.beginPath();\r\n    octx.arc(cx, cy, r, 0, Math.PI * 2);\r\n    octx.fillStyle = g;\r\n    octx.fill();\r\n\r\n    \/\/ Specular glint\r\n    const spec = octx.createRadialGradient(hlx + r * 0.04, hly + r * 0.04, 0, hlx, hly, r * 0.22);\r\n    spec.addColorStop(0, 'rgba(255,255,255,0.58)');\r\n    spec.addColorStop(0.4, 'rgba(255,255,255,0.08)');\r\n    spec.addColorStop(1, 'rgba(255,255,255,0)');\r\n    octx.beginPath();\r\n    octx.arc(cx, cy, r, 0, Math.PI * 2);\r\n    octx.fillStyle = spec;\r\n    octx.fill();\r\n\r\n    spriteCache[hex] = oc;\r\n    return oc;\r\n  }\r\n\r\n  \/\/ Shadow sprite \u2014 same for all beads, just one\r\n  let shadowSprite = null;\r\n  function getShadowSprite() {\r\n    if (shadowSprite) return shadowSprite;\r\n    const s = SPRITE_SIZE;\r\n    const oc = document.createElement('canvas');\r\n    oc.width = s * 2; oc.height = s; \/\/ wider to accommodate offset ellipse\r\n    const octx = oc.getContext('2d');\r\n    const cx = s * 0.5 + s * SHADOW_OX * 0.5;\r\n    const cy = s * 0.5 + s * SHADOW_OY * 0.5;\r\n    const rx = s * 0.44, ry = s * 0.21;\r\n    const sg = octx.createRadialGradient(cx, cy, 0, cx, cy, rx);\r\n    sg.addColorStop(0, 'rgba(0,0,0,0.28)');\r\n    sg.addColorStop(0.5, 'rgba(0,0,0,0.10)');\r\n    sg.addColorStop(1, 'rgba(0,0,0,0)');\r\n    octx.beginPath();\r\n    octx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);\r\n    octx.fillStyle = sg;\r\n    octx.fill();\r\n    shadowSprite = oc;\r\n    return oc;\r\n  }\r\n\r\n\r\n\r\n  function generateMix() {\r\n    \/\/ Clear cached sprites so old offscreen canvases are released\r\n    Object.keys(spriteCache).forEach(k => delete spriteCache[k]);\r\n    shadowSprite = null;\r\n\r\n    \/\/ Slots 0-2 are big pebbles, slot 3 is half-size pebbles\r\n    const bigColours = [0, 1, 2].map(i => COLOURS[selected[i]]);\r\n    const smallColour = COLOURS[selected[3]];\r\n\r\n    const canvas = document.getElementById('canvas');\r\n    const W = Math.min(canvas.parentElement.clientWidth, 900);\r\n    const H = Math.min(Math.max(Math.round(W * 0.55), 220), 360);\r\n    canvas.width = W;\r\n    canvas.height = H;\r\n    \/\/ canvas.style.width = W + 'px';\r\n    canvas.style.height = H + 'px';\r\n\r\n    \/\/ const canvas = document.getElementById('canvas');\r\n\r\n    \/\/ const W = window.innerWidth <= 768 ? 350 : 900;\r\n    \/\/ const H = Math.round(W * 0.55);\r\n\r\n    \/\/ canvas.width = W;\r\n    \/\/ canvas.height = H;\r\n\r\n    \/\/ canvas.style.width = W + 'px';\r\n    \/\/ canvas.style.height = H + 'px';\r\n\r\n    const ctx = canvas.getContext('2d');\r\n    const rng = makePRNG(Date.now() & 0xffffffff);\r\n\r\n    const R = 3.6;\r\n    const R_SMALL = R * (2 \/ 3);\r\n\r\n    ctx.fillStyle = '#1a1a1a';\r\n    ctx.fillRect(0, 0, W, H);\r\n\r\n    \/\/ === Big pebble layer: hex grid covering the full canvas ===\r\n    \/\/ Tighter spacing + minimal jitter ensures full coverage with no black gaps.\r\n    const spacing = R * 1.20;\r\n    const rowH = spacing * 0.86;\r\n    const cols = Math.ceil((W + R * 6) \/ spacing) + 2;\r\n    const rows = Math.ceil((H + R * 6) \/ rowH) + 2;\r\n\r\n    const bigPoints = [];\r\n    for (let row = 0; row < rows; row++) {\r\n      const rowOffset = (row % 2 === 0) ? 0 : spacing * 0.5;\r\n      for (let col = 0; col < cols; col++) {\r\n        const bx = -R * 3 + col * spacing + rowOffset;\r\n        const by = -R * 3 + row * rowH;\r\n        const jx = (rng() - 0.5) * spacing * 0.30;\r\n        const jy = (rng() - 0.5) * rowH * 0.30;\r\n        const sr = R * (0.95 + rng() * 0.20);\r\n        bigPoints.push({ x: bx + jx, y: by + jy, r: sr });\r\n      }\r\n    }\r\n    \/\/ Shuffle big points for random colour distribution\r\n    for (let i = bigPoints.length - 1; i > 0; i--) {\r\n      const j = Math.floor(rng() * (i + 1));\r\n      [bigPoints[i], bigPoints[j]] = [bigPoints[j], bigPoints[i]];\r\n    }\r\n\r\n    \/\/ Assign colours: 1\/3 each to slots 1-3\r\n    const N_big = bigPoints.length;\r\n    const perBigSlot = Math.floor(N_big \/ 3);\r\n    const bigColourList = [];\r\n    for (let s = 0; s < 3; s++) {\r\n      for (let i = 0; i < perBigSlot; i++) bigColourList.push(bigColours[s].hex);\r\n    }\r\n    while (bigColourList.length < N_big) bigColourList.push(bigColours[2].hex);\r\n    for (let i = bigColourList.length - 1; i > 0; i--) {\r\n      const j = Math.floor(rng() * (i + 1));\r\n      [bigColourList[i], bigColourList[j]] = [bigColourList[j], bigColourList[i]];\r\n    }\r\n\r\n    \/\/ === Small pebble layer ===\r\n    \/\/ Each big slot stamps perBigSlot \u00d7 \u03c0 R\u00b2 of area. To match that area with\r\n    \/\/ 2\/3-radius pebbles (4\/9 the area each), slot 4 needs 9\/4 \u00d7 perBigSlot beads.\r\n    \/\/ Boost slot-4 density a touch so small pebbles also help fill any micro-gaps.\r\n    const N_small = Math.round(perBigSlot * 9 \/ 4 * 1.30);\r\n    const smallPoints = [];\r\n    for (let i = 0; i < N_small; i++) {\r\n      const x = -R_SMALL * 2 + rng() * (W + R_SMALL * 4);\r\n      const y = -R_SMALL * 2 + rng() * (H + R_SMALL * 4);\r\n      const sr = R_SMALL * (0.95 + rng() * 0.20);\r\n      smallPoints.push({ x, y, r: sr });\r\n    }\r\n\r\n    \/\/ === Combine into a single z-ordered list ===\r\n    \/\/ Random depth so big and small pebbles interleave naturally \u2014 like pebbles\r\n    \/\/ settling at different heights in a real pour. With equal stamp area per\r\n    \/\/ slot, random z-order makes each colour's visible share converge to ~25%.\r\n    const allPebbles = [];\r\n    bigPoints.forEach((p, idx) => {\r\n      allPebbles.push({ x: p.x, y: p.y, r: p.r, hex: bigColourList[idx] });\r\n    });\r\n    smallPoints.forEach(p => {\r\n      allPebbles.push({ x: p.x, y: p.y, r: p.r, hex: smallColour.hex });\r\n    });\r\n    for (let i = allPebbles.length - 1; i > 0; i--) {\r\n      const j = Math.floor(rng() * (i + 1));\r\n      [allPebbles[i], allPebbles[j]] = [allPebbles[j], allPebbles[i]];\r\n    }\r\n\r\n    \/\/ Pre-warm sprites\r\n    bigColours.forEach(m => getSprite(m.hex));\r\n    getSprite(smallColour.hex);\r\n    const shad = getShadowSprite();\r\n    const SS = SPRITE_SIZE;\r\n\r\n    \/\/ Pass 1: all shadows, in z-order\r\n    allPebbles.forEach(p => {\r\n      const scale = (p.r * 2) \/ SS;\r\n      const sw = shad.width * scale;\r\n      const sh = shad.height * scale;\r\n      ctx.drawImage(shad, p.x - sw * 0.25, p.y - sh * 0.5, sw, sh);\r\n    });\r\n\r\n    \/\/ Pass 2: all pebbles, in z-order\r\n    allPebbles.forEach(p => {\r\n      const sprite = getSprite(p.hex);\r\n      const d = p.r * 2;\r\n      ctx.drawImage(sprite, p.x - p.r, p.y - p.r, d, d);\r\n    });\r\n\r\n    \/\/ Ambient wash\r\n    const wash = ctx.createLinearGradient(0, 0, W * 0.6, H);\r\n    wash.addColorStop(0, 'rgba(255,248,235,0.08)');\r\n    wash.addColorStop(0.5, 'rgba(255,255,255,0.02)');\r\n    wash.addColorStop(1, 'rgba(0,0,0,0.05)');\r\n    ctx.fillStyle = wash;\r\n    ctx.fillRect(0, 0, W, H);\r\n\r\n    \/\/ Legend (each slot is 25% by area)\r\n    const legendData = [\r\n      ...bigColours.map(c => ({ ...c, small: false })),\r\n      { ...smallColour, small: true }\r\n    ];\r\n    document.getElementById('legend').innerHTML = legendData.map(m => `\r\n    <div class=\"legend-item\">\r\n      <div class=\"legend-dot${m.small ? ' small' : ''}\" style=\"background:${m.hex}\"><\/div>\r\n      <span><span class=\"legend-name\">${m.name}<\/span> <span class=\"legend-meta\">\u00b7 25% \u00b7 ${m.small ? 'Small granule' : 'Large granule'}<\/span><\/span>\r\n    <\/div>`).join('');\r\n  }\r\n\r\n  buildSelectors();\r\n  generateMix();\r\n<\/script>\r\n\r\n<!-- <script>\r\n  const canvas = document.getElementById('canvas');\r\n  const frame = document.querySelector('.canvas-frame');\r\n  const previewPanel = document.querySelector('.legend-wrap');\r\n\r\n  function resizeCanvas() {\r\n    const padding = 14;\r\n\r\n    const W = frame.clientWidth - (padding * 2);\r\n    const H = frame.clientHeight - (padding * 2);\r\n\r\n    canvas.width = W;\r\n    canvas.height = H;\r\n\r\n    canvas.style.width = W + 'px';\r\n    canvas.style.height = H + 'px';\r\n  }\r\n\r\n  resizeCanvas();\r\n\r\n  \/\/ 1. Watch layout size changes\r\n  const resizeObserver = new ResizeObserver(() => {\r\n    resizeCanvas();\r\n  });\r\n\r\n  resizeObserver.observe(frame);\r\n\r\n  \/\/ 2. Watch DOM changes inside .previewPanel\r\n  const mutationObserver = new MutationObserver(() => {\r\n    resizeCanvas();\r\n  });\r\n\r\n  if (previewPanel) {\r\n    mutationObserver.observe(previewPanel, {\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n      characterData: true\r\n    });\r\n  }\r\n\r\n  \/\/ optional fallback\r\n  window.addEventListener('resize', resizeCanvas);\r\n<\/script> -->\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Build Your Perfect Blend Pick four colours, preview your mix in real time. No guesswork, just results. PolySoft Colour Mixer Pick four colours \u00b7 preview your blend Live Preview Randomise New variation Each preview is uniquely generated &mdash; an indication only. Build your blend Choose your four colours Three large granules plus one small granule, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2414","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Colour Mixer - PolySoft<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Colour Mixer - PolySoft\" \/>\n<meta property=\"og:description\" content=\"Build Your Perfect Blend Pick four colours, preview your mix in real time. No guesswork, just results. PolySoft Colour Mixer Pick four colours \u00b7 preview your blend Live Preview Randomise New variation Each preview is uniquely generated &mdash; an indication only. Build your blend Choose your four colours Three large granules plus one small granule, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/polysoft.devstudio.work\/index.php\/colour-mixer\/\" \/>\n<meta property=\"og:site_name\" content=\"PolySoft\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-25T09:19:42+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/polysoft.devstudio.work\\\/index.php\\\/colour-mixer\\\/\",\"url\":\"https:\\\/\\\/polysoft.devstudio.work\\\/index.php\\\/colour-mixer\\\/\",\"name\":\"Colour Mixer - PolySoft\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/polysoft.devstudio.work\\\/#website\"},\"datePublished\":\"2026-06-25T03:37:13+00:00\",\"dateModified\":\"2026-06-25T09:19:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/polysoft.devstudio.work\\\/index.php\\\/colour-mixer\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/polysoft.devstudio.work\\\/index.php\\\/colour-mixer\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/polysoft.devstudio.work\\\/index.php\\\/colour-mixer\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/polysoft.devstudio.work\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Colour Mixer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/polysoft.devstudio.work\\\/#website\",\"url\":\"https:\\\/\\\/polysoft.devstudio.work\\\/\",\"name\":\"PolySoft\",\"description\":\"Premium surfaces for high-performance environments.\",\"publisher\":{\"@id\":\"https:\\\/\\\/polysoft.devstudio.work\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/polysoft.devstudio.work\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/polysoft.devstudio.work\\\/#organization\",\"name\":\"PolySoft\",\"url\":\"https:\\\/\\\/polysoft.devstudio.work\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/polysoft.devstudio.work\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/polysoft.devstudio.work\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/PolySoft-Logo.svg\",\"contentUrl\":\"https:\\\/\\\/polysoft.devstudio.work\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/PolySoft-Logo.svg\",\"width\":167,\"height\":42,\"caption\":\"PolySoft\"},\"image\":{\"@id\":\"https:\\\/\\\/polysoft.devstudio.work\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Colour Mixer - PolySoft","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Colour Mixer - PolySoft","og_description":"Build Your Perfect Blend Pick four colours, preview your mix in real time. No guesswork, just results. PolySoft Colour Mixer Pick four colours \u00b7 preview your blend Live Preview Randomise New variation Each preview is uniquely generated &mdash; an indication only. Build your blend Choose your four colours Three large granules plus one small granule, [&hellip;]","og_url":"https:\/\/polysoft.devstudio.work\/index.php\/colour-mixer\/","og_site_name":"PolySoft","article_modified_time":"2026-06-25T09:19:42+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/polysoft.devstudio.work\/index.php\/colour-mixer\/","url":"https:\/\/polysoft.devstudio.work\/index.php\/colour-mixer\/","name":"Colour Mixer - PolySoft","isPartOf":{"@id":"https:\/\/polysoft.devstudio.work\/#website"},"datePublished":"2026-06-25T03:37:13+00:00","dateModified":"2026-06-25T09:19:42+00:00","breadcrumb":{"@id":"https:\/\/polysoft.devstudio.work\/index.php\/colour-mixer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/polysoft.devstudio.work\/index.php\/colour-mixer\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/polysoft.devstudio.work\/index.php\/colour-mixer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/polysoft.devstudio.work\/"},{"@type":"ListItem","position":2,"name":"Colour Mixer"}]},{"@type":"WebSite","@id":"https:\/\/polysoft.devstudio.work\/#website","url":"https:\/\/polysoft.devstudio.work\/","name":"PolySoft","description":"Premium surfaces for high-performance environments.","publisher":{"@id":"https:\/\/polysoft.devstudio.work\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/polysoft.devstudio.work\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/polysoft.devstudio.work\/#organization","name":"PolySoft","url":"https:\/\/polysoft.devstudio.work\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/polysoft.devstudio.work\/#\/schema\/logo\/image\/","url":"https:\/\/polysoft.devstudio.work\/wp-content\/uploads\/2026\/06\/PolySoft-Logo.svg","contentUrl":"https:\/\/polysoft.devstudio.work\/wp-content\/uploads\/2026\/06\/PolySoft-Logo.svg","width":167,"height":42,"caption":"PolySoft"},"image":{"@id":"https:\/\/polysoft.devstudio.work\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/polysoft.devstudio.work\/index.php\/wp-json\/wp\/v2\/pages\/2414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/polysoft.devstudio.work\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/polysoft.devstudio.work\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/polysoft.devstudio.work\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/polysoft.devstudio.work\/index.php\/wp-json\/wp\/v2\/comments?post=2414"}],"version-history":[{"count":36,"href":"https:\/\/polysoft.devstudio.work\/index.php\/wp-json\/wp\/v2\/pages\/2414\/revisions"}],"predecessor-version":[{"id":2452,"href":"https:\/\/polysoft.devstudio.work\/index.php\/wp-json\/wp\/v2\/pages\/2414\/revisions\/2452"}],"wp:attachment":[{"href":"https:\/\/polysoft.devstudio.work\/index.php\/wp-json\/wp\/v2\/media?parent=2414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}