Skip to content

Instantly share code, notes, and snippets.

@kenny-evitt

kenny-evitt/solarized-colors.html

Created June 25, 2014 00:40
Show Gist options
  • Save kenny-evitt/f2f573b8cdb23a5160ba to your computer and use it in GitHub Desktop.
Save kenny-evitt/f2f573b8cdb23a5160ba to your computer and use it in GitHub Desktop.
Download ZIP
Solarized colors
Raw
solarized-colors.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Solarized Colors</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="home">
<h1>Solarized Colors</h1>
<p><a href="http://ethanschoonover.com/solarized">Solarized</a> – "Precision colors for machines and people"
<!-- Styles adapated from http://purecss.io/tables/ -->
<table style="border-collapse: collapse; border-spacing: 0; empty-cells: show; border: 1px solid #cbcbcb; line-height: 1.5;">
<thead style="background: #e0e0e0; color: #000; text-align: left; vertical-align: bottom;">
<tr>
<th style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0; width: 60px;">
Color
</th>
<th style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
Hex
</th>
<th style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
Example
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
base 03
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
#002b36
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
<svg width="35pt" height="35pt" viewBox="0.00 0.00 35.00 35.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon fill="white" stroke="white" points="0,0 0,35 35,35 35,0"/>
<polygon fill="#002b36" stroke="#002b36" points="5,5 5,30 30,30 30,5"/>
</svg>
</td>
</tr>
<tr>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
base 02
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
#073642
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
<svg width="35pt" height="35pt" viewBox="0.00 0.00 35.00 35.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon fill="white" stroke="white" points="0,0 0,35 35,35 35,0"/>
<polygon fill="#073642" stroke="#073642" points="5,5 5,30 30,30 30,5"/>
</svg>
</td>
</tr>
<tr>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
base 01
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
#586e75
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
<svg width="35pt" height="35pt" viewBox="0.00 0.00 35.00 35.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon fill="white" stroke="white" points="0,0 0,35 35,35 35,0"/>
<polygon fill="#586e75" stroke="#586e75" points="5,5 5,30 30,30 30,5"/>
</svg>
</td>
</tr>
<tr>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
base 00
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
#657b83
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
<svg width="35pt" height="35pt" viewBox="0.00 0.00 35.00 35.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon fill="white" stroke="white" points="0,0 0,35 35,35 35,0"/>
<polygon fill="#657b83" stroke="#657b83" points="5,5 5,30 30,30 30,5"/>
</svg>
</td>
</tr>
<tr>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
base 0
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
#839496
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
<svg width="35pt" height="35pt" viewBox="0.00 0.00 35.00 35.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon fill="white" stroke="white" points="0,0 0,35 35,35 35,0"/>
<polygon fill="#839496" stroke="#839496" points="5,5 5,30 30,30 30,5"/>
</svg>
</td>
</tr>
<tr>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
base 1
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
#93a1a1
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
<svg width="35pt" height="35pt" viewBox="0.00 0.00 35.00 35.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon fill="white" stroke="white" points="0,0 0,35 35,35 35,0"/>
<polygon fill="#93a1a1" stroke="#93a1a1" points="5,5 5,30 30,30 30,5"/>
</svg>
</td>
</tr>
<tr>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
base 2
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
#eee8d5
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
<svg width="35pt" height="35pt" viewBox="0.00 0.00 35.00 35.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon fill="white" stroke="white" points="0,0 0,35 35,35 35,0"/>
<polygon fill="#eee8d5" stroke="#eee8d5" points="5,5 5,30 30,30 30,5"/>
</svg>
</td>
</tr>
<tr>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
base 3
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
#fdf6e3
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
<svg width="35pt" height="35pt" viewBox="0.00 0.00 35.00 35.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon fill="white" stroke="white" points="0,0 0,35 35,35 35,0"/>
<polygon fill="#fdf6e3" stroke="#fdf6e3" points="5,5 5,30 30,30 30,5"/>
</svg>
</td>
</tr>
<tr>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
yellow
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
#b58900
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
<svg width="35pt" height="35pt" viewBox="0.00 0.00 35.00 35.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon fill="white" stroke="white" points="0,0 0,35 35,35 35,0"/>
<polygon fill="#b58900" stroke="#b58900" points="5,5 5,30 30,30 30,5"/>
</svg>
</td>
</tr>
<tr>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
orange
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
#cb4b16
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
<svg width="35pt" height="35pt" viewBox="0.00 0.00 35.00 35.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon fill="white" stroke="white" points="0,0 0,35 35,35 35,0"/>
<polygon fill="#cb4b16" stroke="#cb4b16" points="5,5 5,30 30,30 30,5"/>
</svg>
</td>
</tr>
<tr>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
red
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
#dc322f
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
<svg width="35pt" height="35pt" viewBox="0.00 0.00 35.00 35.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon fill="white" stroke="white" points="0,0 0,35 35,35 35,0"/>
<polygon fill="#dc322f" stroke="#dc322f" points="5,5 5,30 30,30 30,5"/>
</svg>
</td>
</tr>
<tr>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
magenta
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
#d33682
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
<svg width="35pt" height="35pt" viewBox="0.00 0.00 35.00 35.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon fill="white" stroke="white" points="0,0 0,35 35,35 35,0"/>
<polygon fill="#d33682" stroke="#d33682" points="5,5 5,30 30,30 30,5"/>
</svg>
</td>
</tr>
<tr>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
violet
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
#6c71c4
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
<svg width="35pt" height="35pt" viewBox="0.00 0.00 35.00 35.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon fill="white" stroke="white" points="0,0 0,35 35,35 35,0"/>
<polygon fill="#6c71c4" stroke="#6c71c4" points="5,5 5,30 30,30 30,5"/>
</svg>
</td>
</tr>
<tr>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
blue
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
#268bd2
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
<svg width="35pt" height="35pt" viewBox="0.00 0.00 35.00 35.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon fill="white" stroke="white" points="0,0 0,35 35,35 35,0"/>
<polygon fill="#268bd2" stroke="#268bd2" points="5,5 5,30 30,30 30,5"/>
</svg>
</td>
</tr>
<tr>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
cyan
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
#2aa198
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
<svg width="35pt" height="35pt" viewBox="0.00 0.00 35.00 35.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon fill="white" stroke="white" points="0,0 0,35 35,35 35,0"/>
<polygon fill="#2aa198" stroke="#2aa198" points="5,5 5,30 30,30 30,5"/>
</svg>
</td>
</tr>
<tr>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
green
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
#859900
</td>
<td style="border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; border-left-width: 0;">
<svg width="35pt" height="35pt" viewBox="0.00 0.00 35.00 35.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon fill="white" stroke="white" points="0,0 0,35 35,35 35,0"/>
<polygon fill="#859900" stroke="#859900" points="5,5 5,30 30,30 30,5"/>
</svg>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment