Membuat tools schema warna html di blogger

Ar-rahim 🇵🇸

Diperbarui: 12 Nov, 2024 • 0 • menit membaca

Daftar Isi

Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat tools schema warna HTML di blogger

Info: Jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Schema warna HTML

Schema warna HTML merupakan suatu kumpulan warna khusus HTML, yang bisa di pilih dengan di klik agar bisa memperoleh kode warna dari schema color HTML tersebut, sedangakan tampilan schema warna HTML di buat menggunakan kode CSS, HTML, dan juga Javascript

Contoh Tampilan

Jika kamu penasaran dengan contoh tampilan dari schema warna HTML generator di blogger, silahkan periksa dan lihat dengan menggunakan tombol di bawah ini ok

Periksa

Info: Cara penggunaan nya adalah pilih schema warna yang di inginkan, kemudian kode warna akan muncul di bagian bawah

Cara pembuatan

Baiklah sobat ICloudzer sekarang saatnya admin bakalan menjabarkan mengenai cara membuat schema warna HTMl generator di blogger, silahkan baca dan ikuti setiap arahan yang admin jabarkan di bawah ini ok

Silahkan login ke blogger, menggunakan akun google milikmu
Kemudian pergi ke menu Halaman atau Page dalam bahasa Inggrisnya
Selanjutnya buat halaman baru dan berikan judul Schema warna HTML atau terserah anda saja
Selanjutnya salin seluruh kode di bawah ini, kemudian letakkan di dalam halaman yang kamu buat sebelumnya

<div class='rahcolorWrp'>
<div class='rahcolorCn'>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
</div>
<div class='rahcolorCn'>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
</div>
<div class='rahcolorCn'>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
</div>
<div class='rahcolorCn'>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
</div>
<div class='rahcolorCn'>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
</div>
<div class='rahcolorCn'>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
</div>
<div class='rahcolorCn'>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
</div>
<div class='rahcolorCn'>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
<div class='color'></div>
</div>
<div class='rahcolorHsl'></div>
<div>
<style>
:root{
--rahlinkC:#DE3535;
}
.rahcolorWrp {
display: flex;
gap: 20px;
flex-wrap: wrap;
place-content: center;
place-items: center;
min-height: 100vh;
padding: 20px;
}
.rahcolorHsl {
color: #fff;
font-size: 1.5em;
text-align: center;
height: auto;
margin-top: 0.5em;
width: 100%;
background:var(--rahlinkC);
padding:14px;
}

.rahcolorCn {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
max-width: 90%;
width: 300px;
}

.color {
cursor: pointer;
flex: 1 1 10px;
height: 150px;
font-size: 0.8rem;
overflow: hidden;
position: relative;
text-align: center;
}
.color::before {
background: rgba(255, 255, 255, 0.5);
padding: 0.5em 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
}

.rahcolorCn:nth-child(1) .color:nth-child(1) {
background: #db9aa3;
}
.rahcolorCn:nth-child(1) .color:nth-child(1)::before {
content: '#db9aa3';
}
.rahcolorCn:nth-child(1) .color:nth-child(2) {
background: #a5819b;
}
.rahcolorCn:nth-child(1) .color:nth-child(2)::before {
content: '#a5819b';
}
.rahcolorCn:nth-child(1) .color:nth-child(3) {
background: #6f6a82;
}
.rahcolorCn:nth-child(1) .color:nth-child(3)::before {
content: '#6f6a82';
}
.rahcolorCn:nth-child(1) .color:nth-child(4) {
background: #718eaf;
}
.rahcolorCn:nth-child(1) .color:nth-child(4)::before {
content: '#718eaf';
}
.rahcolorCn:nth-child(1) .color:nth-child(5) {
background: #66b6cf;
}
.rahcolorCn:nth-child(1) .color:nth-child(5)::before {
content: '#66b6cf';
}
.rahcolorCn:nth-child(1) .color:nth-child(6) {
background: #72ddd8;
}
.rahcolorCn:nth-child(1) .color:nth-child(6)::before {
content: '#72ddd8';
}
.rahcolorCn:nth-child(1) .color:nth-child(7) {
background: #abffcf;
}
.rahcolorCn:nth-child(1) .color:nth-child(7)::before {
content: '#abffcf';
}
.rahcolorCn:nth-child(1) .color:nth-child(8) {
background: #feffc4;
}
.rahcolorCn:nth-child(1) .color:nth-child(8)::before {
content: '#feffc4';
}
.rahcolorCn:nth-child(1) .color:nth-child(9) {
background: #f6d3af;
}
.rahcolorCn:nth-child(1) .color:nth-child(9)::before {
content: '#f6d3af';
}

