Code html warna / html color
code warna
Jika kalian ingin pasang di blog sendiri berikut codenya
<amp-iframe allowfullscreen="" allowtransparency="" frameborder="0" height="1100" layout="fixed-height" sandbox="allow-scripts allow-same-origin" src="https://cdn.rawgit.com/cenggini/code-collor/master/warna.html?height=1000&theme-id=47&default-tab=result&embed-version=3"></amp-iframe> <div class="amp-wp-iframe-placeholder" placeholder="">
Jika kalian pengin menghosting sendiri di bawah ini code mentahnya kalian bisa hosting di github
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Codigo de colores</title>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
iframe{border:0}
.clearfix:after,.container:after,.row:after{clear:both}
.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.row{margin-right:-15px;margin-left:-15px}
.color-wrap{position:relative;clear:both;left:0;width:100%;z-index:500}.color-picker{width:20%;padding-bottom:18%;color:#FFF;position:relative;float:left;top:0;bottom:0}.color-item{position:absolute;margin:0;left:0;right:0;top:0;bottom:0;text-align:center;text-transform:uppercase;padding:35%}.color-item:hover{display:inline;z-index:999;overflow:hidden;cursor:pointer;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-box-shadow:5px 5px 5px 5px rgba(0,0,0,.2);-moz-box-shadow:5px 5px 5px 5px rgba(0,0,0,.2);box-shadow:5px 5px 5px 5px rgba(0,0,0,.2)}@media only screen and (min-width:768px) and (max-width:959px){.color-picker{width:50%;color:#FFF}.color-item{padding:8%;font-size:.875em}.color-name,.hex-number{position:relative;line-height:22px;text-align:center}}@media only screen and (max-width:767px){.color-picker{width:50%;color:#FFF}.color-item{padding:8%;font-size:.75em}{.color-item{padding:5%;font-size:.75em}.color-name,.hex-number{position:relative;line-height:22px;text-align:center}}@media only screen and (min-width:480px) and (max-width:767px).color-picker{width:100%;color:#FFF}.color-name,.hex-number{position:relative;line-height:12px;text-align:center}}.blank{display:none}@media (max-width:768px){.blank{display:block;height:15px}}
</style>
</head>
<body>
<div class="col-md-12">
<div class="container">
<div class="row">
<div class="color-wrap clearfix">
<div class="color-picker">
<div class="color-item" style="background-color:#C91F37;">
<span class="color-name">Foreign crimson</span><br>
<span class="hex-number">#C91F37</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#DC3023;">
<span class="color-name">Red orange</span><br>
<span class="hex-number">#DC3023</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#9D2933;">
<span class="color-name">Cochineal red</span><br>
<span class="hex-number">#9D2933</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#CF000F;">
<span class="color-name">Monza</span><br>
<span class="hex-number">#CF000F</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#E68364;">
<span class="color-name">Brewed mustard-brown</span><br>
<span class="hex-number">#E68364</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F22613;">
<span class="color-name">Pomegranate</span><br>
<span class="hex-number">#F22613</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#CF3A24;">
<span class="color-name">Scarlet</span><br>
<span class="hex-number">#CF3A24</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#C3272B;">
<span class="color-name">Pure crimson</span><br>
<span class="hex-number">#C3272B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #8F1D21;">
<span class="color-name">True red</span><br>
<span class="hex-number">#8F1D21</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#D24D57;">
<span class="color-name">Chestnut Rose</span><br>
<span class="hex-number">#D24D57</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F08F90;">
<span class="color-name">One kin dye</span><br>
<span class="hex-number">#F08F907</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F47983;">
<span class="color-name">Peach-colored</span><br>
<span class="hex-number">#F47983</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#DB5A6B;">
<span class="color-name">Red plum colored</span><br>
<span class="hex-number">#DB5A6B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#C93756;">
<span class="color-name">Medium crimson</span><br>
<span class="hex-number">#C93756</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FCC9B9;">
<span class="color-name">Cherry blossom color</span><br>
<span class="hex-number">#FCC9B9</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFB3A7;">
<span class="color-name">Washed-out crimson</span><br>
<span class="hex-number">#FFB3A7</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F62459;">
<span class="color-name">RADICAL RED</span><br>
<span class="hex-number">#F62459</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F58F84;">
<span class="color-name">Ibis wing color</span><br>
<span class="hex-number">#F58F84</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#875F9A;">
<span class="color-name">Wisteria purple</span><br>
<span class="hex-number">#875F9A</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#5D3F6A;">
<span class="color-name">Bellflower color</span><br>
<span class="hex-number">#5D3F6A</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#89729E;">
<span class="color-name">Wisteria color</span><br>
<span class="hex-number">#89729E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#763568;">
<span class="color-name">Iris color</span><br>
<span class="hex-number">#763568</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#8D608C;">
<span class="color-name">Tatarian aster color</span><br>
<span class="hex-number">#8D608C</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#A87CA0;">
<span class="color-name">Thin color</span><br>
<span class="hex-number">#A87CA0</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#5B3256;">
<span class="color-name">Violet color</span><br>
<span class="hex-number">#5B3256</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#BF55EC;">
<span class="color-name">MEDIUM PURPLE</span><br>
<span class="hex-number">#BF55EC</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #8E44AD;">
<span class="color-name">STUDIO</span><br>
<span class="hex-number">#8E44AD</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#9B59B6;">
<span class="color-name">WISTERIA</span><br>
<span class="hex-number">#9B59B6</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#BE90D4;">
<span class="color-name">LIGHT WISTERIA</span><br>
<span class="hex-number">#BE90D4</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#4D8FAC;">
<span class="color-name">Sky color</span><br>
<span class="hex-number">#4D8FAC</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#5D8CAE;">
<span class="color-name">Ultramarine color</span><br>
<span class="hex-number">#5D8CAE</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#22A7F0;">
<span class="color-name">PICTON BLUE</span><br>
<span class="hex-number">#22A7F0</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#19B5FE;">
<span class="color-name">DODGER BLUE</span><br>
<span class="hex-number">#19B5FE</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#59ABE3;">
<span class="color-name">PICTON BLUE</span><br>
<span class="hex-number">#59ABE3</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#48929B;">
<span class="color-name">Light blue color</span><br>
<span class="hex-number">#48929B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#317589;">
<span class="color-name">Thousand herb</span><br>
<span class="hex-number">#317589</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#89C4F4;">
<span class="color-name">JORDY BLUE</span><br>
<span class="hex-number">#89C4F4</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #4B77BE;">
<span class="color-name">STEEL BLUE</span><br>
<span class="hex-number">#4B77BE</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#1F4788;">
<span class="color-name">Lapis lazuli color</span><br>
<span class="hex-number">#1F4788</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#003171;">
<span class="color-name">Navy blue color</span><br>
<span class="hex-number">#003171</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#044F67;">
<span class="color-name">Hanada</span><br>
<span class="hex-number">#044F67</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #264348;">
<span class="color-name">Indigo color</span><br>
<span class="hex-number">#264348</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#7A942E;">
<span class="color-name">Siskin sprout yellow</span><br>
<span class="hex-number">#7A942E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#8DB255;">
<span class="color-name">young green onion</span><br>
<span class="hex-number">#8DB255</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#5B8930;">
<span class="color-name">Fresh onion</span><br>
<span class="hex-number">#5B8930</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#6B9362;">
<span class="color-name">Young bamboo color</span><br>
<span class="hex-number">#6B9362</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#407A52;">
<span class="color-name">Patina</span><br>
<span class="hex-number">#407A52</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#006442;">
<span class="color-name">Green bamboo</span><br>
<span class="hex-number">#006442</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#87D37C;">
<span class="color-name">GOSSIP</span><br>
<span class="hex-number">#87D37C</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#26A65B;">
<span class="color-name">EUCALYPTUS</span><br>
<span class="hex-number">#26A65B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #26C281;">
<span class="color-name">JUNGLE GREEN</span><br>
<span class="hex-number">#26C281</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#049372;">
<span class="color-name">OBSERVATORY</span><br>
<span class="hex-number">#049372</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#2ABB9B;">
<span class="color-name">JUNGLE GREEN</span><br>
<span class="hex-number">#2ABB9B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#16A085;">
<span class="color-name">MOUNTAIN MEADOW</span><br>
<span class="hex-number">#16A085</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#36D7B7;">
<span class="color-name">TURQUOISE</span><br>
<span class="hex-number">#36D7B7</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #03A678;">
<span class="color-name">FREE SPEECH AQUAMARINE</span><br>
<span class="hex-number">#03A678</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#4DAF7C;">
<span class="color-name">OCEAN GREEN</span><br>
<span class="hex-number">#4DAF7C</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#D9B611;">
<span class="color-name">Patrinia flowers</span><br>
<span class="hex-number">#D9B611</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F3C13A;">
<span class="color-name">Amur cork tree</span><br>
<span class="hex-number">#F3C13A</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F7CA18;">
<span class="color-name">RIPE LEMON</span><br>
<span class="hex-number">#F7CA18</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#E2B13C;">
<span class="color-name">Japanese triandra grass</span><br>
<span class="hex-number">#E2B13C</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#A17917;">
<span class="color-name">Rapeseed oil-colored</span><br>
<span class="hex-number">#A17917</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F5D76E;">
<span class="color-name">CREAM CAN</span><br>
<span class="hex-number">#F5D76E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F4D03F;">
<span class="color-name">SAFFRON</span><br>
<span class="hex-number">#F4D03F</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFA400;">
<span class="color-name">Bright golden yellow</span><br>
<span class="hex-number">#FFA400</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#E08A1E;">
<span class="color-name">Sumac-dyed</span><br>
<span class="hex-number">#E08A1E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFB61E;">
<span class="color-name">Gamboge</span><br>
<span class="hex-number">#FFB61E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FAA945;">
<span class="color-name">Corn-colored</span><br>
<span class="hex-number">#FAA945</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFA631;">
<span class="color-name">Egg-colored</span><br>
<span class="hex-number">#FFA631</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFB94E;">
<span class="color-name">Floral leaf-colored</span><br>
<span class="hex-number">#FFB94E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#E29C45;">
<span class="color-name">Golden fallen leaves</span><br>
<span class="hex-number">#E29C45</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F9690E;">
<span class="color-name">ECSTASY</span><br>
<span class="hex-number">#F9690E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #CA6924;">
<span class="color-name">Amber</span><br>
<span class="hex-number">#CA6924</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F5AB35;">
<span class="color-name">LIGHTNING YELLOW</span><br>
<span class="hex-number">#F5AB35</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#BFBFBF;">
<span class="color-name">SILVER</span><br>
<span class="hex-number">#BFBFBF</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F2F1EF;">
<span class="color-name">CARARRA</span><br>
<span class="hex-number">#F2F1EF</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#BDC3C7;">
<span class="color-name">SILVER SAND</span><br>
<span class="hex-number">#BDC3C7</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#ECF0F1;">
<span class="color-name">PORCELAIN</span><br>
<span class="hex-number">#ECF0F1</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#D2D7D3;">
<span class="color-name">PUMICE</span><br>
<span class="hex-number">#D2D7D3</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#757D75;">
<span class="color-name">Harbor rat</span><br>
<span class="hex-number">#757D75</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#EEEEEE;">
<span class="color-name">GALLERY</span><br>
<span class="hex-number">#EEEEEE</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#ABB7B7;">
<span class="color-name">EDWARD</span><br>
<span class="hex-number">#ABB7B7</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #6C7A89;">
<span class="color-name">LYNCH</span><br>
<span class="hex-number">#6C7A89</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#95A5A6;">
<span class="color-name">CASCADE</span><br>
<span class="hex-number">#95A5A6</span><br>
</div>
</div>
</div></div>
</div></div>
</body>
</html>
Semoga membantu
