{"id":7372,"date":"2023-05-11T17:32:32","date_gmt":"2023-05-11T14:32:32","guid":{"rendered":"https:\/\/wp.berlingpaints.com\/fandecks\/color-inspirations\/"},"modified":"2023-07-19T13:50:00","modified_gmt":"2023-07-19T10:50:00","slug":"color-inspirations","status":"publish","type":"page","link":"https:\/\/www.berling.gr\/en\/fandecks\/color-inspirations\/","title":{"rendered":"Color Inspirations"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7372\" class=\"elementor elementor-7372 elementor-2326\" 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-fcc3815 e-flex e-con-boxed e-con e-parent\" data-id=\"fcc3815\" 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-89f1c7e elementor-widget elementor-widget-image\" data-id=\"89f1c7e\" 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_empneuseis.jpg\" class=\"attachment-full size-full wp-image-1978\" alt=\"\" srcset=\"https:\/\/www.berling.gr\/wp-content\/uploads\/xrwmatikes_empneuseis.jpg 154w, https:\/\/www.berling.gr\/wp-content\/uploads\/xrwmatikes_empneuseis-100x100.jpg 100w, https:\/\/www.berling.gr\/wp-content\/uploads\/xrwmatikes_empneuseis-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-bc7b09b elementor-widget elementor-widget-heading\" data-id=\"bc7b09b\" 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 Inspirations<\/h1>\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-e28e3f2 e-flex e-con-boxed e-con e-parent\" data-id=\"e28e3f2\" 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-0395de5 elementor-widget elementor-widget-text-editor\" data-id=\"0395de5\" 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 limitless source of inspiration that surrounds you!<\/p>\n<p>With the amazing variety of <strong>185<\/strong> shades for interior surfaces, you can create the ideal space that reflects your personal style and aesthetic.<\/p>\n<p>From modern and sophisticated colors to more classic and neutral shades, our variety of options is plentiful. Express your personality and create unique interior environments with our selections.<\/p>\n<p>Discover the world of colors and achieve perfect harmony in your space. Regardless of your personal taste and preferences, our 185 shades will inspire you to create an impressive and unique space that will give you constant inspiration and pleasure.<\/p>\n<p>Indulge your creativity and upgrade your environment with the sophisticated shades offered.<\/p>\n<p>Choose the color that reflects your personality and refresh your space with uniqueness and style.<\/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-15f4717 elementor-widget elementor-widget-shortcode\" data-id=\"15f4717\" 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\/xrempn')\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-53c59c9 elementor-widget elementor-widget-html\" data-id=\"53c59c9\" 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  \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-f55e626 e-flex e-con-boxed e-con e-parent\" data-id=\"f55e626\" 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-74af649 elementor-widget elementor-widget-global elementor-global-7219 elementor-global-2295 elementor-widget-button\" data-id=\"74af649\" 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-e479b62 elementor-widget elementor-widget-global elementor-global-7008 elementor-global-1804 elementor-widget-text-editor\" data-id=\"e479b62\" 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 limitless source of inspiration that surrounds you! With the amazing variety of 185 shades for interior surfaces, you can create the ideal space that reflects your personal style and aesthetic. From modern and sophisticated colors to more classic and neutral shades, our variety of options is plentiful. Express your personality and create unique [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1978,"parent":7014,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-7372","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/7372","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=7372"}],"version-history":[{"count":3,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/7372\/revisions"}],"predecessor-version":[{"id":7402,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/7372\/revisions\/7402"}],"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\/1978"}],"wp:attachment":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/media?parent=7372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}