.rahcolorCn:nth-child(2) .color:nth-child(1) {
background: #36663b;
}
.rahcolorCn:nth-child(2) .color:nth-child(1)::before {
content: '#36663b';
}
.rahcolorCn:nth-child(2) .color:nth-child(2) {
background: #404217;
}
.rahcolorCn:nth-child(2) .color:nth-child(2)::before {
content: '#404217';
}
.rahcolorCn:nth-child(2) .color:nth-child(3) {
background: #352106;
}
.rahcolorCn:nth-child(2) .color:nth-child(3)::before {
content: '#352106';
}
.rahcolorCn:nth-child(2) .color:nth-child(4) {
background: #210000;
}
.rahcolorCn:nth-child(2) .color:nth-child(4)::before {
content: '#210000';
}
.rahcolorCn:nth-child(2) .color:nth-child(5) {
background: black;
}
.rahcolorCn:nth-child(2) .color:nth-child(5)::before {
content: 'black';
}
.rahcolorCn:nth-child(2) .color:nth-child(6) {
background: black;
}
.rahcolorCn:nth-child(2) .color:nth-child(6)::before {
content: 'black';
}
.rahcolorCn:nth-child(2) .color:nth-child(7) {
background: black;
}
.rahcolorCn:nth-child(2) .color:nth-child(7)::before {
content: 'black';
}
.rahcolorCn:nth-child(2) .color:nth-child(8) {
background: black;
}
.rahcolorCn:nth-child(2) .color:nth-child(8)::before {
content: 'black';
}
.rahcolorCn:nth-child(2) .color:nth-child(9) {
background: black;
}
.rahcolorCn:nth-child(2) .color:nth-child(9)::before {
content: 'black';
}

.rahcolorCn:nth-child(3) .color:nth-child(1) {
background: #c86b93;
}
.rahcolorCn:nth-child(3) .color:nth-child(1)::before {
content: '#c86b93';
}
.rahcolorCn:nth-child(3) .color:nth-child(2) {
background: #7e5b93;
}
.rahcolorCn:nth-child(3) .color:nth-child(2)::before {
content: '#7e5b93';
}
.rahcolorCn:nth-child(3) .color:nth-child(3) {
background: #5a8ad1;
}
.rahcolorCn:nth-child(3) .color:nth-child(3)::before {
content: '#5a8ad1';
}
.rahcolorCn:nth-child(3) .color:nth-child(4) {
background: #00baf4;
}
.rahcolorCn:nth-child(3) .color:nth-child(4)::before {
content: '#00baf4';
}
.rahcolorCn:nth-child(3) .color:nth-child(5) {
background: #00e8f8;
}
.rahcolorCn:nth-child(3) .color:nth-child(5)::before {
content: '#00e8f8';
}
.rahcolorCn:nth-child(3) .color:nth-child(6) {
background: #7affe2;
}
.rahcolorCn:nth-child(3) .color:nth-child(6)::before {
content: '#7affe2';
}
.rahcolorCn:nth-child(3) .color:nth-child(7) {
background: #d8ffca;
}
.rahcolorCn:nth-child(3) .color:nth-child(7)::before {
content: '#d8ffca';
}
.rahcolorCn:nth-child(3) .color:nth-child(8) {
background: #dbd0a3;
}
.rahcolorCn:nth-child(3) .color:nth-child(8)::before {
content: '#dbd0a3';
}
.rahcolorCn:nth-child(3) .color:nth-child(9) {
background: #c7a692;
}
.rahcolorCn:nth-child(3) .color:nth-child(9)::before {
content: '#c7a692';
}

