{"id":7378,"date":"2023-05-11T17:58:43","date_gmt":"2023-05-11T14:58:43","guid":{"rendered":"https:\/\/wp.berlingpaints.com\/fandecks\/color-suggestions\/"},"modified":"2023-07-19T13:48:59","modified_gmt":"2023-07-19T10:48:59","slug":"color-suggestions","status":"publish","type":"page","link":"https:\/\/www.berling.gr\/en\/fandecks\/color-suggestions\/","title":{"rendered":"Color suggestions"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7378\" class=\"elementor elementor-7378 elementor-2345\" data-elementor-post-type=\"page\">\n\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-53250d3 e-con-full e-flex e-con e-parent\" data-id=\"53250d3\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-193d995 elementor-widget elementor-widget-image\" data-id=\"193d995\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"154\" height=\"154\" src=\"https:\/\/www.berling.gr\/wp-content\/uploads\/xrwmatikes_protaseis.jpg\" class=\"attachment-full size-full wp-image-1981\" alt=\"\" srcset=\"https:\/\/www.berling.gr\/wp-content\/uploads\/xrwmatikes_protaseis.jpg 154w, https:\/\/www.berling.gr\/wp-content\/uploads\/xrwmatikes_protaseis-100x100.jpg 100w, https:\/\/www.berling.gr\/wp-content\/uploads\/xrwmatikes_protaseis-150x150.jpg 150w\" sizes=\"(max-width: 154px) 100vw, 154px\" \/>\t\t\t\t\t\t\t\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-591135e elementor-widget elementor-widget-heading\" data-id=\"591135e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Color suggestions<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-efcd66a e-flex e-con-boxed e-con e-parent\" data-id=\"efcd66a\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1374ebc elementor-widget elementor-widget-text-editor\" data-id=\"1374ebc\" data-element_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>Discover the key to decorative art through the creation of impressive spaces through the use of color. <\/p>\n<p>Nothing is easier than changing colors! With a simple paint job, you can give new character to your home with ease and economy.<\/p>\n<p><strong>Berling<\/strong>&#8216;s &#8220;<strong>Colour Suggestions<\/strong>&#8221; fandeck offers 60 different shade combinations in packs to help you choose the right shades for your space. Each fandeck page includes 4 decorative colors that can be combined with each other, offering a total of 240 different color variations. <\/p>\n<p>You can choose between neutral and traditional combinations or create modern and dynamic color combinations. Discover the variety of color combinations and be surprised by the result you will create!<\/p>\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-7cd633f elementor-widget elementor-widget-shortcode\" data-id=\"7cd633f\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n          <script>\/\/ Function to create color tiles\r\nfunction createColorTiles(colors) {\r\n  var container = document.getElementById('color-container');\r\n\r\n  for (var i = 0; i < colors.length; i++) {\r\n    var tile = document.createElement('div');\r\n    tile.className = 'color-tile';\r\n    tile.style.backgroundColor = colors[i].hex;\r\n    tile.title = colors[i].name;\r\n\r\n    var icon = document.createElement('i');\r\n    icon.className = 'material-icons';\r\n    icon.textContent = colors[i].icon;\r\n\r\n    var label = document.createElement('div');\r\n    label.className = 'color-label';\r\n    label.textContent = colors[i].name;\r\n\r\n    \/\/ Dynamically adjust label color based on luminance\r\n    var bgColor = colors[i].hex;\r\n    var luminance = 0.2126 * parseInt(bgColor.substr(1, 2), 16) +\r\n                    0.7152 * parseInt(bgColor.substr(3, 2), 16) +\r\n                    0.0722 * parseInt(bgColor.substr(5, 2), 16);\r\n\r\n    if (luminance > 128) {\r\n      label.style.color = '#000000'; \/\/ Black\r\n    } else {\r\n      label.style.color = '#FFFFFF'; \/\/ White\r\n    }\r\n    \r\n    tile.appendChild(icon);\r\n    tile.appendChild(label);\r\n    container.appendChild(tile);\r\n\r\n    tile.addEventListener('click', function (event) {\r\n      createColorPreview(event.target.style.backgroundColor, event.target.title);\r\n    });\r\n\r\n    label.addEventListener('click', function (event) {\r\n      createColorPreview(event.target.parentNode.style.backgroundColor, event.target.parentNode.title);\r\n    });\r\n  }\r\n}\r\n\r\n\/\/ Function to create color preview below the clicked item\r\nfunction createColorPreview(color, name) {\r\n  \/\/ Remove any existing color preview\r\n  var existingPreview = document.querySelector('.color-preview');\r\n  if (existingPreview) {\r\n    existingPreview.remove();\r\n  }\r\n\r\n  \/\/ Create a new color preview\r\n  var colorPreview = document.createElement('div');\r\n  colorPreview.className = 'color-preview';\r\n  colorPreview.style.backgroundColor = color;\r\n\r\n  var colorName = document.createElement('span');\r\n  \r\n  \r\n    \/\/ Dynamically adjust label color based on luminance\r\n  var bgColor =  rgbToHex(color);\r\n  console.log(bgColor);\r\n  var luminance = 0.2126 * parseInt(bgColor.substr(1, 2), 16) +\r\n                  0.7152 * parseInt(bgColor.substr(3, 2), 16) +\r\n                  0.0722 * parseInt(bgColor.substr(5, 2), 16);\r\n\r\nconsole.log(luminance);\r\n  if (luminance > 128) {\r\n    colorName.style.color = '#000000'; \/\/ Black\r\n  } else {\r\n    colorName.style.color = '#FFFFFF'; \/\/ White\r\n  };\r\n  \r\n  \r\n  colorName.textContent = name;\r\n  \r\n\r\n  \r\n  var closeIcon = document.createElement('i');\r\n  closeIcon.className = 'material-icons close-icon';\r\n  closeIcon.textContent = 'close';\r\n  closeIcon.addEventListener('click', function() {\r\n    colorPreview.remove();\r\n  });\r\n\r\n  colorPreview.appendChild(colorName);\r\n  colorPreview.appendChild(closeIcon);\r\n\r\n  var container = document.getElementById('color-container');\r\n  var clickedItem = event.target;\r\n\r\n  \/\/ Insert the color preview below the clicked item\r\n  container.insertBefore(colorPreview, clickedItem.nextSibling);\r\n}\r\n\r\n\r\n\/\/ Function to convert RGB color to HEX format\r\nfunction rgbToHex(rgbColor) {\r\n  var rgbValues = rgbColor.match(\/\\d+\/g);\r\n  var hexColor = '#';\r\n\r\n  for (var i = 0; i < 3; i++) {\r\n    var hexValue = parseInt(rgbValues[i]).toString(16);\r\n    hexColor += hexValue.length === 1 ? '0' + hexValue : hexValue;\r\n  }\r\n\r\n  return hexColor;\r\n}\r\n\r\n\/\/ Function to filter color tiles based on input\r\nfunction filterColors() {\r\n  var filterInput = document.getElementById('filter-input');\r\n  var filterValue = filterInput.value.toLowerCase();\r\n  var colorTiles = document.getElementsByClassName('color-tile');\r\n\r\n  for (var i = 0; i < colorTiles.length; i++) {\r\n    var tile = colorTiles[i];\r\n    var tileLabel = tile.getElementsByClassName('color-label')[0];\r\n    var tileName = tileLabel.textContent.toLowerCase();\r\n\r\n    if (tileName.includes(filterValue)) {\r\n      tile.style.display = 'inline-block';\r\n    } else {\r\n      tile.style.display = 'none';\r\n    }\r\n  }\r\n}\r\n\r\n\r\n\r\n\/\/ Function to create classification filter tiles\r\nfunction createClassificationFilterTiles() {\r\n  var classificationTiles = document.getElementsByClassName('classification-tile');\r\n\r\n  for (var i = 0; i < classificationTiles.length; i++) {\r\n    classificationTiles[i].addEventListener('click', function() {\r\n      var filterValue = this.getAttribute('data-filter');\r\n      var colorTiles = document.getElementsByClassName('color-tile');\r\n\r\n      for (var j = 0; j < colorTiles.length; j++) {\r\n        var classification = colorTiles[j].getAttribute('classification');\r\n        var tileContainer = colorTiles[j].parentElement;\r\n\r\n        if (filterValue === 'all' || classification === filterValue) {\r\n          colorTiles[j].style.display = 'inline-block';\r\n          tileContainer.style.display = 'inline-block';\r\n        } else {\r\n          colorTiles[j].style.display = 'none';\r\n          tileContainer.style.display = 'none';\r\n        }\r\n      }\r\n    });\r\n  }\r\n}\r\n\r\n\r\n\r\n\/\/ Fetch colors from remote API\r\n\/\/fetch('https:\/\/berl.link\/fandeck\/FEELDESIGN')\r\n\/\/fetch('\/jsons\/feeldesign.json', {\r\n  fetch('https:\/\/berl.link\/fandeck2\/feelings')\r\n  .then(response => response.json())\r\n  .then(data => {\r\n      createColorTiles(data.colors);\r\n      var filterInput = document.getElementById('filter-input');\r\n      filterInput.addEventListener('input', filterColors);\r\n      \r\n      \r\n      \r\n  })\r\n  .catch(error => console.error('Error:', error));\r\n\r\n<\/script>\n        <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c94eac6 elementor-widget elementor-widget-html\" data-id=\"c94eac6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t \n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\">\n  \n  \n  <div class=\"filter-container\">\n    <input type=\"text\" id=\"filter-input\" placeholder=\"Search by color code...\">\n  <\/div>\n  \n    <div id=\"classification-filter-container\">\n\n  <div id=\"color-container\"><\/div>\n\n  \n  \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 data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-55dd3f7 e-flex e-con-boxed e-con e-parent\" data-id=\"55dd3f7\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-be864af elementor-widget elementor-widget-global elementor-global-7219 elementor-global-2295 elementor-widget-button\" data-id=\"be864af\" data-element_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\" href=\"https:\/\/www.berling.gr\/en\/fandecks\/\">\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\">Return to fandecks<\/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-52f9c84 elementor-widget elementor-widget-global elementor-global-7008 elementor-global-1804 elementor-widget-text-editor\" data-id=\"52f9c84\" data-element_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><strong>Note:<\/strong><\/p>\n<p>The color samples photos may deviate from reality because of the limitations of each screen display or printing  For the full range of shades visit your nearest paint shop<\/p>\n<p>Tip 1: We recommend visiting the closest paint shop and asking for our colorcard or create a sample for you.<\/p>\n<p>Tip 2: Before painting interior or exterior surfaces we recommend asking for the specifications, surface preparation and any technical points in order to ensure great paint application results!<\/p>\n<p>Tip 3: Choose the color code you like and ask for the quantity you want.<\/p>\n\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","protected":false},"excerpt":{"rendered":"<p>Discover the key to decorative art through the creation of impressive spaces through the use of color. Nothing is easier than changing colors! With a simple paint job, you can give new character to your home with ease and economy. Berling&#8216;s &#8220;Colour Suggestions&#8221; fandeck offers 60 different shade combinations in packs to help you choose [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1981,"parent":7014,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-7378","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/7378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/comments?post=7378"}],"version-history":[{"count":3,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/7378\/revisions"}],"predecessor-version":[{"id":7400,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/7378\/revisions\/7400"}],"up":[{"embeddable":true,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/7014"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/media\/1981"}],"wp:attachment":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/media?parent=7378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}