atum
Version:
A Procedural Graph Based Javascript Library
253 lines (230 loc) • 6.73 kB
HTML
<!-- saved from url=(0036)http://paletton.com/export/index.php -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Color palette by Paletton.com</title>
<meta name="generator" content="Paletton.com">
<style type="text/css">
/* Palette color codes */
/* Feel free to copy&paste color codes to your application */
.primary-1 { background-color: #FFD7AA }
.primary-2 { background-color: #D4A26A }
.primary-0 { background-color: #AA7539 }
.primary-3 { background-color: #804E16 }
.primary-4 { background-color: #552D00 }
.secondary-1-1 { background-color: #A2D890 }
.secondary-1-2 { background-color: #70B45A }
.secondary-1-0 { background-color: #479030 }
.secondary-1-3 { background-color: #286C12 }
.secondary-1-4 { background-color: #124800 }
.secondary-2-1 { background-color: #F2A2AD }
.secondary-2-2 { background-color: #CA6573 }
.secondary-2-0 { background-color: #A23645 }
.secondary-2-3 { background-color: #7A1523 }
.secondary-2-4 { background-color: #51000B }
.complement-1 { background-color: #6E91A1 }
.complement-2 { background-color: #467386 }
.complement-0 { background-color: #27576B }
.complement-3 { background-color: #113D51 }
.complement-4 { background-color: #032636 }
/* end */
body {
margin:0; padding: 2em;
background: #fff;
color: #000;
font: 12px/1.33 "Segoe UI", "Helvetica Neue", Helvetica, sans-serif;
text-align:left;
}
h1 {
margin: 0.5em 0;
font-size: 200%;
}
p {
margin: 0.5em 0;
}
.color-table {
margin: 2em 2em 5em;
border-collapse:collapse;
border:none;
border-spacing:0;
font-size:100%;
}
.color-table th {
padding: 0 1em 0 0;
text-align: right;
vertical-align: middle;
font-size: 100%;
font-weight: normal;
border: none;
}
.color-table td.sample {
width:6em; height:6em;
padding: 10px;
text-align:center;
vertical-align:middle;
font-size:90%;
border: 1px solid white;
white-space:nowrap;
}
.color-table td.sample-0 {
width:18em;
}
.color-table.small td.sample {
width:3em; height:3em;
padding:0;
border:none;
}
.color-table.small td.sample-0 {
width:9em;
}
.color-table .white { margin-bottom:0.2em; color:white }
.color-table .black { margin-top:0.2em; color:black }
hr {
margin: 2em 0 1em 0;
border:none;
border-bottom:1px solid silver;
}
#footer {
padding:1em;
text-align:center;
font-size:80%;
}
</style>
</head>
<body>
<h1>Color Palette by Paletton.com</h1>
<p>Palette URL: <a href="http://paletton.com/#uid=70C270klhllaDvZfYqDqyg2vUaI">http://paletton.com/#uid=70C270klhllaDvZfYqDqyg2vUaI</a></p>
<table class="color-table">
<tbody><tr>
<th>Primary color:</th>
<td class="sample sample-1 primary-1">
<div class="white">#FFD7AA</div>
<div class="black">#FFD7AA</div>
</td>
<td class="sample sample-2 primary-2">
<div class="white">#D4A26A</div>
<div class="black">#D4A26A</div>
</td>
<td class="sample sample-0 primary-0">
<div class="white">#AA7539</div>
<div class="black">#AA7539</div>
</td>
<td class="sample sample-3 primary-3">
<div class="white">#804E16</div>
<div class="black">#804E16</div>
</td>
<td class="sample sample-4 primary-4">
<div class="white">#552D00</div>
<div class="black">#552D00</div>
</td>
</tr>
<tr>
<th>Secondary color (1):</th>
<td class="sample sample-1 secondary-1-1">
<div class="white">#A2D890</div>
<div class="black">#A2D890</div>
</td>
<td class="sample sample-2 secondary-1-2">
<div class="white">#70B45A</div>
<div class="black">#70B45A</div>
</td>
<td class="sample sample-0 secondary-1-0">
<div class="white">#479030</div>
<div class="black">#479030</div>
</td>
<td class="sample sample-3 secondary-1-3">
<div class="white">#286C12</div>
<div class="black">#286C12</div>
</td>
<td class="sample sample-4 secondary-1-4">
<div class="white">#124800</div>
<div class="black">#124800</div>
</td>
</tr>
<tr>
<th>Secondary color (2):</th>
<td class="sample sample-1 secondary-2-1">
<div class="white">#F2A2AD</div>
<div class="black">#F2A2AD</div>
</td>
<td class="sample sample-2 secondary-2-2">
<div class="white">#CA6573</div>
<div class="black">#CA6573</div>
</td>
<td class="sample sample-0 secondary-2-0">
<div class="white">#A23645</div>
<div class="black">#A23645</div>
</td>
<td class="sample sample-3 secondary-2-3">
<div class="white">#7A1523</div>
<div class="black">#7A1523</div>
</td>
<td class="sample sample-4 secondary-2-4">
<div class="white">#51000B</div>
<div class="black">#51000B</div>
</td>
</tr>
<tr>
<th>Complement color:</th>
<td class="sample sample-1 complement-1">
<div class="white">#6E91A1</div>
<div class="black">#6E91A1</div>
</td>
<td class="sample sample-2 complement-2">
<div class="white">#467386</div>
<div class="black">#467386</div>
</td>
<td class="sample sample-0 complement-0">
<div class="white">#27576B</div>
<div class="black">#27576B</div>
</td>
<td class="sample sample-3 complement-3">
<div class="white">#113D51</div>
<div class="black">#113D51</div>
</td>
<td class="sample sample-4 complement-4">
<div class="white">#032636</div>
<div class="black">#032636</div>
</td>
</tr>
</tbody></table>
<table class="color-table small">
<tbody><tr>
<th>Primary color:</th>
<td class="sample sample-1 primary-1"></td>
<td class="sample sample-2 primary-2"></td>
<td class="sample sample-0 primary-0"></td>
<td class="sample sample-3 primary-3"></td>
<td class="sample sample-4 primary-4"></td>
</tr>
<tr>
<th>Secondary color (1):</th>
<td class="sample sample-1 secondary-1-1"></td>
<td class="sample sample-2 secondary-1-2"></td>
<td class="sample sample-0 secondary-1-0"></td>
<td class="sample sample-3 secondary-1-3"></td>
<td class="sample sample-4 secondary-1-4"></td>
</tr>
<tr>
<th>Secondary color (2):</th>
<td class="sample sample-1 secondary-2-1"></td>
<td class="sample sample-2 secondary-2-2"></td>
<td class="sample sample-0 secondary-2-0"></td>
<td class="sample sample-3 secondary-2-3"></td>
<td class="sample sample-4 secondary-2-4"></td>
</tr>
<tr>
<th>Complement color:</th>
<td class="sample sample-1 complement-1"></td>
<td class="sample sample-2 complement-2"></td>
<td class="sample sample-0 complement-0"></td>
<td class="sample sample-3 complement-3"></td>
<td class="sample sample-4 complement-4"></td>
</tr>
</tbody></table>
<p>
See the HTML source for more details.<br>
Use the <em>Save / Save As...</em> command in your browser to store the document for latter use.
</p>
<hr>
<p id="footer">Generated by <a href="http://paletton.com/">Paletton.com</a> © 2002-2014</p>
</body></html>