Skip to content

Instantly share code, notes, and snippets.

@tankred

tankred/colorpalette.html

Last active October 15, 2020 14:43
Show Gist options
  • Save tankred/932ad5e37697824cba6a4d9a68e7c26f to your computer and use it in GitHub Desktop.
Save tankred/932ad5e37697824cba6a4d9a68e7c26f to your computer and use it in GitHub Desktop.
Download ZIP
colorpalette html
Raw
colorpalette.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>colorpalette</title>
<style>
article, aside, details, figcaption, figure, footer, header,
hgroup, menu, nav, section { display: block; color:#f00; }
header {font:15pt helvetica,verdana,sans-serif;color:#000;}
p.subtitle {font:10pt helvetica,verdana,sans-serif;color:#000;}
p { padding-left:5px;}
div.palette {float:left; background: #fff; border: solid 1px black; color: #000000; height: 12em; width: 9em; margin:0 0 15px 15px;}
div.pcolor { border-bottom: solid 1px black; color: #000000; height: 9em; width: 9em;}
</style>
</head>
<body>
<header>Feel at home in ghent</header>
<p class="subtitle">Color palette</p>
<div class="palette">
<div class="pcolor" style="background: #483C32;"></div>
<p> Taupe (<tt>#483C32</tt>)</p>
</div>
<div class="palette">
<div class="pcolor" style="background: #965517;"></div>
<p> B (<tt>#965517</tt>)</p>
</div>
<div class="palette">
<div class="pcolor" style="background: #20931E;"></div>
<p> C (<tt>#20931E</tt>)</p>
</div>
<div class="palette">
<div class="pcolor" style="background: #E2D4A5;"></div>
<p> D (<tt>#E2D4A5</tt>)</p>
</div>
<div class="palette">
<div class="pcolor" style="background: #687E19;"></div>
<p> E (<tt>#687E19</tt>)</p>
</div>
<div class="palette">
<div class="pcolor" style="background: #F2ECCA;"></div>
<p> F (<tt>#F2ECCA</tt>)</p>
</div>
<div class="palette">
<div class="pcolor" style="background: #FFF;"></div>
<p> White (<tt>#FFFFFF</tt>)</p>
</div>
<div class="palette">
<div class="pcolor" style="background: #5F5A4E;"></div>
<p> H (<tt>#5F5A4E</tt>)</p>
</div>
<div class="palette">
<div class="pcolor" style="background: #151410;"></div>
<p> I (<tt>#151410</tt>)</p>
</div>
<div class="palette">
<div class="pcolor" style="background: #FFE8C5;"></div>
<p> J (<tt>#FFE8C5</tt>)</p>
</div>
<div class="palette">
<div class="pcolor" style="background: #D41F23;"></div>
<p> K (<tt>#D41F23</tt>)</p>
</div>
<!--
<div class="palette">
<div class="pcolor" style="background: #965517;"></div>
<p> L (<tt>#965517</tt>)</p>
</div>
<div class="palette">
<div class="pcolor" style="background: #965517;"></div>
<p> M (<tt>#965517</tt>)</p>
</div>
<div class="palette">
<div class="pcolor" style="background: #965517;"></div>
<p> N (<tt>#965517</tt>)</p>
</div>
<div class="palette">
<div class="pcolor" style="background: #965517;"></div>
<p> O (<tt>#965517</tt>)</p>
</div>
<div class="palette">
<div class="pcolor" style="background: #965517;"></div>
<p> P (<tt>#965517</tt>)</p>
</div>
-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment