Situs Encrypt & Decrypt JavaScript Yang Sering Digunakan Para Blogger

Situs Encrypt & Decrypt JavaScript Yang Sering Digunakan Para Blogger

Blogger Tips Trick Tools

Dalam dunia maya atau internet sangat diperlukan yang namanya pengamanan data karena data yang tersebar di dunia maya sangatlah sensitif dan harus diwaspadai karena dapat dicuri oleh orang atau pihak yang tidak bertanggung jawab.

I. Pengertian Encrypt

Encrypt atau enkripsi adalah suatu metode yang digunakan untuk membuat suatu kata atau file menjadi rahasia sehingga hanya orang yang dituju saja yang bisa membukanya.

Didalam lalu lintas jaringan internet yang sangat banyak, data akan mengalir terus sampai tujuan. Selama dalam perjalanan, data tersebut akan di enkripsi untuk mencegah pihak ketiga atau orang-orang yang tidak bertanggung jawab mengambil data tersebut.

Berikut Situs yang Sering Digunakan Encrypt Dan Contoh kode yang Belum di Encrypt & Sesudah Di Encrypt.

1. Javascript Obfuscator
2. dean.edwards.name
3. Hex Encode

Contoh Kode javascript original

var encodedStr = 'hello & world';
var parser = new DOMParser;
var dom = parser.parseFromString(
    '' + encodedStr,
    'text/html');
var decodedString = dom.body.textContent;
console.log(decodedString);

1. Hasil Encrypt dari Javascript Obfuscator

var _0x8393=["\x68\x65\x6C\x6C\x6F\x20\x26\x61\x6D\x70\x3B\x20\x77\x6F\x72\x6C\x64","\x3C\x21\x64\x6F\x63\x74\x79\x70\x65\x20\x68\x74\x6D\x6C\x3E\x3C\x62\x6F\x64\x79\x3E","\x74\x65\x78\x74\x2F\x68\x74\x6D\x6C","\x70\x61\x72\x73\x65\x46\x72\x6F\x6D\x53\x74\x72\x69\x6E\x67","\x74\x65\x78\x74\x43\x6F\x6E\x74\x65\x6E\x74","\x62\x6F\x64\x79","\x6C\x6F\x67"];var encodedStr=_0x8393[0];var parser= new DOMParser;var dom=parser[_0x8393[3]](_0x8393[1]+ encodedStr,_0x8393[2]);var decodedString=dom[_0x8393[5]][_0x8393[4]];console[_0x8393[6]](decodedString)

2. Hasil Encrypt dari dean.edwards.name

eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('0 1=\'7 &8; 9\';0 2=a b;0 3=2.c(\'<5>\'+1,\'e/4\');0 6=3.5.f;g.h(6);',18,18,'var|encodedStr|parser|dom|html|body|decodedString|hello|amp|world|new|DOMParser|parseFromString|doctype|text|textContent|console|log'.split('|'),0,{}))

3. Hasil Encrypt dari Hex Encode {pilih tab hex Js}

\x76\x61\x72\x20\x65\x6e\x63\x6f\x64\x65\x64\x53\x74\x72\x20\x3d\x20\x27\x68\x65\x6c\x6c\x6f\x20\x26\x61\x6d\x70\x3b\x20\x77\x6f\x72\x6c\x64\x27\x3b\xa\x76\x61\x72\x20\x70\x61\x72\x73\x65\x72\x20\x3d\x20\x6e\x65\x77\x20\x44\x4f\x4d\x50\x61\x72\x73\x65\x72\x3b\xa\x76\x61\x72\x20\x64\x6f\x6d\x20\x3d\x20\x70\x61\x72\x73\x65\x72\x2e\x70\x61\x72\x73\x65\x46\x72\x6f\x6d\x53\x74\x72\x69\x6e\x67\x28\xa\x20\x20\x20\x20\x27\x3c\x21\x64\x6f\x63\x74\x79\x70\x65\x20\x68\x74\x6d\x6c\x3e\x3c\x62\x6f\x64\x79\x3e\x27\x20\x2b\x20\x65\x6e\x63\x6f\x64\x65\x64\x53\x74\x72\x2c\xa\x20\x20\x20\x20\x27\x74\x65\x78\x74\x2f\x68\x74\x6d\x6c\x27\x29\x3b\xa\x76\x61\x72\x20\x64\x65\x63\x6f\x64\x65\x64\x53\x74\x72\x69\x6e\x67\x20\x3d\x20\x64\x6f\x6d\x2e\x62\x6f\x64\x79\x2e\x74\x65\x78\x74\x43\x6f\x6e\x74\x65\x6e\x74\x3b\xa\x63\x6f\x6e\x73\x6f\x6c\x65\x2e\x6c\x6f\x67\x28\x64\x65\x63\x6f\x64\x65\x64\x53\x74\x72\x69\x6e\x67\x29\x3b