.rahcolorCn:nth-child(4) .color:nth-child(1) {
background: #0069bf;
}
.rahcolorCn:nth-child(4) .color:nth-child(1)::before {
content: '#0069bf';
}
.rahcolorCn:nth-child(4) .color:nth-child(2) {
background: #0078cd;
}
.rahcolorCn:nth-child(4) .color:nth-child(2)::before {
content: '#0078cd';
}
.rahcolorCn:nth-child(4) .color:nth-child(3) {
background: #0087da;
}
.rahcolorCn:nth-child(4) .color:nth-child(3)::before {
content: '#0087da';
}
.rahcolorCn:nth-child(4) .color:nth-child(4) {
background: #0096e6;
}
.rahcolorCn:nth-child(4) .color:nth-child(4)::before {
content: '#0096e6';
}
.rahcolorCn:nth-child(4) .color:nth-child(5) {
background: #00a5f1;
}
.rahcolorCn:nth-child(4) .color:nth-child(5)::before {
content: '#00a5f1';
}
.rahcolorCn:nth-child(4) .color:nth-child(6) {
background: #00b3fa;
}
.rahcolorCn:nth-child(4) .color:nth-child(6)::before {
content: '#00b3fa';
}
.rahcolorCn:nth-child(4) .color:nth-child(7) {
background: #00c1ff;
}
.rahcolorCn:nth-child(4) .color:nth-child(7)::before {
content: '#00c1ff';
}
.rahcolorCn:nth-child(4) .color:nth-child(8) {
background: #00cfff;
}
.rahcolorCn:nth-child(4) .color:nth-child(8)::before {
content: '#00cfff';
}
.rahcolorCn:nth-child(4) .color:nth-child(9) {
background: #00dcff;
}
.rahcolorCn:nth-child(4) .color:nth-child(9)::before {
content: '#00dcff';
}

.rahcolorCn:nth-child(5) .color:nth-child(1) {
background: #71598c;
}
.rahcolorCn:nth-child(5) .color:nth-child(1)::before {
content: '#71598c';
}
.rahcolorCn:nth-child(5) .color:nth-child(2) {
background: #555383;
}
.rahcolorCn:nth-child(5) .color:nth-child(2)::before {
content: '#555383';
}
.rahcolorCn:nth-child(5) .color:nth-child(3) {
background: #4b6297;
}
.rahcolorCn:nth-child(5) .color:nth-child(3)::before {
content: '#4b6297';
}
.rahcolorCn:nth-child(5) .color:nth-child(4) {
background: #3872a8;
}
.rahcolorCn:nth-child(5) .color:nth-child(4)::before {
content: '#3872a8';
}
.rahcolorCn:nth-child(5) .color:nth-child(5) {
background: #0d82b6;
}
.rahcolorCn:nth-child(5) .color:nth-child(5)::before {
content: '#0d82b6';
}
.rahcolorCn:nth-child(5) .color:nth-child(6) {
background: #0092c0;
}
.rahcolorCn:nth-child(5) .color:nth-child(6)::before {
content: '#0092c0';
}
.rahcolorCn:nth-child(5) .color:nth-child(7) {
background: #00a2c7;
}
.rahcolorCn:nth-child(5) .color:nth-child(7)::before {
content: '#00a2c7';
}
.rahcolorCn:nth-child(5) .color:nth-child(8) {
background: #00b2cb;
}
.rahcolorCn:nth-child(5) .color:nth-child(8)::before {
content: '#00b2cb';
}
.rahcolorCn:nth-child(5) .color:nth-child(9) {
background: #05c1cc;
}
.rahcolorCn:nth-child(5) .color:nth-child(9)::before {
content: '#05c1cc';
}

.rahcolorCn:nth-child(6) .color:nth-child(1) {
background: #fb5475;
}
.rahcolorCn:nth-child(6) .color:nth-child(1)::before {
content: '#fb5475';
}
.rahcolorCn:nth-child(6) .color:nth-child(2) {
background: #ff9243;
}
.rahcolorCn:nth-child(6) .color:nth-child(2)::before {
content: '#ff9243';
}
.rahcolorCn:nth-child(6) .color:nth-child(3) {
background: #e5d539;
}
.rahcolorCn:nth-child(6) .color:nth-child(3)::before {
content: '#e5d539';
}
.rahcolorCn:nth-child(6) .color:nth-child(4) {
background: #5fc357;
}
.rahcolorCn:nth-child(6) .color:nth-child(4)::before {
content: '#5fc357';
}
.rahcolorCn:nth-child(6) .color:nth-child(5) {
background: #00a386;
}
.rahcolorCn:nth-child(6) .color:nth-child(5)::before {
content: '#00a386';
}
.rahcolorCn:nth-child(6) .color:nth-child(6) {
background: #007d8f;
}
.rahcolorCn:nth-child(6) .color:nth-child(6)::before {
content: '#007d8f';
}
.rahcolorCn:nth-child(6) .color:nth-child(7) {
background: #2d5573;
}
.rahcolorCn:nth-child(6) .color:nth-child(7)::before {
content: '#2d5573';
}
.rahcolorCn:nth-child(6) .color:nth-child(8) {
background: #736c9c;
}
.rahcolorCn:nth-child(6) .color:nth-child(8)::before {
content: '#736c9c';
}
.rahcolorCn:nth-child(6) .color:nth-child(9) {
background: #c27fab;
}
.rahcolorCn:nth-child(6) .color:nth-child(9)::before {
content: '#c27fab';
}

.rahcolorCn:nth-child(7) .color:nth-child(1) {
background: #007836;
}
.rahcolorCn:nth-child(7) .color:nth-child(1)::before {
content: '#007836';
}
.rahcolorCn:nth-child(7) .color:nth-child(2) {
background: #484000;
}
.rahcolorCn:nth-child(7) .color:nth-child(2)::before {
content: '#484000';
}
.rahcolorCn:nth-child(7) .color:nth-child(3) {
background: #380d00;
}
.rahcolorCn:nth-child(7) .color:nth-child(3)::before {
content: '#380d00';
}
.rahcolorCn:nth-child(7) .color:nth-child(4) {
background: #0d0000;
}
.rahcolorCn:nth-child(7) .color:nth-child(4)::before {
content: '#0d0000';
}
.rahcolorCn:nth-child(7) .color:nth-child(5) {
background: black;
}
.rahcolorCn:nth-child(7) .color:nth-child(5)::before {
content: 'black';
}
.rahcolorCn:nth-child(7) .color:nth-child(6) {
background: black;
}
.rahcolorCn:nth-child(7) .color:nth-child(6)::before {
content: 'black';
}
.rahcolorCn:nth-child(7) .color:nth-child(7) {
background: black;
}
.rahcolorCn:nth-child(7) .color:nth-child(7)::before {
content: 'black';
}
.rahcolorCn:nth-child(7) .color:nth-child(8) {
background: black;
}
.rahcolorCn:nth-child(7) .color:nth-child(8)::before {
content: 'black';
}
.rahcolorCn:nth-child(7) .color:nth-child(9) {
background: black;
}
.rahcolorCn:nth-child(7) .color:nth-child(9)::before {
content: 'black';
}

