Cara Membuat Color Picker Flat UI Responsif di Halaman Statis Blog

Color Picker merupakan tools atau alat yang memiliki fungsi untuk mencari kode warna yang akan ditampilkan secara detail, sehingga dapat mengaplikasikannya di CSS template / widget yang akan kita ganti warnanya.
Tool Color picker ini bisa dipasang pada halaman Blog statis, tinggal pilih warna yang cocok dan klik pada warna tersebut, maka akan otomatis ter copy kode warnanya.
Kode Color Picker Flat UI ini sudah responsive, jadi akan menyesuaikan dengan ukuran layar ditambah widget ini hanya menggunakan HTML dan CSS jadi tidak akan mempengaruhi loading blog.
Cara Memasang Tool Color Picker di Halaman Statis Blogger
1. Buka Blogger > Buat postingan baru di halaman statis > Kemudian tambahkan kode di bawah ini di tab HTML (Bukan Compose).
<style>
body{font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;font-size:16px;margin:0}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.col-list{overflow:hidden}.col-list .col-1,.col-list .col-2,.col-list .col-3{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.col-list .col-1,.col-list .col-2,.col-list .col-3,.multi-up{margin:0 -40px 0 0}.col-3 div.figure,.col-3 div.module{-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-list div.figure,.col-list div.module{-ms-flex:0 1 100%;flex:0 1 100%}.col-list div.figure,.col-list div.module,.multi-up .tile{padding:0 40px 0 0}.color-tag{border:1px solid rgba(0,0,0,.12);padding:10px 15px 11px;margin:0}.color-tag .details{display:-ms-flexbox;display:flex}.color-tag span{font-weight:500}.color-tag.dark span{color:rgba(0,0,0,.87)}.color-tag .hex,.color-tag .copied{text-align:right;text-transform:uppercase;display:block;-ms-flex-positive:1;flex-grow:1;cursor:pointer;display:none}.color-tag .hex{text-transform:none}.color-tag:hover .hex{display:block}.color-tag+.color-tag{margin-top:-1px}.color-tag.light span{color:rgba(255,255,255,.87)}.spacer{border:none;padding-top:32px}hr{border-color:rgba(0,0,0,.12);border-width:1px 0 0;margin:0;height:0;overflow:visible}.tooltipped{position:relative}.tooltipped:after{position:absolute;z-index:1000000;display:none;padding:5px 8px;font:normal normal 11px/1.5 Helvetica,arial,nimbussansl,liberationsans,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";color:#fff;text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:rgba(0,0,0,.8);border-radius:3px;-webkit-font-smoothing:subpixel-antialiased}.tooltipped:before{position:absolute;z-index:1000001;display:none;width:0;height:0;color:rgba(0,0,0,.8);pointer-events:none;content:"";border:5px solid transparent}.tooltipped:hover:before,.tooltipped:hover:after,.tooltipped:active:before,.tooltipped:active:after,.tooltipped:focus:before,.tooltipped:focus:after{display:inline-block;text-decoration:none}.tooltipped-multiline:hover:after,.tooltipped-multiline:active:after,.tooltipped-multiline:focus:after{display:table-cell}.tooltipped-s:after,.tooltipped-se:after,.tooltipped-sw:after{top:100%;right:50%;margin-top:5px}.tooltipped-s:before,.tooltipped-se:before,.tooltipped-sw:before{top:auto;right:50%;bottom:-5px;margin-right:-5px;border-bottom-color:rgba(0,0,0,.8)}.tooltipped-se:after{right:auto;left:50%;margin-left:-15px}.tooltipped-sw:after{margin-right:-15px}.tooltipped-n:after,.tooltipped-ne:after,.tooltipped-nw:after{right:50%;bottom:100%;margin-bottom:5px}.tooltipped-n:before,.tooltipped-ne:before,.tooltipped-nw:before{top:-5px;right:50%;bottom:auto;margin-right:-5px;border-top-color:rgba(0,0,0,.8)}.tooltipped-ne:after{right:auto;left:50%;margin-left:-15px}.tooltipped-nw:after{margin-right:-15px}.tooltipped-s:after,.tooltipped-n:after{-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%)}.tooltipped-w:after{right:70px;bottom:50%;margin-right:5px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%)}.tooltipped-w:before{top:50%;bottom:50%;right:65px;margin-top:-5px;border-left-color:rgba(0,0,0,.8)}.tooltipped-e:after{bottom:50%;left:10px;margin-left:5px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%)}.tooltipped-e:before{top:50%;left:5px;bottom:50%;margin-top:-5px;border-right-color:rgba(0,0,0,.8)}.tooltipped-multiline:after{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:250px;word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate}.tooltipped-multiline.tooltipped-s:after,.tooltipped-multiline.tooltipped-n:after{right:auto;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.tooltipped-multiline.tooltipped-w:after,.tooltipped-multiline.tooltipped-e:after{right:100%}@media screen and (min-width:0\0){.tooltipped-multiline:after{width:250px}}.tooltipped-sticky:before,.tooltipped-sticky:after{display:inline-block}.tooltipped-sticky.tooltipped-multiline:after{display:table-cell}.fullscreen-overlay-enabled.dark-theme .tooltipped:after{color:#000;background:rgba(255,255,255,.8)}.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-s:before,.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-se:before,.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-sw:before{border-bottom-color:rgba(255,255,255,.8)}.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-n:before,.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-ne:before,.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-nw:before{border-top-color:rgba(255,255,255,.8)}.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-e:before{border-right-color:rgba(255,255,255,.8)}.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-w:before{border-left-color:rgba(255,255,255,.8)}.tooltipped-e:after{content:"Click to copy code!"}@media screen and (max-width:640px){.col-3 div.figure,.col-3 div.module{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;margin-bottom:32px}.spacer{border:none;padding-top:0}.col-3 div.module.off{display:none}}</style>
<div class="col-list"><section class="module-module-module col-3"><div class="module"><div class="color-tag dark" style="background-color:#ffebee;"><div class="details"><span class="shade">Red 50</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFEBEE">#FFEBEE</span></div></div><div class="color-tag dark" style="background-color:#ffcdd2;"><div class="details"><span class="shade">100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFCDD2">#FFCDD2</span></div></div><div class="color-tag dark" style="background-color:#ef9a9a;"><div class="details"><span class="shade">200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#EF9A9A">#EF9A9A</span></div></div><div class="color-tag dark" style="background-color:#e57373;"><div class="details"><span class="shade">300</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#E57373">#E57373</span></div></div><div class="color-tag light" style="background-color:#ef5350;"><div class="details"><span class="shade">400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#EF5350">#EF5350</span></div></div><div class="color-tag light" style="background-color:#f44336;"><div class="details"><span class="shade">500</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#F44336">#F44336</span></div></div><div class="color-tag light" style="background-color:#e53935;"><div class="details"><span class="shade">600</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#E53935">#E53935</span></div></div><div class="color-tag light" style="background-color:#d32f2f;"><div class="details"><span class="shade">700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#D32F2F">#D32F2F</span></div></div><div class="color-tag light" style="background-color:#c62828;"><div class="details"><span class="shade">800</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#C62828">#C62828</span></div></div><div class="color-tag light" style="background-color:#b71c1c;"><div class="details"><span class="shade">900</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#B71C1C">#B71C1C</span></div></div><div class="color-tag dark" style="background-color:#ff8a80;"><div class="details"><span class="shade">A100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FF8A80">#FF8A80</span></div></div><div class="color-tag light" style="background-color:#ff5252;"><div class="details"><span class="shade">A200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FF5252">#FF5252</span></div></div><div class="color-tag light" style="background-color:#ff1744;"><div class="details"><span class="shade">A400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FF1744">#FF1744</span></div></div><div class="color-tag light" style="background-color:#d50000;"><div class="details"><span class="shade">A700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#D50000">#D50000</span></div></div></div><div class="module"><div class="color-tag dark" style="background-color:#fce4ec;"><div class="details"><span class="shade">Pink 50</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FCE4EC">#FCE4EC</span></div></div><div class="color-tag dark" style="background-color:#f8bbd0;"><div class="details"><span class="shade">100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#F8BBD0">#F8BBD0</span></div></div><div class="color-tag dark" style="background-color:#f48fb1;"><div class="details"><span class="shade">200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#F48FB1">#F48FB1</span></div></div><div class="color-tag dark" style="background-color:#f06292;"><div class="details"><span class="shade">300</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#F06292">#F06292</span></div></div><div class="color-tag light" style="background-color:#ec407a;"><div class="details"><span class="shade">400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#EC407A">#EC407A</span></div></div><div class="color-tag light" style="background-color:#e91e63;"><div class="details"><span class="shade">500</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#E91E63">#E91E63</span></div></div><div class="color-tag light" style="background-color:#d81b60;"><div class="details"><span class="shade">600</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#D81B60">#D81B60</span></div></div><div class="color-tag light" style="background-color:#c2185b;"><div class="details"><span class="shade">700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#C2185B">#C2185B</span></div></div><div class="color-tag light" style="background-color:#ad1457;"><div class="details"><span class="shade">800</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#AD1457">#AD1457</span></div></div><div class="color-tag light" style="background-color:#880e4f;"><div class="details"><span class="shade">900</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#880E4F">#880E4F</span></div></div><div class="color-tag dark" style="background-color:#ff80ab;"><div class="details"><span class="shade">A100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FF80AB">#FF80AB</span></div></div><div class="color-tag light" style="background-color:#ff4081;"><div class="details"><span class="shade">A200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FF4081">#FF4081</span></div></div><div class="color-tag light" style="background-color:#f50057;"><div class="details"><span class="shade">A400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#F50057">#F50057</span></div></div><div class="color-tag light" style="background-color:#c51162;"><div class="details"><span class="shade">A700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#C51162">#C51162</span></div></div></div><div class="module"><div class="color-tag dark" style="background-color:#f3e5f5;"><div class="details"><span class="shade">Purple 50</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#F3E5F5">#F3E5F5</span></div></div><div class="color-tag dark" style="background-color:#e1bee7;"><div class="details"><span class="shade">100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#E1BEE7">#E1BEE7</span></div></div><div class="color-tag dark" style="background-color:#ce93d8;"><div class="details"><span class="shade">200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#CE93D8">#CE93D8</span></div></div><div class="color-tag light" style="background-color:#ba68c8;"><div class="details"><span class="shade">300</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#BA68C8">#BA68C8</span></div></div><div class="color-tag light" style="background-color:#ab47bc;"><div class="details"><span class="shade">400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#AB47BC">#AB47BC</span></div></div><div class="color-tag light" style="background-color:#9c27b0;"><div class="details"><span class="shade">500</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#9C27B0">#9C27B0</span></div></div><div class="color-tag light" style="background-color:#8e24aa;"><div class="details"><span class="shade">600</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#8E24AA">#8E24AA</span></div></div><div class="color-tag light" style="background-color:#7b1fa2;"><div class="details"><span class="shade">700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#7B1FA2">#7B1FA2</span></div></div><div class="color-tag light" style="background-color:#6a1b9a;"><div class="details"><span class="shade">800</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#6A1B9A">#6A1B9A</span></div></div><div class="color-tag light" style="background-color:#4a148c;"><div class="details"><span class="shade">900</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#4A148C">#4A148C</span></div></div><div class="color-tag dark" style="background-color:#ea80fc;"><div class="details"><span class="shade">A100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#EA80FC">#EA80FC</span></div></div><div class="color-tag light" style="background-color:#e040fb;"><div class="details"><span class="shade">A200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#E040FB">#E040FB</span></div></div><div class="color-tag light" style="background-color:#d500f9;"><div class="details"><span class="shade">A400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#D500F9">#D500F9</span></div></div><div class="color-tag light" style="background-color:#aa00ff;"><div class="details"><span class="shade">A700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#AA00FF">#AA00FF</span></div></div></div></section><section class="module-module-module col-3"><div class="module off"><hr class="spacer" role="separator" /></div><div class="module off"></div><div class="module off"></div></section><section class="module-module-module col-3"><div class="module"><div class="color-tag dark" style="background-color:#ede7f6;"><div class="details"><span class="shade">Deep purple 50</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#EDE7F6">#EDE7F6</span></div></div><div class="color-tag dark" style="background-color:#d1c4e9;"><div class="details"><span class="shade">100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#D1C4E9">#D1C4E9</span></div></div><div class="color-tag dark" style="background-color:#b39ddb;"><div class="details"><span class="shade">200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#B39DDB">#B39DDB</span></div></div><div class="color-tag light" style="background-color:#9575cd;"><div class="details"><span class="shade">300</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#9575CD">#9575CD</span></div></div><div class="color-tag light" style="background-color:#7e57c2;"><div class="details"><span class="shade">400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#7E57C2">#7E57C2</span></div></div><div class="color-tag light" style="background-color:#673ab7;"><div class="details"><span class="shade">500</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#673AB7">#673AB7</span></div></div><div class="color-tag light" style="background-color:#5e35b1;"><div class="details"><span class="shade">600</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#5E35B1">#5E35B1</span></div></div><div class="color-tag light" style="background-color:#512da8;"><div class="details"><span class="shade">700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#512DA8">#512DA8</span></div></div><div class="color-tag light" style="background-color:#4527a0;"><div class="details"><span class="shade">800</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#4527A0">#4527A0</span></div></div><div class="color-tag light" style="background-color:#311b92;"><div class="details"><span class="shade">900</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#311B92">#311B92</span></div></div><div class="color-tag dark" style="background-color:#b388ff;"><div class="details"><span class="shade">A100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#B388FF">#B388FF</span></div></div><div class="color-tag light" style="background-color:#7c4dff;"><div class="details"><span class="shade">A200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#7C4DFF">#7C4DFF</span></div></div><div class="color-tag light" style="background-color:#651fff;"><div class="details"><span class="shade">A400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#651FFF">#651FFF</span></div></div><div class="color-tag light" style="background-color:#6200ea;"><div class="details"><span class="shade">A700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#6200EA">#6200EA</span></div></div></div><div class="module"><div class="color-tag dark" style="background-color:#e8eaf6;"><div class="details"><span class="shade">Indigo 50</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#E8EAF6">#E8EAF6</span></div></div><div class="color-tag dark" style="background-color:#c5cae9;"><div class="details"><span class="shade">100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#C5CAE9">#C5CAE9</span></div></div><div class="color-tag dark" style="background-color:#9fa8da;"><div class="details"><span class="shade">200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#9FA8DA">#9FA8DA</span></div></div><div class="color-tag light" style="background-color:#7986cb;"><div class="details"><span class="shade">300</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#7986CB">#7986CB</span></div></div><div class="color-tag light" style="background-color:#5c6bc0;"><div class="details"><span class="shade">400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#5C6BC0">#5C6BC0</span></div></div><div class="color-tag light" style="background-color:#3f51b5;"><div class="details"><span class="shade">500</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#3F51B5">#3F51B5</span></div></div><div class="color-tag light" style="background-color:#3949ab;"><div class="details"><span class="shade">600</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#3949AB">#3949AB</span></div></div><div class="color-tag light" style="background-color:#303f9f;"><div class="details"><span class="shade">700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#303F9F">#303F9F</span></div></div><div class="color-tag light" style="background-color:#283593;"><div class="details"><span class="shade">800</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#283593">#283593</span></div></div><div class="color-tag light" style="background-color:#1a237e;"><div class="details"><span class="shade">900</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#1A237E">#1A237E</span></div></div><div class="color-tag dark" style="background-color:#8c9eff;"><div class="details"><span class="shade">A100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#8C9EFF">#8C9EFF</span></div></div><div class="color-tag light" style="background-color:#536dfe;"><div class="details"><span class="shade">A200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#536DFE">#536DFE</span></div></div><div class="color-tag light" style="background-color:#3d5afe;"><div class="details"><span class="shade">A400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#3D5AFE">#3D5AFE</span></div></div><div class="color-tag light" style="background-color:#304ffe;"><div class="details"><span class="shade">A700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#304FFE">#304FFE</span></div></div></div><div class="module"><div class="color-tag dark" style="background-color:#e3f2fd;"><div class="details"><span class="shade">Blue 50</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#E3F2FD">#E3F2FD</span></div></div><div class="color-tag dark" style="background-color:#bbdefb;"><div class="details"><span class="shade">100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#BBDEFB">#BBDEFB</span></div></div><div class="color-tag dark" style="background-color:#90caf9;"><div class="details"><span class="shade">200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#90CAF9">#90CAF9</span></div></div><div class="color-tag dark" style="background-color:#64b5f6;"><div class="details"><span class="shade">300</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#64B5F6">#64B5F6</span></div></div><div class="color-tag dark" style="background-color:#42a5f5;"><div class="details"><span class="shade">400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#42A5F5">#42A5F5</span></div></div><div class="color-tag dark" style="background-color:#2196f3;"><div class="details"><span class="shade">500</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#2196F3">#2196F3</span></div></div><div class="color-tag light" style="background-color:#1e88e5;"><div class="details"><span class="shade">600</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#1E88E5">#1E88E5</span></div></div><div class="color-tag light" style="background-color:#1976d2;"><div class="details"><span class="shade">700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#1976D2">#1976D2</span></div></div><div class="color-tag light" style="background-color:#1565c0;"><div class="details"><span class="shade">800</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#1565C0">#1565C0</span></div></div><div class="color-tag light" style="background-color:#0d47a1;"><div class="details"><span class="shade">900</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#0D47A1">#0D47A1</span></div></div><div class="color-tag dark" style="background-color:#82b1ff;"><div class="details"><span class="shade">A100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#82B1FF">#82B1FF</span></div></div><div class="color-tag light" style="background-color:#448aff;"><div class="details"><span class="shade">A200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#448AFF">#448AFF</span></div></div><div class="color-tag light" style="background-color:#2979ff;"><div class="details"><span class="shade">A400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#2979FF">#2979FF</span></div></div><div class="color-tag light" style="background-color:#2962ff;"><div class="details"><span class="shade">A700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#2962FF">#2962FF</span></div></div></div></section><section class="module-module-module col-3"><div class="module off"><hr class="spacer" role="separator" /></div><div class="module off"></div><div class="module off"></div></section><section class="module-module-module col-3"><div class="module"><div class="color-tag dark" style="background-color:#e1f5fe;"><div class="details"><span class="shade">Light Blue 50</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#E1F5FE">#E1F5FE</span></div></div><div class="color-tag dark" style="background-color:#b3e5fc;"><div class="details"><span class="shade">100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#B3E5FC">#B3E5FC</span></div></div><div class="color-tag dark" style="background-color:#81d4fa;"><div class="details"><span class="shade">200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#81D4FA">#81D4FA</span></div></div><div class="color-tag dark" style="background-color:#4fc3f7;"><div class="details"><span class="shade">300</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#4FC3F7">#4FC3F7</span></div></div><div class="color-tag dark" style="background-color:#29b6f6;"><div class="details"><span class="shade">400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#29B6F6">#29B6F6</span></div></div><div class="color-tag dark" style="background-color:#03a9f4;"><div class="details"><span class="shade">500</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#03A9F4">#03A9F4</span></div></div><div class="color-tag dark" style="background-color:#039be5;"><div class="details"><span class="shade">600</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#039BE5">#039BE5</span></div></div><div class="color-tag light" style="background-color:#0288d1;"><div class="details"><span class="shade">700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#0288D1">#0288D1</span></div></div><div class="color-tag light" style="background-color:#0277bd;"><div class="details"><span class="shade">800</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#0277BD">#0277BD</span></div></div><div class="color-tag light" style="background-color:#01579b;"><div class="details"><span class="shade">900</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#01579B">#01579B</span></div></div><div class="color-tag dark" style="background-color:#80d8ff;"><div class="details"><span class="shade">A100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#80D8FF">#80D8FF</span></div></div><div class="color-tag dark" style="background-color:#40c4ff;"><div class="details"><span class="shade">A200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#40C4FF">#40C4FF</span></div></div><div class="color-tag dark" style="background-color:#00b0ff;"><div class="details"><span class="shade">A400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#00B0FF">#00B0FF</span></div></div><div class="color-tag light" style="background-color:#0091ea;"><div class="details"><span class="shade">A700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#0091EA">#0091EA</span></div></div></div><div class="module"><div class="color-tag dark" style="background-color:#e0f7fa;"><div class="details"><span class="shade">Cyan 50</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#E0F7FA">#E0F7FA</span></div></div><div class="color-tag dark" style="background-color:#b2ebf2;"><div class="details"><span class="shade">100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#B2EBF2">#B2EBF2</span></div></div><div class="color-tag dark" style="background-color:#80deea;"><div class="details"><span class="shade">200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#80DEEA">#80DEEA</span></div></div><div class="color-tag dark" style="background-color:#4dd0e1;"><div class="details"><span class="shade">300</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#4DD0E1">#4DD0E1</span></div></div><div class="color-tag dark" style="background-color:#26c6da;"><div class="details"><span class="shade">400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#26C6DA">#26C6DA</span></div></div><div class="color-tag dark" style="background-color:#00bcd4;"><div class="details"><span class="shade">500</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#00BCD4">#00BCD4</span></div></div><div class="color-tag dark" style="background-color:#00acc1;"><div class="details"><span class="shade">600</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#00ACC1">#00ACC1</span></div></div><div class="color-tag light" style="background-color:#0097a7;"><div class="details"><span class="shade">700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#0097A7">#0097A7</span></div></div><div class="color-tag light" style="background-color:#00838f;"><div class="details"><span class="shade">800</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#00838F">#00838F</span></div></div><div class="color-tag light" style="background-color:#006064;"><div class="details"><span class="shade">900</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#006064">#006064</span></div></div><div class="color-tag dark" style="background-color:#84ffff;"><div class="details"><span class="shade">A100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#84FFFF">#84FFFF</span></div></div><div class="color-tag dark" style="background-color:#18ffff;"><div class="details"><span class="shade">A200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#18FFFF">#18FFFF</span></div></div><div class="color-tag dark" style="background-color:#00e5ff;"><div class="details"><span class="shade">A400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#00E5FF">#00E5FF</span></div></div><div class="color-tag dark" style="background-color:#00b8d4;"><div class="details"><span class="shade">A700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#00B8D4">#00B8D4</span></div></div></div><div class="module"><div class="color-tag dark" style="background-color:#e0f2f1;"><div class="details"><span class="shade">Teal 50</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#E0F2F1">#E0F2F1</span></div></div><div class="color-tag dark" style="background-color:#b2dfdb;"><div class="details"><span class="shade">100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#B2DFDB">#B2DFDB</span></div></div><div class="color-tag dark" style="background-color:#80cbc4;"><div class="details"><span class="shade">200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#80CBC4">#80CBC4</span></div></div><div class="color-tag dark" style="background-color:#4db6ac;"><div class="details"><span class="shade">300</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#4DB6AC">#4DB6AC</span></div></div><div class="color-tag dark" style="background-color:#26a69a;"><div class="details"><span class="shade">400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#26A69A">#26A69A</span></div></div><div class="color-tag light" style="background-color:#009688;"><div class="details"><span class="shade">500</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#009688">#009688</span></div></div><div class="color-tag light" style="background-color:#00897b;"><div class="details"><span class="shade">600</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#00897B">#00897B</span></div></div><div class="color-tag light" style="background-color:#00796b;"><div class="details"><span class="shade">700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#00796B">#00796B</span></div></div><div class="color-tag light" style="background-color:#00695c;"><div class="details"><span class="shade">800</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#00695C">#00695C</span></div></div><div class="color-tag light" style="background-color:#004d40;"><div class="details"><span class="shade">900</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#004D40">#004D40</span></div></div><div class="color-tag dark" style="background-color:#a7ffeb;"><div class="details"><span class="shade">A100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#A7FFEB">#A7FFEB</span></div></div><div class="color-tag dark" style="background-color:#64ffda;"><div class="details"><span class="shade">A200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#64FFDA">#64FFDA</span></div></div><div class="color-tag dark" style="background-color:#1de9b6;"><div class="details"><span class="shade">A400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#1DE9B6">#1DE9B6</span></div></div><div class="color-tag dark" style="background-color:#00bfa5;"><div class="details"><span class="shade">A700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#00BFA5">#00BFA5</span></div></div></div></section><section class="module-module-module col-3"><div class="module off"><hr class="spacer" role="separator" /></div><div class="module off"></div><div class="module off"></div></section><section class="module-module-module col-3"><div class="module"><div class="color-tag dark" style="background-color:#e8f5e9;"><div class="details"><span class="shade">Green 50</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#E8F5E9">#E8F5E9</span></div></div><div class="color-tag dark" style="background-color:#c8e6c9;"><div class="details"><span class="shade">100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#C8E6C9">#C8E6C9</span></div></div><div class="color-tag dark" style="background-color:#a5d6a7;"><div class="details"><span class="shade">200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#A5D6A7">#A5D6A7</span></div></div><div class="color-tag dark" style="background-color:#81c784;"><div class="details"><span class="shade">300</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#81C784">#81C784</span></div></div><div class="color-tag dark" style="background-color:#66bb6a;"><div class="details"><span class="shade">400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#66BB6A">#66BB6A</span></div></div><div class="color-tag dark" style="background-color:#4caf50;"><div class="details"><span class="shade">500</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#4CAF50">#4CAF50</span></div></div><div class="color-tag light" style="background-color:#43a047;"><div class="details"><span class="shade">600</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#43A047">#43A047</span></div></div><div class="color-tag light" style="background-color:#388e3c;"><div class="details"><span class="shade">700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#388E3C">#388E3C</span></div></div><div class="color-tag light" style="background-color:#2e7d32;"><div class="details"><span class="shade">800</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#2E7D32">#2E7D32</span></div></div><div class="color-tag light" style="background-color:#1b5e20;"><div class="details"><span class="shade">900</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#1B5E20">#1B5E20</span></div></div><div class="color-tag dark" style="background-color:#b9f6ca;"><div class="details"><span class="shade">A100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#B9F6CA">#B9F6CA</span></div></div><div class="color-tag dark" style="background-color:#69f0ae;"><div class="details"><span class="shade">A200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#69F0AE">#69F0AE</span></div></div><div class="color-tag dark" style="background-color:#00e676;"><div class="details"><span class="shade">A400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#00E676">#00E676</span></div></div><div class="color-tag dark" style="background-color:#00c853;"><div class="details"><span class="shade">A700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#00C853">#00C853</span></div></div></div><div class="module"><div class="color-tag dark" style="background-color:#f1f8e9;"><div class="details"><span class="shade">Light Green 50</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#F1F8E9">#F1F8E9</span></div></div><div class="color-tag dark" style="background-color:#dcedc8;"><div class="details"><span class="shade">100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#DCEDC8">#DCEDC8</span></div></div><div class="color-tag dark" style="background-color:#c5e1a5;"><div class="details"><span class="shade">200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#C5E1A5">#C5E1A5</span></div></div><div class="color-tag dark" style="background-color:#aed581;"><div class="details"><span class="shade">300</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#AED581">#AED581</span></div></div><div class="color-tag dark" style="background-color:#9ccc65;"><div class="details"><span class="shade">400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#9CCC65">#9CCC65</span></div></div><div class="color-tag dark" style="background-color:#8bc34a;"><div class="details"><span class="shade">500</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#8BC34A">#8BC34A</span></div></div><div class="color-tag dark" style="background-color:#7cb342;"><div class="details"><span class="shade">600</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#7CB342">#7CB342</span></div></div><div class="color-tag dark" style="background-color:#689f38;"><div class="details"><span class="shade">700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#689F38">#689F38</span></div></div><div class="color-tag light" style="background-color:#558b2f;"><div class="details"><span class="shade">800</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#558B2F">#558B2F</span></div></div><div class="color-tag light" style="background-color:#33691e;"><div class="details"><span class="shade">900</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#33691E">#33691E</span></div></div><div class="color-tag dark" style="background-color:#ccff90;"><div class="details"><span class="shade">A100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#CCFF90">#CCFF90</span></div></div><div class="color-tag dark" style="background-color:#b2ff59;"><div class="details"><span class="shade">A200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#B2FF59">#B2FF59</span></div></div><div class="color-tag dark" style="background-color:#76ff03;"><div class="details"><span class="shade">A400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#76FF03">#76FF03</span></div></div><div class="color-tag dark" style="background-color:#64dd17;"><div class="details"><span class="shade">A700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#64DD17">#64DD17</span></div></div></div><div class="module"><div class="color-tag dark" style="background-color:#f9fbe7;"><div class="details"><span class="shade">Lime 50</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#F9FBE7">#F9FBE7</span></div></div><div class="color-tag dark" style="background-color:#f0f4c3;"><div class="details"><span class="shade">100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#F0F4C3">#F0F4C3</span></div></div><div class="color-tag dark" style="background-color:#e6ee9c;"><div class="details"><span class="shade">200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#E6EE9C">#E6EE9C</span></div></div><div class="color-tag dark" style="background-color:#dce775;"><div class="details"><span class="shade">300</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#DCE775">#DCE775</span></div></div><div class="color-tag dark" style="background-color:#d4e157;"><div class="details"><span class="shade">400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#D4E157">#D4E157</span></div></div><div class="color-tag dark" style="background-color:#cddc39;"><div class="details"><span class="shade">500</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#CDDC39">#CDDC39</span></div></div><div class="color-tag dark" style="background-color:#c0ca33;"><div class="details"><span class="shade">600</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#C0CA33">#C0CA33</span></div></div><div class="color-tag dark" style="background-color:#afb42b;"><div class="details"><span class="shade">700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#AFB42B">#AFB42B</span></div></div><div class="color-tag dark" style="background-color:#9e9d24;"><div class="details"><span class="shade">800</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#9E9D24">#9E9D24</span></div></div><div class="color-tag light" style="background-color:#827717;"><div class="details"><span class="shade">900</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#827717">#827717</span></div></div><div class="color-tag dark" style="background-color:#f4ff81;"><div class="details"><span class="shade">A100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#F4FF81">#F4FF81</span></div></div><div class="color-tag dark" style="background-color:#eeff41;"><div class="details"><span class="shade">A200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#EEFF41">#EEFF41</span></div></div><div class="color-tag dark" style="background-color:#c6ff00;"><div class="details"><span class="shade">A400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#C6FF00">#C6FF00</span></div></div><div class="color-tag dark" style="background-color:#aeea00;"><div class="details"><span class="shade">A700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#AEEA00">#AEEA00</span></div></div></div></section><section class="module-module-module col-3"><div class="module off"><hr class="spacer" role="separator" /></div><div class="module off"></div><div class="module off"></div></section><section class="module-module-module col-3"><div class="module"><div class="color-tag dark" style="background-color:#fffde7;"><div class="details"><span class="shade">Yellow 50</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#AEEA00">#FFFDE7</span></div></div><div class="color-tag dark" style="background-color:#fff9c4;"><div class="details"><span class="shade">100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFF9C4">#FFF9C4</span></div></div><div class="color-tag dark" style="background-color:#fff59d;"><div class="details"><span class="shade">200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFF59D">#FFF59D</span></div></div><div class="color-tag dark" style="background-color:#fff176;"><div class="details"><span class="shade">300</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFF176">#FFF176</span></div></div><div class="color-tag dark" style="background-color:#ffee58;"><div class="details"><span class="shade">400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFEE58">#FFEE58</span></div></div><div class="color-tag dark" style="background-color:#ffeb3b;"><div class="details"><span class="shade">500</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFEB3B">#FFEB3B</span></div></div><div class="color-tag dark" style="background-color:#fdd835;"><div class="details"><span class="shade">600</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FDD835">#FDD835</span></div></div><div class="color-tag dark" style="background-color:#fbc02d;"><div class="details"><span class="shade">700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FBC02D">#FBC02D</span></div></div><div class="color-tag dark" style="background-color:#f9a825;"><div class="details"><span class="shade">800</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#F9A825">#F9A825</span></div></div><div class="color-tag dark" style="background-color:#f57f17;"><div class="details"><span class="shade">900</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#F57F17">#F57F17</span></div></div><div class="color-tag dark" style="background-color:#ffff8d;"><div class="details"><span class="shade">A100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFFF8D">#FFFF8D</span></div></div><div class="color-tag dark" style="background-color:yellow;"><div class="details"><span class="shade">A200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFFF00">#FFFF00</span></div></div><div class="color-tag dark" style="background-color:#ffea00;"><div class="details"><span class="shade">A400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFEA00">#FFEA00</span></div></div><div class="color-tag dark" style="background-color:#ffd600;"><div class="details"><span class="shade">A700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFD600">#FFD600</span></div></div></div><div class="module"><div class="color-tag dark" style="background-color:#fff8e1;"><div class="details"><span class="shade">Amber 50</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFF8E1">#FFF8E1</span></div></div><div class="color-tag dark" style="background-color:#ffecb3;"><div class="details"><span class="shade">100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFECB3">#FFECB3</span></div></div><div class="color-tag dark" style="background-color:#ffe082;"><div class="details"><span class="shade">200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFE082">#FFE082</span></div></div><div class="color-tag dark" style="background-color:#ffd54f;"><div class="details"><span class="shade">300</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFD54F">#FFD54F</span></div></div><div class="color-tag dark" style="background-color:#ffca28;"><div class="details"><span class="shade">400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFCA28">#FFCA28</span></div></div><div class="color-tag dark" style="background-color:#ffc107;"><div class="details"><span class="shade">500</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFC107">#FFC107</span></div></div><div class="color-tag dark" style="background-color:#ffb300;"><div class="details"><span class="shade">600</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFB300">#FFB300</span></div></div><div class="color-tag dark" style="background-color:#ffa000;"><div class="details"><span class="shade">700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFA000">#FFA000</span></div></div><div class="color-tag dark" style="background-color:#ff8f00;"><div class="details"><span class="shade">800</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FF8F00">#FF8F00</span></div></div><div class="color-tag dark" style="background-color:#ff6f00;"><div class="details"><span class="shade">900</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FF6F00">#FF6F00</span></div></div><div class="color-tag dark" style="background-color:#ffe57f;"><div class="details"><span class="shade">A100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFE57F">#FFE57F</span></div></div><div class="color-tag dark" style="background-color:#ffd740;"><div class="details"><span class="shade">A200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFD740">#FFD740</span></div></div><div class="color-tag dark" style="background-color:#ffc400;"><div class="details"><span class="shade">A400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFC400">#FFC400</span></div></div><div class="color-tag dark" style="background-color:#ffab00;"><div class="details"><span class="shade">A700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFAB00">#FFAB00</span></div></div></div><div class="module"><div class="color-tag dark" style="background-color:#fff3e0;"><div class="details"><span class="shade">Orange 50</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFF3E0">#FFF3E0</span></div></div><div class="color-tag dark" style="background-color:#ffe0b2;"><div class="details"><span class="shade">100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFE0B2">#FFE0B2</span></div></div><div class="color-tag dark" style="background-color:#ffcc80;"><div class="details"><span class="shade">200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFCC80">#FFCC80</span></div></div><div class="color-tag dark" style="background-color:#ffb74d;"><div class="details"><span class="shade">300</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFB74D">#FFB74D</span></div></div><div class="color-tag dark" style="background-color:#ffa726;"><div class="details"><span class="shade">400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFA726">#FFA726</span></div></div><div class="color-tag dark" style="background-color:#ff9800;"><div class="details"><span class="shade">500</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FF9800">#FF9800</span></div></div><div class="color-tag dark" style="background-color:#fb8c00;"><div class="details"><span class="shade">600</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FB8C00">#FB8C00</span></div></div><div class="color-tag dark" style="background-color:#f57c00;"><div class="details"><span class="shade">700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#F57C00">#F57C00</span></div></div><div class="color-tag dark" style="background-color:#ef6c00;"><div class="details"><span class="shade">800</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#EF6C00">#EF6C00</span></div></div><div class="color-tag light" style="background-color:#e65100;"><div class="details"><span class="shade">900</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#E65100">#E65100</span></div></div><div class="color-tag dark" style="background-color:#ffd180;"><div class="details"><span class="shade">A100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFD180">#FFD180</span></div></div><div class="color-tag dark" style="background-color:#ffab40;"><div class="details"><span class="shade">A200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFAB40">#FFAB40</span></div></div><div class="color-tag dark" style="background-color:#ff9100;"><div class="details"><span class="shade">A400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FF9100">#FF9100</span></div></div><div class="color-tag dark" style="background-color:#ff6d00;"><div class="details"><span class="shade">A700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FF6D00">#FF6D00</span></div></div></div></section><section class="module-module-module col-3"><div class="module off"><hr class="spacer" role="separator" /></div><div class="module off"></div><div class="module off"></div></section><section class="module-module-module col-3"><div class="module"><div class="color-tag dark" style="background-color:#fbe9e7;"><div class="details"><span class="shade">Deep Orange 50</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FBE9E7">#FBE9E7</span></div></div><div class="color-tag dark" style="background-color:#ffccbc;"><div class="details"><span class="shade">100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFCCBC">#FFCCBC</span></div></div><div class="color-tag dark" style="background-color:#ffab91;"><div class="details"><span class="shade">200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFAB91">#FFAB91</span></div></div><div class="color-tag dark" style="background-color:#ff8a65;"><div class="details"><span class="shade">300</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FF8A65">#FF8A65</span></div></div><div class="color-tag dark" style="background-color:#ff7043;"><div class="details"><span class="shade">400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FF7043">#FF7043</span></div></div><div class="color-tag dark" style="background-color:#ff5722;"><div class="details"><span class="shade">500</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FF5722">#FF5722</span></div></div><div class="color-tag light" style="background-color:#f4511e;"><div class="details"><span class="shade">600</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#F4511E">#F4511E</span></div></div><div class="color-tag light" style="background-color:#e64a19;"><div class="details"><span class="shade">700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#E64A19">#E64A19</span></div></div><div class="color-tag light" style="background-color:#d84315;"><div class="details"><span class="shade">800</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#D84315">#D84315</span></div></div><div class="color-tag light" style="background-color:#bf360c;"><div class="details"><span class="shade">900</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#BF360C">#BF360C</span></div></div><div class="color-tag dark" style="background-color:#ff9e80;"><div class="details"><span class="shade">A100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FF9E80">#FF9E80</span></div></div><div class="color-tag dark" style="background-color:#ff6e40;"><div class="details"><span class="shade">A200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="&gt;#FF6E40">#FF6E40</span></div></div><div class="color-tag light" style="background-color:#ff3d00;"><div class="details"><span class="shade">A400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FF3D00">#FF3D00</span></div></div><div class="color-tag light" style="background-color:#dd2c00;"><div class="details"><span class="shade">A700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#DD2C00">#DD2C00</span></div></div></div><div class="module"><div class="color-tag dark" style="background-color:#efebe9;"><div class="details"><span class="shade">Brown 50</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#EFEBE9">#EFEBE9</span></div></div><div class="color-tag dark" style="background-color:#d7ccc8;"><div class="details"><span class="shade">100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#D7CCC8">#D7CCC8</span></div></div><div class="color-tag dark" style="background-color:#bcaaa4;"><div class="details"><span class="shade">200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#BCAAA4">#BCAAA4</span></div></div><div class="color-tag light" style="background-color:#a1887f;"><div class="details"><span class="shade">300</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#A1887F">#A1887F</span></div></div><div class="color-tag light" style="background-color:#8d6e63;"><div class="details"><span class="shade">400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#8D6E63">#8D6E63</span></div></div><div class="color-tag light" style="background-color:#795548;"><div class="details"><span class="shade">500</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#795548">#795548</span></div></div><div class="color-tag light" style="background-color:#6d4c41;"><div class="details"><span class="shade">600</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#6D4C41">#6D4C41</span></div></div><div class="color-tag light" style="background-color:#5d4037;"><div class="details"><span class="shade">700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#5D4037">#5D4037</span></div></div><div class="color-tag light" style="background-color:#4e342e;"><div class="details"><span class="shade">800</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#4E342E">#4E342E</span></div></div><div class="color-tag light" style="background-color:#3e2723;"><div class="details"><span class="shade">900</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#3E2723">#3E2723</span></div></div></div><div class="module"><div class="color-tag dark" style="background-color:#fafafa;"><div class="details"><span class="shade">Gray 50</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FAFAFA">#FAFAFA</span></div></div><div class="color-tag dark" style="background-color:whitesmoke;"><div class="details"><span class="shade">100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#F5F5F5">#F5F5F5</span></div></div><div class="color-tag dark" style="background-color:#eeeeee;"><div class="details"><span class="shade">200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#EEEEEE">#EEEEEE</span></div></div><div class="color-tag dark" style="background-color:#e0e0e0;"><div class="details"><span class="shade">300</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#E0E0E0">#E0E0E0</span></div></div><div class="color-tag dark" style="background-color:#bdbdbd;"><div class="details"><span class="shade">400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#BDBDBD">#BDBDBD</span></div></div><div class="color-tag dark" style="background-color:#9e9e9e;"><div class="details"><span class="shade">500</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#9E9E9E">#9E9E9E</span></div></div><div class="color-tag light" style="background-color:#757575;"><div class="details"><span class="shade">600</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#757575">#757575</span></div></div><div class="color-tag light" style="background-color:#616161;"><div class="details"><span class="shade">700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#616161">#616161</span></div></div><div class="color-tag light" style="background-color:#424242;"><div class="details"><span class="shade">800</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#424242">#424242</span></div></div><div class="color-tag light" style="background-color:#212121;"><div class="details"><span class="shade">900</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#212121">#212121</span></div></div></div></section><section class="module-module-module col-3"><div class="module off"><hr class="spacer" role="separator" /></div><div class="module off"></div><div class="module off"></div></section><section class="module-module-module col-3"><div class="module"><div class="color-tag dark" style="background-color:#eceff1;"><div class="details"><span class="shade">Blue Gray 50</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#ECEFF1">#ECEFF1</span></div></div><div class="color-tag dark" style="background-color:#cfd8dc;"><div class="details"><span class="shade">100</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#CFD8DC">#CFD8DC</span></div></div><div class="color-tag dark" style="background-color:#b0bec5;"><div class="details"><span class="shade">200</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#B0BEC5">#B0BEC5</span></div></div><div class="color-tag dark" style="background-color:#90a4ae;"><div class="details"><span class="shade">300</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#90A4AE">#90A4AE</span></div></div><div class="color-tag light" style="background-color:#78909c;"><div class="details"><span class="shade">400</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#78909C">#78909C</span></div></div><div class="color-tag light" style="background-color:#607d8b;"><div class="details"><span class="shade">500</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#607D8B">#607D8B</span></div></div><div class="color-tag light" style="background-color:#546e7a;"><div class="details"><span class="shade">600</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#546E7A">#546E7A</span></div></div><div class="color-tag light" style="background-color:#455a64;"><div class="details"><span class="shade">700</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#455A64">#455A64</span></div></div><div class="color-tag light" style="background-color:#37474f;"><div class="details"><span class="shade">800</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#37474F">#37474F</span></div></div><div class="color-tag light" style="background-color:#263238;"><div class="details"><span class="shade">900</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#263238">#263238</span></div></div></div><div class="module"><div class="color-tag light" style="background-color:black;"><div class="details"><span class="shade">Black</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#000000">#000000</span></div></div><div class="color-tag dark" style="background-color:white;"><div class="details"><span class="shade">White</span><span class="hex" data-clipboard-snippet="" data-clipboard-text="#FFFFFF">#FFFFFF</span></div></div></div><div class="module off"></div></section></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v1.5.16/dist/clipboard.min.js"></script> 
<script>
var clipboard=new Clipboard('.hex');clipboard.on('success',function(e){e.clearSelection();showTooltip(e.trigger,'Copied!')});clipboard.on('error',function(e){showTooltip(e.trigger,fallbackMessage(e.action))});var btns=document.querySelectorAll('.hex');for(var i=0;i<btns.length;i++){btns[i].addEventListener('mouseleave',clearTooltip);btns[i].addEventListener('blur',clearTooltip)}function clearTooltip(e){e.currentTarget.setAttribute('class','hex');e.currentTarget.removeAttribute('aria-label')}function showTooltip(elem,msg){elem.setAttribute('class','hex tooltipped tooltipped-w');elem.setAttribute('aria-label',msg)}function fallbackMessage(action){var actionMsg='';var actionKey=(action==='cut'?'X':'C');if(/iPhone|iPad/i.test(navigator.userAgent)){actionMsg='No support:('}else if(/Mac/i.test(navigator.userAgent)){actionMsg='Press ⌘-'+actionKey+' to '+action}else{actionMsg='Press Ctrl-'+actionKey+' to '+action}return actionMsg}$('.color-tag').hover(
       function(){$(this).addClass('tooltipped tooltipped-e')});$(".hex").click(function(){$(".color-tag").removeClass("tooltipped tooltipped-e")});</script>
2. Publish postingan dan lihat hasilnya.
Demo Click here