II. Pengertian Decrypt

Decrypt atau dekripsi adalah suatu metode yang digunakan untuk mengubah atau menerjemahkan file rahasia yang dienkripsi menjadi pesan asli. Dekripsi ini kebalikan dari enkripsi, kita tahu bahwa enkripsi itu untuk membuat file menjadi rahasia sementara dekripsi ini untuk membuka file rahasia tersebut.

Berikut Situs yang Sering Digunakan Decrypt untuk membuka kode yang sudah Di Encrypt

1. Dedecode.com
2. dean Unpacker atau Matthewfl.com
3. d4js

III. Beautifier.io {penyempurnaan kode}

Masuk ke websitenya Beautifier.io jika ada kode yang belum sempurna setelah decryption copykan kode di situs ini untuk menyempurnakannya.

IV. esprima.org {Validasi Script}

Masuk ke websitenya esprima, paste-kan kode script dari langkah terakhir. Ini langkah tambahan aja, untuk memastikan apakah script yang di Decrypt tadi sudah benar atau belum.

Fajar Djoekerz

Membuat Encrypt Javascript di Blog

Membuat Encrypt Javascript di Blog

Tools

Pernahkah Sobat melihat kode javascript yang sulit untuk dibaca? Bisa jadi kode tersebut telah ter-enkripsi dengan alasan untuk melindungi privasi kode itu sendiri. Misalnya kode javascript dari sebuah template trial sehingga tidak bisa diganti dengan nama kita sendiri di bagian Copyright, pastinya kodenya sengaja di-enkripsi supaya tidak dapat dialihkan oleh orang lain.

Seperti yang kita ketahui enkripsi dalam dunia komputer atau dunia teknologi informasi berfungsi untuk melakukan pengacakan teks guna meningkatkan security dalam suatu program atau aplikasi.

Dengan adanya enkripsi maka teks, link dan skript yang seharusnya dapat terbaca bisa diamankan dan hanya orang orang tertentu saja yang dapat mengaksesnya. Dalam hal ini saya membuat tool enkripsi Responsive yang bisa dipakai di blog.

Berikut contoh sebelum dan sesudah di encrypt. 

Cara Memasang Tool Encrypt Javascript Unescape di Halaman Statis Blogger 

1. Buka Blogger > Buat postingan baru di halaman statis > Kemudian tambahkan kode di bawah ini di tab HTML (Bukan Compose). 

<div id="cssencp"><style scoped="" type="text/css">
#outer-wrapper{margin:0 auto;text-align:left;float:none;background-position:center!important}
#post-wrapper{width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important}
.post-body,.post{background-position:center!important}
.post-body p{margin:0}
#blog1,#artikel,.blog-posts{background-position:center!important}
#comments{display:none;margin-top:0;margin:0}
#main-wrapper{padding:0;width:100%;border:0}
#cssencp{position:relative;display:block;clear:both;border-radius:8px;border:1px solid rgba(0,0,0,0.05);transition:all .6s}
#cssencp:hover{border-color:rgba(0,0,0,0.1)}
#cssencp textarea{width:100%;outline:none;height:240px;margin:0 auto;display:block;padding:20px;font-family:Monospace;font-size:13px;border:0;border-radius:8px 8px 0 0;resize:none}
textarea:focus{background-color:#fff;color:#303030}
#cssencp .box{margin:10px auto 30px;color:#fff;font-size:90%}
#cssencp .box p{margin:0 0 2px}
#cssencp button{cursor:pointer}
#cssencp .col{width:48%;margin:0 auto 30px}
#cssencp .left{float:left;margin-left:1%}
#cssencp .right{float:right;margin-right:1%}
#cssencp .button-group{float:none;background:#ff4169;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-size:130%;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 8px 8px}
#cssencp button,#cssencp button[disabled]:active{outline:none;background:rgba(255,255,255,.25);text-align:center;color:#fff;display:inline-block;padding:8px 16px;font-size:13px;font-weight:400;line-height:1.471;border-radius:99em;margin:0 5px;border:0;box-shadow:0 2px 6px -4px rgba(0,0,0,0.05);transition:all .3s}
#cssencp button:hover,#cssencp button:active{background:rgba(255,255,255,.5);color:#fff}
#cssencp button[disabled],#cssencp button[disabled]:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
#cssencp .opt1,#cssencp .opt2,#cssencp .opt3,#cssencp .opt4,#cssencp .opt5{display:inline-block;margin:0 3px 0 10px;vertical-align:middle;border:none;outline:none}
#cssencp br{display:none}
.option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;transition:all 0.15s ease-out 0s;background:rgba(255,255,255,.3);border:0;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;position:relative;padding:0;border-radius:99em}
.option-input:hover{background:rgba(255,255,255,.3)}
.option-input:checked{background:rgba(0,0,0,.2);animation:rubberBand 1s}
.option-input:checked::before{height:16px;width:16px;position:absolute;content:'\f00c';font-family:fontawesome;display:inline-block;font-size:12.66667px;text-align:center;line-height:16px}
.option-input:checked::after{-webkit-animation:click-wave 0.65s;-moz-animation:click-wave 0.65s;animation:click-wave 0.65s;background:#40e0d0;content:'';display:block;position:relative;z-index:100}
.option-input.radio{border-radius:50%}
.option-input.radio::after{border-radius:50%}
.Night #cssencp textarea{background:#33475c;color:#fff}
.Night #cssencp textarea::placeholder{color:#fff}
.Night #cssencp .button-group{background:#1c2733;color:rgba(255,255,255,.7)}
.Night #cssencp button,.Night #cssencp button[disabled]:active{background:#33475c;color:#fff}
.Night #cssencp button:hover,.Night #cssencp button:active{background:#415a74;color:#fff}
</style><br />
<span class="clear"></span><br />
<form name="pageform" onsubmit="return doencrypt(this);">
<textarea autofocus="" id="input-text" cols="38" name="code" rows="11" placeholder="Paste your Script code here..." spellcheck="false"></textarea><br />
  <hr/>
<textarea autofocus="" id="opt-text" cols="38" readonly="readonly" name="ecode" rows="11" placeholder="Output your Encrypt code here..." spellcheck="false"></textarea><br />
<div class="button-group"><div class="box">
<button onclick="doencrypt(pageform);" type="submit">Encrypt </button><br />
<button onclick="javascript:eraseText();" type="button" >Clear</button><br />
<button name="sac" onclick="sandc(pageform);" type="button">Select All</button><br />
<button onclick="copy_text()">Copy</button><br />
</div><div class="clear"></div>
<div>By <a class='setid' href='https://fajardjoekerz.blogspot.com/' id='setid' title='Fajardjoekerz'>Fajardjoekerz</a></div></div>
<script src='https://cdn.jsdelivr.net/gh/Fajardjoekerz/djoekerz@fbe89d9819707f2fd49454c3eb0010ebb9eef958/encrypt.js' type='text/javascript'/>

Code javascript atau link yang sudah di encrypt bisa diletakkan di tag sebelum </head> atau bisa juga sebelum </body>

Sesuaikan kembali tampilan lewat kode CSS di atas sesuai keinginan.

2. Publish postingan dan lihat hasilnya.

Demo Click here

Fajar Djoekerz

Membuat Color Picker di Blog

Membuat Color Picker di Blog

Tools

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

Fajar Djoekerz

Membuat Parse Unparse HTML Responsive

Membuat Parse Unparse HTML Responsive

Tools

Cara Membuat Tools Parse HTML Responsif di Blogger - 

Bagi seorang Blogger, kehadiran tools parse dinilai sangat bermanfaat sekali khususnya untuk membantu penyisipan kode script HTML didalam postingan atau artikel pada sebuah situs.

Apa Itu Parse HTML ?

Parse HTML adalah sebuah tools yang digunakan untuk menguraikan atau menkonversikan sebuah kode HTML menjadi entitas HTML secara otomatis dengan tujuan agar kode tetap dapat ditampilkan secara lengkap tanpa menghilangkan salah satu elemen kode script HTML yang akan menyisipkan kode script dalam sebuah artikel karena dapat mencegah terjadinya error atau kesalahan yang dapat menyebabkan beberapa kode tidak dapat ditampilkan.Berikut ini adalah contoh kode HTML yang akan berubah ketika diurai atau di Parse menggunakan tool parse HTML:

• Kode < akan berubah menjadi &lt;
• Kode > akan berubah menjadi &gt;
• Kode " akan berubah menjadi &quot;
• Kode ' akan berubah menjadi &#039;
• Kode & akan berubah menjadi &amp;

 

Meskipun keberadaan tools parse ini dianggap bermanfaat bagi sebagian Blogger. Namun pada kenyataannya banyak situs yang belum dilengkapi oleh tools parse, bahkan sangat jarang kita menemui tools yang satu ini pada setiap kali kita mengunjungi sebuah situs.

Mungkin saja mereka para Blogger lebih memilih untuk menggunakan tools parse yang terdapat pada situs lain karena dinilai tidak ribet.

Entah apa alasannya, padahal sebenarnya kita dapat dengan mudah membuat tools parse pada situs kita sendiri sehingga kita tidak perlu repot mencari-cari tools parse pada situs lain. 

Contoh sebelum & Sesudah di Parse

Cara Memasang Tool CSS Minifier di Halaman Statis Blogger 

1. Buka Blogger > Buat postingan baru di halaman statis > Kemudian tambahkan kode di bawah ini di tab HTML (Bukan Compose). 

<div id="cssparse"><style scoped="" type="text/css">
#outer-wrapper{margin:0 auto;text-align:left;float:none;background-position:center!important}
#post-wrapper{width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important}
.post-body,.post{background-position:center!important}
.post-body p{margin:0}
#blog1,#artikel,.blog-posts{background-position:center!important}
#comments{display:none;margin-top:0;margin:0}
#main-wrapper{padding:0;width:100%;border:0}
#cssparse{position:relative;display:block;clear:both;border-radius:8px;border:1px solid rgba(0,0,0,0.05);transition:all .6s}
#cssparse:hover{border-color:rgba(0,0,0,0.1)}
#cssparse textarea{width:100%;outline:none;height:240px;margin:0 auto;display:block;padding:20px;font-family:Monospace;font-size:13px;border:0;border-radius:8px 8px 0 0;resize:none}
textarea:focus{background-color:#fff;color:#303030}
#cssparse .box{margin:10px auto 30px;color:#fff;font-size:90%}
#cssparse .box p{margin:0 0 2px}
#cssparse button{cursor:pointer}
#cssparse .col{width:48%;margin:0 auto 30px}
#cssparse .left{float:left;margin-left:1%}
#cssparse .right{float:right;margin-right:1%}
#cssparse .button-group{float:none;background:#ff4169;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-size:130%;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 8px 8px}
#cssparse button,#cssparse button[disabled]:active{outline:none;background:rgba(255,255,255,.25);text-align:center;color:#fff;display:inline-block;padding:8px 16px;font-size:13px;font-weight:400;line-height:1.471;border-radius:99em;margin:0 5px;border:0;box-shadow:0 2px 6px -4px rgba(0,0,0,0.05);transition:all .3s}
#cssparse button:hover,#cssparse button:active{background:rgba(255,255,255,.5);color:#fff}
#cssparse button[disabled],#cssparse button[disabled]:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
#cssparse .opt1,#cssparse .opt2,#cssparse .opt3,#cssparse .opt4,#cssparse .opt5{display:inline-block;margin:0 3px 0 10px;vertical-align:middle;border:none;outline:none}
#cssparse br{display:none}
.option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;transition:all 0.15s ease-out 0s;background:rgba(255,255,255,.3);border:0;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;position:relative;padding:0;border-radius:99em}
.option-input:hover{background:rgba(255,255,255,.3)}
.option-input:checked{background:rgba(0,0,0,.2);animation:rubberBand 1s}
.option-input:checked::before{height:16px;width:16px;position:absolute;content:'\f00c';font-family:fontawesome;display:inline-block;font-size:12.66667px;text-align:center;line-height:16px}
.option-input:checked::after{-webkit-animation:click-wave 0.65s;-moz-animation:click-wave 0.65s;animation:click-wave 0.65s;background:#40e0d0;content:'';display:block;position:relative;z-index:100}
.option-input.radio{border-radius:50%}
.option-input.radio::after{border-radius:50%}
.Night #cssparse textarea{background:#33475c;color:#fff}
.Night #cssparse textarea::placeholder{color:#fff}
.Night #cssparse .button-group{background:#1c2733;color:rgba(255,255,255,.7)}
.Night #cssparse button,.Night #cssparse button[disabled]:active{background:#33475c;color:#fff}
.Night #cssparse button:hover,.Night #cssparse button:active{background:#415a74;color:#fff}
</style><br />
<span class="clear"></span><br />
<textarea autofocus="" id="fieldarea2" placeholder="Paste your HTML or CSS code here..." spellcheck="false"></textarea><br />
<hr/>
<textarea autofocus="" id="fieldareabuttom" placeholder="Output your HTML or CSS code here..." spellcheck="false"></textarea><br />
<div class="button-group"><div class="box">
<button id="Parseon-html" onclick="convert();" type="button">Parse</button><br />
<button id="Parseoff-html" onclick="convert();" type="button">Unparse</button><br />
<button onclick="document.getElementById('fieldarea2').value = '',document.getElementById('fieldareabuttom').value = ''" type="button">Clear</button><br />
<button onclick="cpO()" type="button">Copy</button><br />
</div><div class="clear"></div>
<div>By <a class='setid' href='https://fajardjoekerz.blogspot.com/' id='setid' title='Fajardjoekerz'>Fajardjoekerz</a></div></div>
<script src='https://cdn.jsdelivr.net/gh/Fajardjoekerz/djoekerz@2c38fc6144c43cd0d85ac6b8d65396eb1e20c3e7/parseunparse.js' type='text/javascript'/>

Sesuaikan kembali tampilan lewat kode CSS di atas sesuai keinginan. 

2. Publish postingan dan lihat hasilnya.

Demo Click here

Fajar Djoekerz