Skip to content

Instantly share code, notes, and snippets.

@kwaledesign

kwaledesign/Colorkit HTML Swatches

Created July 2, 2013 15:58
Show Gist options
  • Save kwaledesign/5910575 to your computer and use it in GitHub Desktop.
Save kwaledesign/5910575 to your computer and use it in GitHub Desktop.
Download ZIP
Template HTML color swatches for use with Colorkit when generating color schemes
Raw
Colorkit HTML Swatches
<h2>Monochromatic Color Scheme</h2>
<div class="monochromatic color-pallet">
<div class="base color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end base color-block -->
</div> <!-- end monochromatic color-pallet -->
<h2>Complementary Color Scheme</h2>
<div class="complementary color-pallet">
<div class="base color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end base color-block -->
<div class="complementary color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end base color-block -->
</div> <!-- end complementary color-pallet -->
<h2>Split Complementary Color Scheme</h2>
<div class="split-complementary color-pallet">
<div class="base color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end base color-block -->
<div class="secondaryA color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end secondaryA color-block -->
<div class="secondaryB color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end secondaryB color-block -->
</div> <!-- end split-complementary color-pallet -->
<h2>Triadic Color Scheme</h2>
<div class="triadic color-pallet">
<div class="base color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end base color-block -->
<div class="secondaryA color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end secondaryA color-block -->
<div class="secondaryB color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end secondaryB color-block -->
</div> <!-- end triadic color-pallet -->
<h2>Analogous Color Scheme</h2>
<div class="analogous color-pallet">
<div class="base color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end base color-block -->
<div class="secondaryA color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end secondaryA color-block -->
<div class="secondaryB color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end color-block -->
</div> <!-- end analogous color-pallet -->
<h2>Double-Complementary Color Scheme</h2>
<div class="double-complementary color-pallet">
<div class="base color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end base color-block -->
<div class="secondaryA color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end secondaryA color-block -->
<div class="secondaryB color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end secondaryB color-block -->
<div class="complementary color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end complementary color-block -->
</div> <!-- end double-complementary color-pallet -->
<h2>Tetradic Color Scheme</h2>
<div class="tetradic color-pallet">
<div class="base color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end base color-block -->
<div class="secondaryA color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end secondaryA color-block -->
<div class="secondaryB color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end secondaryB color-block -->
<div class="complementary color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end complementary color-block -->
</div> <!-- end tetradic color-pallet -->
<h2>Quadradic Color Scheme</h2>
<div class="quadradic color-pallet">
<div class="base color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end base color-block -->
<div class="secondaryA color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end secondaryA color-block -->
<div class="secondaryB color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end secondaryB color-block -->
<div class="complementary color-block">
<div class="pure-color-swatch"></div>
<div class="color-swatch">
<div class="tint-stack">
<div class="tint-2"></div>
<div class="tint-3"></div>
<div class="tint-4"></div>
<div class="tint-5"></div>
<div class="tint-6"></div>
<div class="tint-7"></div>
</div>
<div class="tone-stack">
<div class="tone-2"></div>
<div class="tone-3"></div>
<div class="tone-4"></div>
<div class="tone-5"></div>
<div class="tone-6"></div>
<div class="tone-7"></div>
</div>
<div class="shade-stack">
<div class="shade-2"></div>
<div class="shade-3"></div>
<div class="shade-4"></div>
<div class="shade-5"></div>
<div class="shade-6"></div>
<div class="shade-7"></div>
</div>
</div> <!-- end color-swatch -->
</div> <!-- end complementary color-block -->
</div> <!-- end quadradic color-pallet -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment