{"id":1604,"date":"2025-08-13T15:10:54","date_gmt":"2025-08-13T15:10:54","guid":{"rendered":"https:\/\/jouwmakelaar.online\/?page_id=1604"},"modified":"2026-04-28T09:20:13","modified_gmt":"2026-04-28T09:20:13","slug":"huisstijl-kleuren-bepalen","status":"publish","type":"page","link":"https:\/\/jouwmakelaar.online\/en\/huisstijl-kleuren-bepalen\/","title":{"rendered":"Huisstijl kleuren bepalen"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1604\" class=\"elementor elementor-1604\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1f649ea e-con-full e-flex e-con e-child\" data-id=\"1f649ea\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-01a0eb7 elementor-widget elementor-widget-heading\" data-id=\"01a0eb7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Huisstijl kleurcodes voor jouwmakelaar.online<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-91bf48b elementor-widget elementor-widget-text-editor\" data-id=\"91bf48b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Met jouwmakelaar.online communiceer je supereenvoudig in je eigen huisstijl. Maar die kleurcodes, wat waren ze ook alweer? Upload hieronder je logo of een screenshot van je website, dan laten wij je de kleurcodes zien.<\/p>\t\t\t\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-7822414 e-flex e-con-boxed e-con e-parent\" data-id=\"7822414\" 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-9862613 elementor-widget elementor-widget-html\" data-id=\"9862613\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n  \/* Layout *\/\n  .icc-wrap { \n    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; \n    position: relative; \n    margin: 0 auto;\n    \/* padding: 20px; *\/\n  }\n  \n  .icc-dropzone {\n    border: 2px dashed #e1e5e9;\n    padding: 40px 20px;\n    text-align: center;\n    cursor: pointer;\n    margin-bottom: 30px;\n    border-radius: 16px;\n    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n    transition: all 0.3s ease;\n    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);\n  }\n  \n  .icc-dropzone:hover {\n    border-color: #3452ff;\n    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n    transform: translateY(-2px);\n    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.15);\n  }\n  \n  .icc-dropzone h3 {\n    margin: 0 0 12px 0;\n    font-size: 20px;\n    font-weight: 600;\n    color: #1e293b;\n  }\n  \n  .icc-dropzone small {\n    color: #64748b;\n    font-size: 14px;\n    line-height: 1.5;\n  }\n  \n  .icc-two-col {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 32px;\n    align-items: start;\n  }\n  \n  @media (max-width: 800px) {\n    .icc-two-col { \n      grid-template-columns: 1fr; \n      gap: 24px;\n    }\n  }\n\n  \/* Preview *\/\n  .icc-preview {\n    max-width: 100%;\n    height: auto;\n    display: none;\n    border-radius: 16px;\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);\n    cursor: crosshair;\n  }\n\n  \/* Preview container for centering small images *\/\n  .icc-preview-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 200px;\n    padding: 20px;\n    border: 1px solid #e2e8f0;\n    border-radius: 16px;\n    background-image: \n      linear-gradient(45deg, #f1f5f9 25%, transparent 25%), \n      linear-gradient(-45deg, #f1f5f9 25%, transparent 25%), \n      linear-gradient(45deg, transparent 75%, #f1f5f9 75%), \n      linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);\n    background-size: 20px 20px;\n    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;\n    background-color: #ffffff;\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);\n    transition: all 0.3s ease;\n  }\n  \n  .icc-preview-container:empty {\n    background-image: none;\n    background-color: #f8fafc;\n    border: 2px dashed #cbd5e1;\n  }\n\n  \/* Preview instruction text *\/\n  .icc-preview-instruction {\n    text-align: center;\n    margin-top: 12px;\n    font-size: 14px;\n    color: #64748b;\n    font-style: italic;\n    line-height: 1.4;\n  }\n\n  \/* Palette *\/\n  .icc-palette {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n    gap: 16px;\n  }\n  \n  .icc-swatch {\n    border-radius: 16px;\n    overflow: hidden;\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n    cursor: pointer;\n    user-select: none;\n    transition: all 0.2s ease;\n    position: relative;\n    background: white;\n  }\n  \n  .icc-swatch:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);\n  }\n  \n  .icc-swatch:active { \n    transform: scale(.98); \n  }\n  \n  .icc-chip {\n    width: 100%;\n    aspect-ratio: 1\/1;\n    display: grid;\n    place-items: center;\n    font-size: 13px;\n    font-weight: 600;\n    letter-spacing: .3px;\n    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n  }\n  \n  .icc-meta {\n    padding: 12px;\n    font-size: 13px;\n    line-height: 1.3;\n    display: flex;\n    justify-content: space-between;\n    gap: 8px;\n    background: white;\n  }\n  \n  .icc-meta .hex { \n    font-weight: 600; \n    color: #1e293b;\n  }\n  \n  .icc-meta .pct {\n    color: #64748b;\n  }\n  \n  .icc-note {\n    font-size: 13px;\n    color: #64748b;\n    margin-top: 12px;\n    font-style: italic;\n  }\n\n  \/* Tooltip *\/\n  .icc-tooltip {\n    position: absolute;\n    top: 8px;\n    left: 50%;\n    transform: translateX(-50%);\n    background: rgba(15, 23, 42, 0.9);\n    color: #fff;\n    padding: 6px 12px;\n    border-radius: 8px;\n    font-size: 12px;\n    white-space: nowrap;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity .2s ease;\n    backdrop-filter: blur(8px);\n  }\n  \n  .icc-swatch.show-tooltip .icc-tooltip {\n    opacity: 1;\n  }\n<\/style>\n\n<div class=\"icc-wrap\">\n  <div class=\"icc-dropzone\" id=\"icc-dropzone\">\n    <h3>Upload hier je logo of screenshot van je website<\/h3>\n    <small>Of gebruik Ctrl+V om een afbeelding te plakken<\/small>\n    <input id=\"icc-file\" type=\"file\" accept=\"image\/*\" style=\"display:none\">\n  <\/div>\n\n  <div class=\"icc-two-col\">\n    <div>\n      <div class=\"icc-preview-container\" id=\"icc-preview-container\" style=\"display: none;\">\n        <img id=\"icc-preview\" class=\"icc-preview\" alt=\"Uploaded preview\" \/>\n      <\/div>\n      <div class=\"icc-preview-instruction\" id=\"icc-preview-instruction\" style=\"display: none;\">\n        Klik op de afbeelding om een extra kleur te selecteren\n      <\/div>\n    <\/div>\n    <div>\n      <div class=\"icc-palette\" id=\"icc-palette\"><\/div>\n      <!-- <div class=\"icc-note\">Percentages are relative to all pixels in the image (top colors may not sum to 100%).<\/div> -->\n    <\/div>\n  <\/div>\n\n  <canvas id=\"icc-canvas\" style=\"display:none\"><\/canvas>\n<\/div>\n\n<script>\n(() => {\n  const dropzone = document.getElementById('icc-dropzone');\n  const fileInput = document.getElementById('icc-file');\n  const preview = document.getElementById('icc-preview');\n  const previewContainer = document.getElementById('icc-preview-container');\n  const previewInstruction = document.getElementById('icc-preview-instruction');\n  const palette = document.getElementById('icc-palette');\n  const canvas = document.getElementById('icc-canvas');\n\n  const TOP_N = 8; \/\/ how many colors to show\n  let extractedColors = []; \/\/ Store extracted colors\n\n  dropzone.addEventListener('click', () => fileInput.click());\n  dropzone.addEventListener('dragover', e => { \n    e.preventDefault(); \n    dropzone.classList.add('dragover');\n  });\n  dropzone.addEventListener('dragleave', e => { \n    e.preventDefault(); \n    dropzone.classList.remove('dragover');\n  });\n  dropzone.addEventListener('drop', e => {\n    e.preventDefault();\n    dropzone.classList.remove('dragover');\n    if (e.dataTransfer.files[0]) loadImage(e.dataTransfer.files[0]);\n  });\n  fileInput.addEventListener('change', e => {\n    if (e.target.files[0]) loadImage(e.target.files[0]);\n  });\n\n  \/\/ Add paste event listener for Ctrl+V\n  document.addEventListener('paste', e => {\n    e.preventDefault();\n    const items = e.clipboardData.items;\n    \n    for (let i = 0; i < items.length; i++) {\n      const item = items[i];\n      if (item.type.indexOf('image') !== -1) {\n        const file = item.getAsFile();\n        if (file) {\n          loadImage(file);\n          break;\n        }\n      }\n    }\n  });\n\n  function loadImage(file) {\n    if (!file.type.startsWith('image\/')) return;\n    const url = URL.createObjectURL(file);\n    \n    \/\/ Clear old event listeners and reset colors\n    if (preview._currentClickHandler) {\n      preview.removeEventListener('click', preview._currentClickHandler);\n      preview._currentClickHandler = null;\n    }\n    extractedColors = [];\n    displayColors();\n    \n    \/\/ Show preview container, image, and instruction\n    previewContainer.style.display = 'flex';\n    previewInstruction.style.display = 'block';\n    preview.src = url;\n    preview.style.display = 'block';\n    \n    const img = new Image();\n    img.onload = () => {\n      extractColors(img);\n      setupImageClick(img);\n    };\n    img.src = url;\n  }\n\n  function setupImageClick(img) {\n    \/\/ Remove existing click listener first\n    if (preview._currentClickHandler) {\n      preview.removeEventListener('click', preview._currentClickHandler);\n    }\n    \n    \/\/ Create a new click handler specifically for this image\n    const clickHandler = (e) => handleImageClick(e, img);\n    \n    \/\/ Store the handler reference so we can remove it later\n    preview._currentClickHandler = clickHandler;\n    \n    \/\/ Add new click listener\n    preview.addEventListener('click', clickHandler);\n  }\n\n  function handleImageClick(e, img) {\n    const rect = preview.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const y = e.clientY - rect.top;\n    \n    \/\/ Calculate scale factor\n    const scaleX = img.width \/ rect.width;\n    const scaleY = img.height \/ rect.height;\n    \n    \/\/ Get color at clicked position\n    const ctx = canvas.getContext('2d', { willReadFrequently: true });\n    canvas.width = img.width;\n    canvas.height = img.height;\n    ctx.drawImage(img, 0, 0);\n    \n    const imageData = ctx.getImageData(0, 0, img.width, img.height);\n    const pixelX = Math.floor(x * scaleX);\n    const pixelY = Math.floor(y * scaleY);\n    const index = (pixelY * img.width + pixelX) * 4;\n    \n    const r = imageData.data[index];\n    const g = imageData.data[index + 1];\n    const b = imageData.data[index + 2];\n    \n    addPickedColor(r, g, b);\n  }\n\n  function addPickedColor(r, g, b) {\n    const hex = rgbToHex(r, g, b);\n    const rgb = `${r},${g},${b}`;\n    \n    \/\/ Check if color already exists\n    const existingIndex = extractedColors.findIndex(color => color.rgb === rgb);\n    if (existingIndex !== -1) {\n      \/\/ Color already exists, just refresh display\n      displayColors();\n      return;\n    }\n    \n    \/\/ Add new picked color to the array\n    const newColor = {\n      rgb: rgb,\n      r: r,\n      g: g,\n      b: b,\n      hex: hex,\n      count: 1,\n      isPicked: true\n    };\n    \n    extractedColors.push(newColor);\n    \n    \/\/ Keep only the top colors + picked colors\n    const topColors = extractedColors.filter(color => !color.isPicked).slice(0, TOP_N);\n    const pickedColors = extractedColors.filter(color => color.isPicked);\n    extractedColors = [...topColors, ...pickedColors];\n    \n    displayColors();\n  }\n\n  function extractColors(img) {\n    const ctx = canvas.getContext('2d', { willReadFrequently: true });\n    const maxSide = 800;\n    const scale = Math.min(1, maxSide \/ Math.max(img.width, img.height));\n    const w = Math.max(1, Math.round(img.width * scale));\n    const h = Math.max(1, Math.round(img.height * scale));\n    canvas.width = w;\n    canvas.height = h;\n    ctx.drawImage(img, 0, 0, w, h);\n\n    const data = ctx.getImageData(0, 0, w, h).data;\n    const colors = Object.create(null);\n\n    const step = 16;\n    const totalPixels = data.length \/ 4;\n    for (let i = 0; i < data.length; i += 4) {\n      const r = Math.min(255, Math.round(data[i]   \/ step) * step);\n      const g = Math.min(255, Math.round(data[i+1] \/ step) * step);\n      const b = Math.min(255, Math.round(data[i+2] \/ step) * step);\n      const key = `${r},${g},${b}`;\n      colors[key] = (colors[key] || 0) + 1;\n    }\n\n    const sorted = Object.entries(colors)\n      .sort((a, b) => b[1] - a[1])\n      .slice(0, TOP_N);\n\n    \/\/ Reset extracted colors array\n    extractedColors = [];\n    \n    sorted.forEach(([rgb, count]) => {\n      const [r, g, b] = rgb.split(',').map(Number);\n      const hex = rgbToHex(r, g, b);\n      const pct = (count \/ totalPixels) * 100;\n\n      extractedColors.push({\n        rgb: rgb,\n        r: r,\n        g: g,\n        b: b,\n        hex: hex,\n        count: count,\n        percentage: pct,\n        isPicked: false\n      });\n    });\n    \n    displayColors();\n  }\n\n  function displayColors() {\n    palette.innerHTML = '';\n    \n    extractedColors.forEach((color) => {\n      const sw = document.createElement('div');\n      sw.className = 'icc-swatch';\n      \n      if (color.isPicked) {\n        sw.title = `${color.hex} \u2022 Picked color`;\n      } else {\n        sw.title = `${color.hex} \u2022 ${color.percentage.toFixed(1)}%`;\n      }\n\n      const chip = document.createElement('div');\n      chip.className = 'icc-chip';\n      chip.style.background = color.hex;\n      chip.style.color = getContrastColor(color.r, color.g, color.b);\n      chip.textContent = color.hex;\n\n      const meta = document.createElement('div');\n      meta.className = 'icc-meta';\n      const hexEl = document.createElement('span');\n      hexEl.className = 'hex';\n      hexEl.textContent = color.hex;\n      const pctEl = document.createElement('span');\n      pctEl.className = 'pct';\n      if (color.isPicked) {\n        pctEl.textContent = '';\n        pctEl.style.color = '#007bff';\n        pctEl.style.fontWeight = '600';\n      } else {\n        pctEl.textContent = `${color.percentage.toFixed(1)}%`;\n      }\n      meta.appendChild(hexEl);\n      meta.appendChild(pctEl);\n\n      const tooltip = document.createElement('div');\n      tooltip.className = 'icc-tooltip';\n      tooltip.textContent = 'Gekopieerd!';\n\n      sw.appendChild(chip);\n      sw.appendChild(meta);\n      sw.appendChild(tooltip);\n\n      sw.addEventListener('click', () => {\n        navigator.clipboard.writeText(color.hex).then(() => {\n          sw.classList.add('show-tooltip');\n          setTimeout(() => sw.classList.remove('show-tooltip'), 1000);\n        });\n      });\n\n      palette.appendChild(sw);\n    });\n  }\n\n  function rgbToHex(r, g, b) {\n    return \"#\" + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');\n  }\n  \n  function getContrastColor(r, g, b) {\n    const srgb = [r, g, b].map(v => {\n      v \/= 255;\n      return v <= 0.03928 ? v \/ 12.92 : Math.pow((v + 0.055) \/ 1.055, 2.4);\n    });\n    const luminance = 0.2126 * srgb[0] + 0.7152 * srgb[1] + 0.0722 * srgb[2];\n    return luminance > 0.5 ? '#000' : '#fff';\n  }\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-23b6936 e-flex e-con-boxed e-con e-parent\" data-id=\"23b6936\" 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-91cfc5d elementor-widget elementor-widget-heading\" data-id=\"91cfc5d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Kleurcodes bekend?<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4e5b5bd e-con-full e-flex e-con e-child\" data-id=\"4e5b5bd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-41571d4 elementor-align-right elementor-mobile-align-justify elementor-widget__width-auto elementor-tablet-align-left elementor-widget elementor-widget-button\" data-id=\"41571d4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-float\" href=\"https:\/\/kolibri24.com\/app\/app-xchange\/518122e2-2c77-4da0-b96d-38d45cc93e8c\/widget\/d12a59d2-2ee1-49dc-8f67-23b5ff5435cc\" target=\"_blank\" rel=\"nofollow\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Instellen in Jouwmakelaar.online<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0448ae5 elementor-align-right elementor-mobile-align-justify elementor-widget__width-auto elementor-tablet-align-left elementor-widget elementor-widget-button\" data-id=\"0448ae5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-float\" href=\"https:\/\/jouwmakelaar.online\/wij-stellen-je-huisstijl-in\/\" target=\"_blank\" rel=\"nofollow\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Laat ons jouw huisstijl instellen<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Huisstijl kleurcodes voor jouwmakelaar.online Met jouwmakelaar.online communiceer je supereenvoudig in je eigen huisstijl. Maar die kleurcodes, wat waren ze ook alweer? Upload hieronder je logo of een screenshot van je website, dan laten wij je de kleurcodes zien. Upload hier je logo of screenshot van je website Of gebruik Ctrl+V om een afbeelding te plakken [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-1604","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jouwmakelaar.online\/en\/wp-json\/wp\/v2\/pages\/1604","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jouwmakelaar.online\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jouwmakelaar.online\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jouwmakelaar.online\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jouwmakelaar.online\/en\/wp-json\/wp\/v2\/comments?post=1604"}],"version-history":[{"count":32,"href":"https:\/\/jouwmakelaar.online\/en\/wp-json\/wp\/v2\/pages\/1604\/revisions"}],"predecessor-version":[{"id":1688,"href":"https:\/\/jouwmakelaar.online\/en\/wp-json\/wp\/v2\/pages\/1604\/revisions\/1688"}],"wp:attachment":[{"href":"https:\/\/jouwmakelaar.online\/en\/wp-json\/wp\/v2\/media?parent=1604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}