{"id":5662,"date":"2020-03-04T16:39:29","date_gmt":"2020-03-04T16:39:29","guid":{"rendered":"https:\/\/webdevtrick.com\/?p=5662"},"modified":"2020-03-04T16:39:29","modified_gmt":"2020-03-04T16:39:29","slug":"material-color-picker","status":"publish","type":"post","link":"https:\/\/webdevtrick.com\/material-color-picker\/","title":{"rendered":"Material Color Picker With Copy To Clipboard Feature | Color Palette"},"content":{"rendered":"<p><strong>How we can create a color picker with material design? Solution: See this Material Color Picker With Copy To Clipboard Feature, Color Palette with Material design.<\/strong><\/p>\n<p>Previously I have shared a <span><a href=\"https:\/\/webdevtrick.com\/linear-gradient-generator\/\" target=\"_blank\" rel=\"noopener noreferrer\">gradient generator<\/a><\/span> program, where you can<strong> pick a color<\/strong>. But this is a <strong>color picker<\/strong> with <strong>material design<\/strong>, where you can pick or <strong>choose a color<\/strong> from the palette. Basically, a color picker helps you to choose a color and you can select the versions of color like l<strong>ight and dark<\/strong>. And the material design is a grid-based layout where animation, light and dark shadows create the design. Mostly a<strong> material color picker<\/strong> contains a <strong>bunch of colors<\/strong> with their light and dark variants.<\/p>\n<p>Today you will learn to create <strong>Color Palette with material design<\/strong>. Basically, there are <strong>19 different colors<\/strong> and each has <strong>10 variants<\/strong>. All colors have <strong>10 different shades<\/strong> that go light to dark and darker. Each color box has the color code and % percentage values of the color which make color light and dark. After choosing a color you can simply<strong> copy the color code<\/strong> by clicking above the box, because there is a copy to the <span><a href=\"https:\/\/webdevtrick.com\/javascript-copy-to-clipboard\/\" target=\"_blank\" rel=\"noopener noreferrer\"> clipboard<\/a><\/span> feature.<\/p>\n<p>So, Today I am sharing <strong>Material Color Picker<\/strong> With <strong>Copy To Clipboard Feature<\/strong>. There I have used some JS libraries to creating the program like knockout JS and clipboard JS. There knockout JS for <strong>change colors<\/strong> without loading or reloading, and clipboard js for copy in a single click. This is a<strong> responsive design<\/strong>, it will fit on every screen size. You can use this program on your website, it can be placed on the backend in the customize section or in frontend for users.<\/p>\n<p>If you are thinking now how this material color palette actually is, then see the preview given below.<\/p>\n<h3>Preview Of Color Palette With Light and Dark Variants<\/h3>\n<p>See this video preview to getting an idea of how this color pick program looks like.<\/p>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-5662-1\" width=\"640\" height=\"411\" loop autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/material-color-palette.mp4?_=1\" \/><a href=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/material-color-palette.mp4\">https:\/\/webdevtrick.com\/wp-content\/uploads\/material-color-palette.mp4<\/a><\/video><\/div>\n<a class=\"maxbutton-2 maxbutton maxbutton-demo\" target=\"_blank\" rel=\"noopener\" href=\"https:\/\/webdevtrick.com\/demos\/material-color-picker\/\"><span class='mb-text'>Live Demo<\/span><\/a>\n<p>Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the <strong>source code<\/strong> of its.<\/p>\n<p><span style=\"font-size: 14pt;\">You May Also Like:<\/span><\/p>\n<ul>\n \t<span><\/p>\n<li><a href=\"https:\/\/webdevtrick.com\/jquery-form-validation\/\" target=\"_blank\" rel=\"noopener noreferrer\">jQuery Form Validation<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/folding-select-dropdown\/\" target=\"_blank\" rel=\"noopener noreferrer\">Folding Select Dropdown<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/bootstrap-expand-cards\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bootstrap Expand Cards<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/css-contact-vcard\/\" target=\"_blank\" rel=\"noopener noreferrer\">Contact vCard Design<\/a><\/li>\n<p><\/span>\n<\/ul>\n<h2>Material Color Picker With Copy To Clipboard Feature Source Code<\/h2>\n<p>Before <strong>sharing source code<\/strong>, let&#8217;s talk about it. First I have created the main div named container and placed all items inside it. There are two div sections, and each section contains many divs. There I have created <span><a href=\"https:\/\/webdevtrick.com\/tag\/input\" target=\"_blank\" rel=\"noopener noreferrer\">input<\/a><\/span> and div and place values using the <strong>data-bind attribute<\/strong>, which is powered by knockout JS. Inside all tags, I have placed values and commands using the <strong>Data-*<\/strong> attribute. Also in the <strong>HTML file<\/strong>, I have linked other files like CSS, JS, and JS libraries CDN.<\/p>\n<p>Now <strong>using CSS<\/strong> I have placed all the elements in the right place, as you can see in the preview. With CSS first I gave basic values like size, position, margin, padding, etc to all the elements. There I have used <strong> <span><a href=\"https:\/\/webdevtrick.com\/tag\/flex\" target=\"_blank\" rel=\"noopener noreferrer\">flex<\/a><\/span> display<\/strong> command to create the layout responsive. I used<strong> transition command<\/strong> for smooth animation effects, and <strong>transform command<\/strong> for transformation.<\/p>\n<p>JavaScript file handling here the <strong>copy to clipboard<\/strong> and color palette feature in the program.\u00a0 There all codes are pre-functioned by the library which I have used. There put commands for copy according to clipboard JS library. And placed color values and names like <span><a href=\"https:\/\/webdevtrick.com\/json-formatter-beautifier\/\" target=\"_blank\" rel=\"noopener noreferrer\">JSON<\/a><\/span> structured data types. Left all other things you will understand after <strong>getting the codes<\/strong>.<\/p>\n<p>For creating this program you have to create 3 files. First file for <strong>HTML<\/strong>, second for <strong>CSS<\/strong>, and the third file for <strong>JavaScript<\/strong>. Follow the steps to creating this program without any error.<\/p>\n<p><span style=\"font-size: 14pt;\">index.html<\/span><\/p>\n<p>Create an HTML file named &#8216;<em><strong>index.html<\/strong><\/em>&#8216; and put these codes given below.<\/p>\n<pre class=\"height-set:true height:750 lang:xhtml decode:true \" title=\"index.html\">&lt;!DOCTYPE html&gt;\r\n&lt;!--Code By Webdevtrick ( https:\/\/webdevtrick.com )--&gt;\r\n&lt;html lang=\"en\" &gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"UTF-8\"&gt;\r\n  &lt;title&gt;Material Color Picker | Webdevtrick.com&lt;\/title&gt;\r\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/5.0.0\/normalize.min.css\"&gt;\r\n&lt;link rel=\"stylesheet\" href=\".\/style.css\"&gt;\r\n\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"container\"&gt;\r\n    &lt;div class=\"material-color-picker\"&gt;\r\n        &lt;div class=\"material-color-picker__left-panel\"&gt;\r\n            &lt;ol class=\"color-selector\" data-bind=\"foreach: materialColors\"&gt;\r\n                &lt;li&gt;\r\n                    &lt;input name=\"material-color\" type=\"radio\" data-bind=\"attr: { id: 'materialColor' + $index() }, checked: selectedColor, value: color\" &gt;\r\n                    &lt;label data-bind=\"attr: { for: 'materialColor' + $index(), title: color }, style: { 'color': $data.variations[4].hex }\"&gt;&lt;\/label&gt;\r\n                &lt;\/li&gt;\r\n            &lt;\/ol&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"material-color-picker__right-panel\" data-bind=\"foreach: materialColors\"&gt;\r\n            &lt;div class=\"color-palette-wrapper\" data-bind=\"css: { 'js-active': selectedColor() === color }\"&gt;\r\n                &lt;h2 class=\"color-palette-header\" data-bind=\"text: color\"&gt;&lt;\/h2&gt;\r\n                &lt;ol class=\"color-palette\" data-bind=\"foreach: variations\"&gt;\r\n                    &lt;li id=\"clipboardItem\" class=\"color-palette__item\" data-bind=\"attr: { 'data-clipboard-text': hex }, style: { 'background-color': hex }\"&gt;\r\n                        &lt;span data-bind=\"text: weight\"&gt;&lt;\/span&gt;\r\n                        &lt;span data-bind=\"text: hex\"&gt;&lt;\/span&gt;\r\n                        &lt;span class=\"copied-indicator\" data-bind=\"css: { 'js-copied': copiedHex() === hex }\"&gt;Color copied!&lt;\/span&gt;\r\n                    &lt;\/li&gt;\r\n                &lt;\/ol&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/knockout\/3.4.0\/knockout-min.js'&gt;&lt;\/script&gt;\r\n&lt;script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/clipboard.js\/1.5.10\/clipboard.min.js'&gt;&lt;\/script&gt;\r\n&lt;script  src=\"function.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><span style=\"font-size: 14pt;\">style.css<\/span><\/p>\n<p>Now create a CSS file named &#8216;<em><strong>style.css<\/strong><\/em>&#8216; and put these codes given here.<\/p>\n<pre class=\"height-set:true height:750 lang:css decode:true \" title=\"style.css\">\/* Code By Webdevtrick ( https:\/\/webdevtrick.com ) *\/\r\n@import url(https:\/\/fonts.googleapis.com\/css?family=Roboto:400,500|Roboto+Mono:500);\r\nhtml {\r\n  box-sizing: border-box;\r\n  height: 100%;\r\n}\r\n\r\n*,\r\n*:before,\r\n*:after {\r\n  box-sizing: inherit;\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  *,\r\n  *:before,\r\n  *:after {\r\n    -webkit-animation-duration: 0ms !important;\r\n            animation-duration: 0ms !important;\r\n    -webkit-transition-duration: 0ms !important;\r\n            transition-duration: 0ms !important;\r\n  }\r\n}\r\n\r\nbody {\r\n  height: 100%;\r\n}\r\n\r\nimg {\r\n  max-width: 100%;\r\n  height: auto;\r\n}\r\n\r\nhtml {\r\n  background-color: #b0bec5;\r\n  font-family: \"Roboto\", sans-serif;\r\n  font-weight: 500;\r\n}\r\n\r\n.container {\r\n  padding: 1em;\r\n}\r\n\r\n.material-color-picker {\r\n  display: -webkit-box;\r\n  display: flex;\r\n  width: 32em;\r\n  max-width: 100%;\r\n  margin: 0 auto;\r\n  background-color: white;\r\n  border: 1px solid #78909c;\r\n  border-radius: 0.5em;\r\n  box-shadow: 0 1em 8em rgba(0, 0, 0, 0.35);\r\n}\r\n.material-color-picker__left-panel {\r\n  z-index: 1;\r\n}\r\n.material-color-picker__right-panel {\r\n  position: relative;\r\n  -webkit-box-flex: 1;\r\n          flex-grow: 1;\r\n  overflow: hidden;\r\n}\r\n\r\n.color-selector {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n  display: -webkit-box;\r\n  display: flex;\r\n  -webkit-box-orient: vertical;\r\n  -webkit-box-direction: normal;\r\n          flex-direction: column;\r\n  padding: 1em 0;\r\n  border-right: 0.25em solid #E0E0E0;\r\n}\r\n.color-selector input[type='radio'] {\r\n  display: none;\r\n}\r\n.color-selector label {\r\n  position: relative;\r\n  display: inline-block;\r\n  padding: 0.5em 1.5em;\r\n  cursor: pointer;\r\n}\r\n.color-selector label:before {\r\n  content: '';\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n  padding: 0.75em;\r\n  background-color: currentColor;\r\n  border-radius: 50%;\r\n}\r\n.color-selector label:after {\r\n  content: '';\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  -webkit-transform: translate(-50%, -50%);\r\n          transform: translate(-50%, -50%);\r\n  padding: 0.5em;\r\n  border: 0.25em solid;\r\n  border-radius: 50%;\r\n  -webkit-transition: padding 250ms;\r\n  transition: padding 250ms;\r\n}\r\n.color-selector input[type='radio']:checked + label:after {\r\n  padding: 1em;\r\n}\r\n\r\n.color-palette-wrapper {\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  -webkit-transform: translateX(-100%);\r\n          transform: translateX(-100%);\r\n  display: -webkit-box;\r\n  display: flex;\r\n  -webkit-box-orient: vertical;\r\n  -webkit-box-direction: normal;\r\n          flex-direction: column;\r\n  padding: 1.5em;\r\n}\r\n.color-palette-wrapper.js-active {\r\n  -webkit-transform: translateX(0);\r\n          transform: translateX(0);\r\n}\r\n\r\n.color-palette-header {\r\n  display: -webkit-box;\r\n  display: flex;\r\n  -webkit-box-pack: justify;\r\n          justify-content: space-between;\r\n  margin: 0;\r\n  margin-bottom: 1em;\r\n  font-weight: 400;\r\n  color: #757575;\r\n}\r\n\r\n.color-palette {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n  display: -webkit-box;\r\n  display: flex;\r\n  -webkit-box-orient: vertical;\r\n  -webkit-box-direction: normal;\r\n          flex-direction: column;\r\n  -webkit-box-flex: 1;\r\n          flex-grow: 1;\r\n}\r\n.color-palette__item {\r\n  position: relative;\r\n  display: -webkit-box;\r\n  display: flex;\r\n  -webkit-box-align: center;\r\n          align-items: center;\r\n  -webkit-box-pack: justify;\r\n          justify-content: space-between;\r\n  -webkit-box-flex: 1;\r\n          flex-grow: 1;\r\n  margin: 0.25em 0;\r\n  padding: 0 1em;\r\n  border-radius: 0.25em;\r\n  font-family: \"Roboto Mono\", monospace;\r\n  -webkit-transition: -webkit-transform 250ms;\r\n  transition: -webkit-transform 250ms;\r\n  transition: transform 250ms;\r\n  transition: transform 250ms, -webkit-transform 250ms;\r\n  cursor: pointer;\r\n}\r\n.color-palette__item:hover {\r\n  -webkit-transform: scale(1.05);\r\n          transform: scale(1.05);\r\n}\r\n\r\n.copied-indicator {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  -webkit-transform: translate(-50%, 0);\r\n          transform: translate(-50%, 0);\r\n  opacity: 0;\r\n  -webkit-transition: all 250ms;\r\n  transition: all 250ms;\r\n}\r\n.copied-indicator.js-copied {\r\n  -webkit-transform: translate(-50%, -50%);\r\n          transform: translate(-50%, -50%);\r\n  opacity: 0.75;\r\n}<\/pre>\n<p><span style=\"font-size: 14pt;\">function.js<\/span><\/p>\n<p>The final step, create a JavaScript file named &#8216;<em><strong>function.js<\/strong><\/em>&#8216; and put the codes.<\/p>\n<pre class=\"height-set:true height:750 lang:js decode:true \" title=\"function.js\">\/\/ Code By Webdevtrick ( https:\/\/webdevtrick.com )\r\nvar copiedHex = ko.observable();\r\nvar clipboard = new Clipboard('#clipboardItem');\r\n\r\nclipboard.on('success', function(el) {\r\n    console.clear();\r\n    console.info('Action:', el.action);\r\n    console.info('Text:', el.text);\r\n    console.info('Trigger:', el.trigger);\r\n    el.clearSelection();\r\n    \r\n    copiedHex(el.text);\r\n});\r\n\r\n\/\/\/\r\n\r\nvar selectedColor = ko.observable(\"Red\"); \/\/ lazy\r\n\r\nko.applyBindings({\r\n    materialColors: [\r\n        {\r\n            color: \"Red\",\r\n            variations: [\r\n                {\r\n                    weight: 50,\r\n                    hex: \"#FFEBEE\"\r\n                },\r\n                {\r\n                    weight: 100,\r\n                    hex: \"#FFCDD2\"\r\n                },\r\n                {\r\n                    weight: 200,\r\n                    hex: \"#EF9A9A\"\r\n                },\r\n                {\r\n                    weight: 300,\r\n                    hex: \"#E57373\"\r\n                },\r\n                {\r\n                    weight: 400,\r\n                    hex: \"#EF5350\"\r\n                },\r\n                {\r\n                    weight: 500,\r\n                    hex: \"#F44336\"\r\n                },\r\n                {\r\n                    weight: 600,\r\n                    hex: \"#E53935\"\r\n                },\r\n                {\r\n                    weight: 700,\r\n                    hex: \"#D32F2F\"\r\n                },\r\n                {\r\n                    weight: 800,\r\n                    hex: \"#C62828\"\r\n                },\r\n                {\r\n                    weight: 900,\r\n                    hex: \"#B71C1C\"\r\n                }\r\n            ]\r\n        },\r\n        {\r\n            color: \"Pink\",\r\n            variations: [\r\n                {\r\n                    weight: 50,\r\n                    hex: \"#FCE4EC\"\r\n                },\r\n                {\r\n                    weight: 100,\r\n                    hex: \"#F8BBD0\"\r\n                },\r\n                {\r\n                    weight: 200,\r\n                    hex: \"#F48FB1\"\r\n                },\r\n                {\r\n                    weight: 300,\r\n                    hex: \"#F06292\"\r\n                },\r\n                {\r\n                    weight: 400,\r\n                    hex: \"#EC407A\"\r\n                },\r\n                {\r\n                    weight: 500,\r\n                    hex: \"#E91E63\"\r\n                },\r\n                {\r\n                    weight: 600,\r\n                    hex: \"#D81B60\"\r\n                },\r\n                {\r\n                    weight: 700,\r\n                    hex: \"#C2185B\"\r\n                },\r\n                {\r\n                    weight: 800,\r\n                    hex: \"#AD1457\"\r\n                },\r\n                {\r\n                    weight: 900,\r\n                    hex: \"#880E4F\"\r\n                }\r\n            ]\r\n        },\r\n        {\r\n            color: \"Purple\",\r\n            variations: [\r\n                {\r\n                    weight: 50,\r\n                    hex: \"#F3E5F5\"\r\n                },\r\n                {\r\n                    weight: 100,\r\n                    hex: \"#E1BEE7\"\r\n                },\r\n                {\r\n                    weight: 200,\r\n                    hex: \"#CE93D8\"\r\n                },\r\n                {\r\n                    weight: 300,\r\n                    hex: \"#BA68C8\"\r\n                },\r\n                {\r\n                    weight: 400,\r\n                    hex: \"#AB47BC\"\r\n                },\r\n                {\r\n                    weight: 500,\r\n                    hex: \"#9C27B0\"\r\n                },\r\n                {\r\n                    weight: 600,\r\n                    hex: \"#8E24AA\"\r\n                },\r\n                {\r\n                    weight: 700,\r\n                    hex: \"#7B1FA2\"\r\n                },\r\n                {\r\n                    weight: 800,\r\n                    hex: \"#6A1B9A\"\r\n                },\r\n                {\r\n                    weight: 900,\r\n                    hex: \"#4A148C\"\r\n                }\r\n            ]\r\n        },\r\n        {\r\n            color: \"Deep Purple\",\r\n            variations: [\r\n                {\r\n                    weight: 50,\r\n                    hex: \"#EDE7F6\"\r\n                },\r\n                {\r\n                    weight: 100,\r\n                    hex: \"#D1C4E9\"\r\n                },\r\n                {\r\n                    weight: 200,\r\n                    hex: \"#B39DDB\"\r\n                },\r\n                {\r\n                    weight: 300,\r\n                    hex: \"#9575CD\"\r\n                },\r\n                {\r\n                    weight: 400,\r\n                    hex: \"#7E57C2\"\r\n                },\r\n                {\r\n                    weight: 500,\r\n                    hex: \"#673AB7\"\r\n                },\r\n                {\r\n                    weight: 600,\r\n                    hex: \"#5E35B1\"\r\n                },\r\n                {\r\n                    weight: 700,\r\n                    hex: \"#512DA8\"\r\n                },\r\n                {\r\n                    weight: 800,\r\n                    hex: \"#4527A0\"\r\n                },\r\n                {\r\n                    weight: 900,\r\n                    hex: \"#311B92\"\r\n                }\r\n            ]\r\n        },\r\n        {\r\n            color: \"Indigo\",\r\n            variations: [\r\n                {\r\n                    weight: 50,\r\n                    hex: \"#E8EAF6\"\r\n                },\r\n                {\r\n                    weight: 100,\r\n                    hex: \"#C5CAE9\"\r\n                },\r\n                {\r\n                    weight: 200,\r\n                    hex: \"#9FA8DA\"\r\n                },\r\n                {\r\n                    weight: 300,\r\n                    hex: \"#7986CB\"\r\n                },\r\n                {\r\n                    weight: 400,\r\n                    hex: \"#5C6BC0\"\r\n                },\r\n                {\r\n                    weight: 500,\r\n                    hex: \"#3F51B5\"\r\n                },\r\n                {\r\n                    weight: 600,\r\n                    hex: \"#3949AB\"\r\n                },\r\n                {\r\n                    weight: 700,\r\n                    hex: \"#303F9F\"\r\n                },\r\n                {\r\n                    weight: 800,\r\n                    hex: \"#283593\"\r\n                },\r\n                {\r\n                    weight: 900,\r\n                    hex: \"#1A237E\"\r\n                }\r\n            ]\r\n        },\r\n        {\r\n            color: \"Blue\",\r\n            variations: [\r\n                {\r\n                    weight: 50,\r\n                    hex: \"#E3F2FD\"\r\n                },\r\n                {\r\n                    weight: 100,\r\n                    hex: \"#BBDEFB\"\r\n                },\r\n                {\r\n                    weight: 200,\r\n                    hex: \"#90CAF9\"\r\n                },\r\n                {\r\n                    weight: 300,\r\n                    hex: \"#64B5F6\"\r\n                },\r\n                {\r\n                    weight: 400,\r\n                    hex: \"#42A5F5\"\r\n                },\r\n                {\r\n                    weight: 500,\r\n                    hex: \"#2196F3\"\r\n                },\r\n                {\r\n                    weight: 600,\r\n                    hex: \"#1E88E5\"\r\n                },\r\n                {\r\n                    weight: 700,\r\n                    hex: \"#1976D2\"\r\n                },\r\n                {\r\n                    weight: 800,\r\n                    hex: \"#1565C0\"\r\n                },\r\n                {\r\n                    weight: 900,\r\n                    hex: \"#0D47A1\"\r\n                }\r\n            ]\r\n        },\r\n        {\r\n            color: \"Light Blue\",\r\n            variations: [\r\n                {\r\n                    weight: 50,\r\n                    hex: \"#E1F5FE\"\r\n                },\r\n                {\r\n                    weight: 100,\r\n                    hex: \"#B3E5FC\"\r\n                },\r\n                {\r\n                    weight: 200,\r\n                    hex: \"#81D4FA\"\r\n                },\r\n                {\r\n                    weight: 300,\r\n                    hex: \"#4FC3F7\"\r\n                },\r\n                {\r\n                    weight: 400,\r\n                    hex: \"#29B6F6\"\r\n                },\r\n                {\r\n                    weight: 500,\r\n                    hex: \"#03A9F4\"\r\n                },\r\n                {\r\n                    weight: 600,\r\n                    hex: \"#039BE5\"\r\n                },\r\n                {\r\n                    weight: 700,\r\n                    hex: \"#0288D1\"\r\n                },\r\n                {\r\n                    weight: 800,\r\n                    hex: \"#0277BD\"\r\n                },\r\n                {\r\n                    weight: 900,\r\n                    hex: \"#01579B\"\r\n                }\r\n            ]\r\n        },\r\n        {\r\n            color: \"Cyan\",\r\n            variations: [\r\n                {\r\n                    weight: 50,\r\n                    hex: \"#E0F7FA\"\r\n                },\r\n                {\r\n                    weight: 100,\r\n                    hex: \"#B2EBF2\"\r\n                },\r\n                {\r\n                    weight: 200,\r\n                    hex: \"#80DEEA\"\r\n                },\r\n                {\r\n                    weight: 300,\r\n                    hex: \"#4DD0E1\"\r\n                },\r\n                {\r\n                    weight: 400,\r\n                    hex: \"#26C6DA\"\r\n                },\r\n                {\r\n                    weight: 500,\r\n                    hex: \"#00BCD4\"\r\n                },\r\n                {\r\n                    weight: 600,\r\n                    hex: \"#00ACC1\"\r\n                },\r\n                {\r\n                    weight: 700,\r\n                    hex: \"#0097A7\"\r\n                },\r\n                {\r\n                    weight: 800,\r\n                    hex: \"#00838F\"\r\n                },\r\n                {\r\n                    weight: 900,\r\n                    hex: \"#006064\"\r\n                }\r\n            ]\r\n        },\r\n        {\r\n            color: \"Teal\",\r\n            variations: [\r\n                {\r\n                    weight: 50,\r\n                    hex: \"#E0F2F1\"\r\n                },\r\n                {\r\n                    weight: 100,\r\n                    hex: \"#B2DFDB\"\r\n                },\r\n                {\r\n                    weight: 200,\r\n                    hex: \"#80CBC4\"\r\n                },\r\n                {\r\n                    weight: 300,\r\n                    hex: \"#4DB6AC\"\r\n                },\r\n                {\r\n                    weight: 400,\r\n                    hex: \"#26A69A\"\r\n                },\r\n                {\r\n                    weight: 500,\r\n                    hex: \"#009688\"\r\n                },\r\n                {\r\n                    weight: 600,\r\n                    hex: \"#00897B\"\r\n                },\r\n                {\r\n                    weight: 700,\r\n                    hex: \"#00796B\"\r\n                },\r\n                {\r\n                    weight: 800,\r\n                    hex: \"#00695C\"\r\n                },\r\n                {\r\n                    weight: 900,\r\n                    hex: \"#004D40\"\r\n                }\r\n            ]\r\n        },\r\n        {\r\n            color: \"Green\",\r\n            variations: [\r\n                {\r\n                    weight: 50,\r\n                    hex: \"#E8F5E9\"\r\n                },\r\n                {\r\n                    weight: 100,\r\n                    hex: \"#C8E6C9\"\r\n                },\r\n                {\r\n                    weight: 200,\r\n                    hex: \"#A5D6A7\"\r\n                },\r\n                {\r\n                    weight: 300,\r\n                    hex: \"#81C784\"\r\n                },\r\n                {\r\n                    weight: 400,\r\n                    hex: \"#66BB6A\"\r\n                },\r\n                {\r\n                    weight: 500,\r\n                    hex: \"#4CAF50\"\r\n                },\r\n                {\r\n                    weight: 600,\r\n                    hex: \"#43A047\"\r\n                },\r\n                {\r\n                    weight: 700,\r\n                    hex: \"#388E3C\"\r\n                },\r\n                {\r\n                    weight: 800,\r\n                    hex: \"#2E7D32\"\r\n                },\r\n                {\r\n                    weight: 900,\r\n                    hex: \"#1B5E20\"\r\n                }\r\n            ]\r\n        },\r\n        {\r\n            color: \"Light Green\",\r\n            variations: [\r\n                {\r\n                    weight: 50,\r\n                    hex: \"#F1F8E9\"\r\n                },\r\n                {\r\n                    weight: 100,\r\n                    hex: \"#DCEDC8\"\r\n                },\r\n                {\r\n                    weight: 200,\r\n                    hex: \"#C5E1A5\"\r\n                },\r\n                {\r\n                    weight: 300,\r\n                    hex: \"#AED581\"\r\n                },\r\n                {\r\n                    weight: 400,\r\n                    hex: \"#9CCC65\"\r\n                },\r\n                {\r\n                    weight: 500,\r\n                    hex: \"#8BC34A\"\r\n                },\r\n                {\r\n                    weight: 600,\r\n                    hex: \"#7CB342\"\r\n                },\r\n                {\r\n                    weight: 700,\r\n                    hex: \"#689F38\"\r\n                },\r\n                {\r\n                    weight: 800,\r\n                    hex: \"#558B2F\"\r\n                },\r\n                {\r\n                    weight: 900,\r\n                    hex: \"#33691E\"\r\n                }\r\n            ]\r\n        },\r\n        {\r\n            color: \"Lime\",\r\n            variations: [\r\n                {\r\n                    weight: 50,\r\n                    hex: \"#F9FBE7\"\r\n                },\r\n                {\r\n                    weight: 100,\r\n                    hex: \"#F0F4C3\"\r\n                },\r\n                {\r\n                    weight: 200,\r\n                    hex: \"#E6EE9C\"\r\n                },\r\n                {\r\n                    weight: 300,\r\n                    hex: \"#DCE775\"\r\n                },\r\n                {\r\n                    weight: 400,\r\n                    hex: \"#D4E157\"\r\n                },\r\n                {\r\n                    weight: 500,\r\n                    hex: \"#CDDC39\"\r\n                },\r\n                {\r\n                    weight: 600,\r\n                    hex: \"#C0CA33\"\r\n                },\r\n                {\r\n                    weight: 700,\r\n                    hex: \"#AFB42B\"\r\n                },\r\n                {\r\n                    weight: 800,\r\n                    hex: \"#9E9D24\"\r\n                },\r\n                {\r\n                    weight: 900,\r\n                    hex: \"#827717\"\r\n                }\r\n            ]\r\n        },\r\n        {\r\n            color: \"Yellow\",\r\n            variations: [\r\n                {\r\n                    weight: 50,\r\n                    hex: \"#FFFDE7\"\r\n                },\r\n                {\r\n                    weight: 100,\r\n                    hex: \"#FFF9C4\"\r\n                },\r\n                {\r\n                    weight: 200,\r\n                    hex: \"#FFF59D\"\r\n                },\r\n                {\r\n                    weight: 300,\r\n                    hex: \"#FFF176\"\r\n                },\r\n                {\r\n                    weight: 400,\r\n                    hex: \"#FFEE58\"\r\n                },\r\n                {\r\n                    weight: 500,\r\n                    hex: \"#FFEB3B\"\r\n                },\r\n                {\r\n                    weight: 600,\r\n                    hex: \"#FDD835\"\r\n                },\r\n                {\r\n                    weight: 700,\r\n                    hex: \"#FBC02D\"\r\n                },\r\n                {\r\n                    weight: 800,\r\n                    hex: \"#F9A825\"\r\n                },\r\n                {\r\n                    weight: 900,\r\n                    hex: \"#F57F17\"\r\n                }\r\n            ]\r\n        },\r\n        {\r\n            color: \"Amber\",\r\n            variations: [\r\n                {\r\n                    weight: 50,\r\n                    hex: \"#FFF8E1\"\r\n                },\r\n                {\r\n                    weight: 100,\r\n                    hex: \"#FFECB3\"\r\n                },\r\n                {\r\n                    weight: 200,\r\n                    hex: \"#FFE082\"\r\n                },\r\n                {\r\n                    weight: 300,\r\n                    hex: \"#FFD54F\"\r\n                },\r\n                {\r\n                    weight: 400,\r\n                    hex: \"#FFCA28\"\r\n                },\r\n                {\r\n                    weight: 500,\r\n                    hex: \"#FFC107\"\r\n                },\r\n                {\r\n                    weight: 600,\r\n                    hex: \"#FFB300\"\r\n                },\r\n                {\r\n                    weight: 700,\r\n                    hex: \"#FFA000\"\r\n                },\r\n                {\r\n                    weight: 800,\r\n                    hex: \"#FF8F00\"\r\n                },\r\n                {\r\n                    weight: 900,\r\n                    hex: \"#FF6F00\"\r\n                }\r\n            ]\r\n        },\r\n        {\r\n            color: \"Orange\",\r\n            variations: [\r\n                {\r\n                    weight: 50,\r\n                    hex: \"#FFF3E0\"\r\n                },\r\n                {\r\n                    weight: 100,\r\n                    hex: \"#FFE0B2\"\r\n                },\r\n                {\r\n                    weight: 200,\r\n                    hex: \"#FFCC80\"\r\n                },\r\n                {\r\n                    weight: 300,\r\n                    hex: \"#FFB74D\"\r\n                },\r\n                {\r\n                    weight: 400,\r\n                    hex: \"#FFA726\"\r\n                },\r\n                {\r\n                    weight: 500,\r\n                    hex: \"#FF9800\"\r\n                },\r\n                {\r\n                    weight: 600,\r\n                    hex: \"#FB8C00\"\r\n                },\r\n                {\r\n                    weight: 700,\r\n                    hex: \"#F57C00\"\r\n                },\r\n                {\r\n                    weight: 800,\r\n                    hex: \"#EF6C00\"\r\n                },\r\n                {\r\n                    weight: 900,\r\n                    hex: \"#E65100\"\r\n                }\r\n            ]\r\n        },\r\n        {\r\n            color: \"Deep Orange\",\r\n            variations: [\r\n                {\r\n                    weight: 50,\r\n                    hex: \"#FBE9E7\"\r\n                },\r\n                {\r\n                    weight: 100,\r\n                    hex: \"#FFCCBC\"\r\n                },\r\n                {\r\n                    weight: 200,\r\n                    hex: \"#FFAB91\"\r\n                },\r\n                {\r\n                    weight: 300,\r\n                    hex: \"#FF8A65\"\r\n                },\r\n                {\r\n                    weight: 400,\r\n                    hex: \"#FF7043\"\r\n                },\r\n                {\r\n                    weight: 500,\r\n                    hex: \"#FF5722\"\r\n                },\r\n                {\r\n                    weight: 600,\r\n                    hex: \"#F4511E\"\r\n                },\r\n                {\r\n                    weight: 700,\r\n                    hex: \"#E64A19\"\r\n                },\r\n                {\r\n                    weight: 800,\r\n                    hex: \"#D84315\"\r\n                },\r\n                {\r\n                    weight: 900,\r\n                    hex: \"#BF360C\"\r\n                }\r\n            ]\r\n        },\r\n        {\r\n            color: \"Brown\",\r\n            variations: [\r\n                {\r\n                    weight: 50,\r\n                    hex: \"#EFEBE9\"\r\n                },\r\n                {\r\n                    weight: 100,\r\n                    hex: \"#D7CCC8\"\r\n                },\r\n                {\r\n                    weight: 200,\r\n                    hex: \"#BCAAA4\"\r\n                },\r\n                {\r\n                    weight: 300,\r\n                    hex: \"#A1887F\"\r\n                },\r\n                {\r\n                    weight: 400,\r\n                    hex: \"#8D6E63\"\r\n                },\r\n                {\r\n                    weight: 500,\r\n                    hex: \"#795548\"\r\n                },\r\n                {\r\n                    weight: 600,\r\n                    hex: \"#6D4C41\"\r\n                },\r\n                {\r\n                    weight: 700,\r\n                    hex: \"#5D4037\"\r\n                },\r\n                {\r\n                    weight: 800,\r\n                    hex: \"#4E342E\"\r\n                },\r\n                {\r\n                    weight: 900,\r\n                    hex: \"#3E2723\"\r\n                }\r\n            ]\r\n        },\r\n        {\r\n            color: \"Grey\",\r\n            variations: [\r\n                {\r\n                    weight: 50,\r\n                    hex: \"#FAFAFA\"\r\n                },\r\n                {\r\n                    weight: 100,\r\n                    hex: \"#F5F5F5\"\r\n                },\r\n                {\r\n                    weight: 200,\r\n                    hex: \"#EEEEEE\"\r\n                },\r\n                {\r\n                    weight: 300,\r\n                    hex: \"#E0E0E0\"\r\n                },\r\n                {\r\n                    weight: 400,\r\n                    hex: \"#BDBDBD\"\r\n                },\r\n                {\r\n                    weight: 500,\r\n                    hex: \"#9E9E9E\"\r\n                },\r\n                {\r\n                    weight: 600,\r\n                    hex: \"#757575\"\r\n                },\r\n                {\r\n                    weight: 700,\r\n                    hex: \"#616161\"\r\n                },\r\n                {\r\n                    weight: 800,\r\n                    hex: \"#424242\"\r\n                },\r\n                {\r\n                    weight: 900,\r\n                    hex: \"#212121\"\r\n                }\r\n            ]\r\n        },\r\n        {\r\n            color: \"Blue Grey\",\r\n            variations: [\r\n                {\r\n                    weight: 50,\r\n                    hex: \"#ECEFF1\"\r\n                },\r\n                {\r\n                    weight: 100,\r\n                    hex: \"#CFD8DC\"\r\n                },\r\n                {\r\n                    weight: 200,\r\n                    hex: \"#B0BEC5\"\r\n                },\r\n                {\r\n                    weight: 300,\r\n                    hex: \"#90A4AE\"\r\n                },\r\n                {\r\n                    weight: 400,\r\n                    hex: \"#78909C\"\r\n                },\r\n                {\r\n                    weight: 500,\r\n                    hex: \"#607D8B\"\r\n                },\r\n                {\r\n                    weight: 600,\r\n                    hex: \"#546E7A\"\r\n                },\r\n                {\r\n                    weight: 700,\r\n                    hex: \"#455A64\"\r\n                },\r\n                {\r\n                    weight: 800,\r\n                    hex: \"#37474F\"\r\n                },\r\n                {\r\n                    weight: 900,\r\n                    hex: \"#263238\"\r\n                }\r\n            ]\r\n        }\r\n    ]\r\n});<\/pre>\n<p>That&#8217;s It. Now you will successfully create <strong>Material Color Picker<\/strong> With <strong>Copy To Clipboard<\/strong> Feature, a <strong>Color Palette program<\/strong> with material design. If you have any doubt or questions comment down below.<\/p>\n<p><span style=\"font-family: impact, sans-serif;\">Thanks For Visiting, Keep Visiting.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How we can create a color picker with material design? Solution: See this Material Color Picker With Copy To Clipboard Feature, Color Palette with Material design. Previously I have shared a gradient generator program, where you can pick a color. But this is a color picker with material design, where you can pick or choose [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5663,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[43,42,46],"tags":[538,331,61,336,168,67],"class_list":["post-5662","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","category-javascript","tag-color-picker","tag-copy-to-clipboard","tag-javascript-tips-and-tricks","tag-material-design","tag-random-color","tag-source-code"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Material Color Picker With Copy To Clipboard Feature | Color Palette<\/title>\n<meta name=\"description\" content=\"Want to create a color pick panel with material desing? Checkout this Material Color Picker With Copy To Clipboard Feature, Color Palette. Get source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdevtrick.com\/material-color-picker\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Material Color Picker With Copy To Clipboard Feature | Color Palette\" \/>\n<meta property=\"og:description\" content=\"Want to create a color pick panel with material desing? Checkout this Material Color Picker With Copy To Clipboard Feature, Color Palette. Get source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdevtrick.com\/material-color-picker\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Dev Trick\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webdevtrick\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-04T16:39:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/material-color-picker.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"shaan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"shaan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdevtrick.com\/material-color-picker\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/material-color-picker\/\"},\"author\":{\"name\":\"shaan\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\"},\"headline\":\"Material Color Picker With Copy To Clipboard Feature | Color Palette\",\"datePublished\":\"2020-03-04T16:39:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/material-color-picker\/\"},\"wordCount\":735,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/material-color-picker\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/material-color-picker.jpg\",\"keywords\":[\"color picker\",\"copy to clipboard\",\"javascript tips and tricks\",\"material design\",\"random color\",\"source code\"],\"articleSection\":[\"CSS\",\"HTML\",\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdevtrick.com\/material-color-picker\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdevtrick.com\/material-color-picker\/\",\"url\":\"https:\/\/webdevtrick.com\/material-color-picker\/\",\"name\":\"Material Color Picker With Copy To Clipboard Feature | Color Palette\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/material-color-picker\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/material-color-picker\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/material-color-picker.jpg\",\"datePublished\":\"2020-03-04T16:39:29+00:00\",\"description\":\"Want to create a color pick panel with material desing? Checkout this Material Color Picker With Copy To Clipboard Feature, Color Palette. Get source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/webdevtrick.com\/material-color-picker\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdevtrick.com\/material-color-picker\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/material-color-picker\/#primaryimage\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/material-color-picker.jpg\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/material-color-picker.jpg\",\"width\":1200,\"height\":630,\"caption\":\"material color picker\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdevtrick.com\/material-color-picker\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdevtrick.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Material Color Picker With Copy To Clipboard Feature | Color Palette\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdevtrick.com\/#website\",\"url\":\"https:\/\/webdevtrick.com\/\",\"name\":\"Web Dev Trick\",\"description\":\"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial\",\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdevtrick.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdevtrick.com\/#organization\",\"name\":\"Web Dev Trick\",\"url\":\"https:\/\/webdevtrick.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"width\":512,\"height\":512,\"caption\":\"Web Dev Trick\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webdevtrick\/\",\"https:\/\/pinterest.com\/webdevtrick\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\",\"name\":\"shaan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"caption\":\"shaan\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Material Color Picker With Copy To Clipboard Feature | Color Palette","description":"Want to create a color pick panel with material desing? Checkout this Material Color Picker With Copy To Clipboard Feature, Color Palette. Get source code.","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:\/\/webdevtrick.com\/material-color-picker\/","og_locale":"en_US","og_type":"article","og_title":"Material Color Picker With Copy To Clipboard Feature | Color Palette","og_description":"Want to create a color pick panel with material desing? Checkout this Material Color Picker With Copy To Clipboard Feature, Color Palette. Get source code.","og_url":"https:\/\/webdevtrick.com\/material-color-picker\/","og_site_name":"Web Dev Trick","article_publisher":"https:\/\/www.facebook.com\/webdevtrick\/","article_published_time":"2020-03-04T16:39:29+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/material-color-picker.jpg","type":"image\/jpeg"}],"author":"shaan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"shaan","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdevtrick.com\/material-color-picker\/#article","isPartOf":{"@id":"https:\/\/webdevtrick.com\/material-color-picker\/"},"author":{"name":"shaan","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3"},"headline":"Material Color Picker With Copy To Clipboard Feature | Color Palette","datePublished":"2020-03-04T16:39:29+00:00","mainEntityOfPage":{"@id":"https:\/\/webdevtrick.com\/material-color-picker\/"},"wordCount":735,"commentCount":0,"publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"image":{"@id":"https:\/\/webdevtrick.com\/material-color-picker\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/material-color-picker.jpg","keywords":["color picker","copy to clipboard","javascript tips and tricks","material design","random color","source code"],"articleSection":["CSS","HTML","JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdevtrick.com\/material-color-picker\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdevtrick.com\/material-color-picker\/","url":"https:\/\/webdevtrick.com\/material-color-picker\/","name":"Material Color Picker With Copy To Clipboard Feature | Color Palette","isPartOf":{"@id":"https:\/\/webdevtrick.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdevtrick.com\/material-color-picker\/#primaryimage"},"image":{"@id":"https:\/\/webdevtrick.com\/material-color-picker\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/material-color-picker.jpg","datePublished":"2020-03-04T16:39:29+00:00","description":"Want to create a color pick panel with material desing? Checkout this Material Color Picker With Copy To Clipboard Feature, Color Palette. Get source code.","breadcrumb":{"@id":"https:\/\/webdevtrick.com\/material-color-picker\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdevtrick.com\/material-color-picker\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/material-color-picker\/#primaryimage","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/material-color-picker.jpg","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/material-color-picker.jpg","width":1200,"height":630,"caption":"material color picker"},{"@type":"BreadcrumbList","@id":"https:\/\/webdevtrick.com\/material-color-picker\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdevtrick.com\/"},{"@type":"ListItem","position":2,"name":"Material Color Picker With Copy To Clipboard Feature | Color Palette"}]},{"@type":"WebSite","@id":"https:\/\/webdevtrick.com\/#website","url":"https:\/\/webdevtrick.com\/","name":"Web Dev Trick","description":"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial","publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdevtrick.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdevtrick.com\/#organization","name":"Web Dev Trick","url":"https:\/\/webdevtrick.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","width":512,"height":512,"caption":"Web Dev Trick"},"image":{"@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webdevtrick\/","https:\/\/pinterest.com\/webdevtrick\/"]},{"@type":"Person","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3","name":"shaan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","caption":"shaan"}}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/5662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/comments?post=5662"}],"version-history":[{"count":8,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/5662\/revisions"}],"predecessor-version":[{"id":5672,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/5662\/revisions\/5672"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media\/5663"}],"wp:attachment":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media?parent=5662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/categories?post=5662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/tags?post=5662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}