.rahcolorCn:nth-child(8) .color:nth-child(1) {
background: #a376ff;
}
.rahcolorCn:nth-child(8) .color:nth-child(1)::before {
content: '#a376ff';
}
.rahcolorCn:nth-child(8) .color:nth-child(2) {
background: #e66ef6;
}
.rahcolorCn:nth-child(8) .color:nth-child(2)::before {
content: '#e66ef6';
}
.rahcolorCn:nth-child(8) .color:nth-child(3) {
background: #ff67e2;
}
.rahcolorCn:nth-child(8) .color:nth-child(3)::before {
content: '#ff67e2';
}
.rahcolorCn:nth-child(8) .color:nth-child(4) {
background: #ff65cb;
}
.rahcolorCn:nth-child(8) .color:nth-child(4)::before {
content: '#ff65cb';
}
.rahcolorCn:nth-child(8) .color:nth-child(5) {
background: #ff69b6;
}
.rahcolorCn:nth-child(8) .color:nth-child(5)::before {
content: '#ff69b6';
}
.rahcolorCn:nth-child(8) .color:nth-child(6) {
background: #ff72a3;
}
.rahcolorCn:nth-child(8) .color:nth-child(6)::before {
content: '#ff72a3';
}
.rahcolorCn:nth-child(8) .color:nth-child(7) {
background: #ff8092;
}
.rahcolorCn:nth-child(8) .color:nth-child(7)::before {
content: '#ff8092';
}
.rahcolorCn:nth-child(8) .color:nth-child(8) {
background: #ff9285;
}
.rahcolorCn:nth-child(8) .color:nth-child(8)::before {
content: '#ff9285';
}
.rahcolorCn:nth-child(8) .color:nth-child(9) {
background: #ffa77c;
}
.rahcolorCn:nth-child(8) .color:nth-child(9)::before {
content: '#ffa77c';
}</style>
<script>/*<![CDATA[*/
var _0x97fb=["\x2E\x63\x6F\x6C\x6F\x72","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72\x41\x6C\x6C","\x2E\x72\x61\x68\x63\x6F\x6C\x6F\x72\x48\x73\x6C","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x22","","\x72\x65\x70\x6C\x61\x63\x65\x41\x6C\x6C","\x63\x6F\x6E\x74\x65\x6E\x74","\x67\x65\x74\x50\x72\x6F\x70\x65\x72\x74\x79\x56\x61\x6C\x75\x65","\x3A\x62\x65\x66\x6F\x72\x65","\x6D\x6F\x75\x73\x65\x65\x6E\x74\x65\x72","\x74\x65\x78\x74\x43\x6F\x6E\x74\x65\x6E\x74","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x63\x6C\x69\x63\x6B","\x6C\x6F\x67","\x66\x6F\x72\x45\x61\x63\x68"];let colors=document[_0x97fb[1]](_0x97fb[0]);let colorNote=document[_0x97fb[3]](_0x97fb[2]);colors[_0x97fb[15]]((_0xaac8x3)=>{let _0xaac8x4=getComputedStyle(_0xaac8x3,_0x97fb[9])[_0x97fb[8]](_0x97fb[7])[_0x97fb[6]](_0x97fb[4],_0x97fb[5]);_0xaac8x3[_0x97fb[12]](_0x97fb[10],()=>{colorNote[_0x97fb[11]]= _0xaac8x4});_0xaac8x3[_0x97fb[12]](_0x97fb[13],()=>{console[_0x97fb[14]](_0xaac8x4)})})
/*]]>*/</script>

Info: Setiap kode di atas telah di sesuaikan, nah jangan mengubah kode apapun entar tampilan schema warna HTML nya tidak berfungsi lagi

Jika sudah silahkan publish halaman tersebut, dan lihat bagaimana hasilnya

Ar-rahim 🇵🇸 Keindahanmu akan kuabadikan disetiap karyaku.

ICloudice.com

Membuat tools schema warna html di blogger

Schema warna HTML

Contoh Tampilan

Cara pembuatan

Posting Komentar