Skip to content

Instantly share code, notes, and snippets.

@nternetinspired

nternetinspired/SassMeister-input-HTML.html

Created August 26, 2014 20:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nternetinspired/39b3871bee220be3cbae to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nternetinspired/39b3871bee220be3cbae to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<h1>Color swatches generated with Sass</h1>
<p>This demo includes only the styles needed to generate the colours, so you should be able to drop the markup and Sass/CSS into your project without conflict. Please note though, this isn't intended to be used in production environments <em>this is a development tool</em> to help you quickly find colours for your project.</em></p>
<h2>Complement colour</h2>
<p>The exact opposite of your base colour, useful for delivering contrast but needs to be used with care. <em>Never</em> set copy in your complement colour against a background of your base colour, or vice-versa.</em></p>
<div class="swatch swatch-complement">
<div class="clearfix">
<div class="color-item color-brand">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
</div>
</div>
<div class="color-item color-option-1">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base+180&deg;</div>
</div>
</div>
</div>
</div>
<h2>Analogous colours</h2>
<p>Two colours, one either side of your base colour on a <a href="http://en.wikipedia.org/wiki/Color_wheel">colour wheel</a>. Analogous colours are often found in nature and pleasing to the eye, making them a great choice for most projects.</p>
<div class="swatch swatch-analogous">
<div class="color-item color-brand">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
</div>
</div>
<div class="clearfix">
<div class="color-item color-option-1">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base-30&deg;</div>
</div>
</div>
<div class="color-item color-option-2">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base+30&deg;</div>
</div>
</div>
</div>
</div>
<h2>Split-complementary colours</h2>
<p>Similar to the analogous colour scheme but using two colours, one either side of the complement colour. Like an analogous colour scheme it's hard to go too far wrong with this one.</p>
<div class="swatch swatch-split-complement">
<div class="color-item color-brand">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
</div>
</div>
<div class="clearfix">
<div class="color-item color-option-1">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base-150&deg;</div>
</div>
</div>
<div class="color-item color-option-2">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base+150&deg;</div>
</div>
</div>
</div>
</div>
<h2>Triadic colours</h2>
<p>In this scheme colours are distributed evenly around the colour wheel, typically creating a very vibrant pallette. Use the two spin colours with care, in small doses.
<div class="swatch swatch-triadic">
<div class="color-item color-brand">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
</div>
</div>
<div class="clearfix">
<div class="color-item color-option-1">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base-120&deg;</div>
</div>
</div>
<div class="color-item color-option-2">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base+120&deg;</div>
</div>
</div>
</div>
</div>
<h2>Tetradic colours 1</h2>
<p>A tetradic, or rectangular colour scheme inludes four colours arranged into two complementary pairs, with one pair offset by two stops of the colour wheel giving two possible directions of 'spin'.</p>
<h3>Spin 1</h3>
<div class="swatch swatch-tetradic">
<div class="color-item color-brand">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
</div>
</div>
<div class="clearfix">
<div class="color-item color-option-1">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base+180&deg;</div>
</div>
</div>
<div class="color-item color-option-2">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base+240&deg;</div>
</div>
</div>
<div class="color-item color-option-3">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base-60&deg;</div>
</div>
</div>
</div>
</div>
<h3>Spin 2</h3>
<div class="swatch swatch-tetradic">
<div class="color-item color-brand">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
</div>
</div>
<div class="clearfix">
<div class="color-item color-option-1">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base+180&deg;</div>
</div>
</div>
<div class="color-item color-option-4">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base+60&deg;</div>
</div>
</div>
<div class="color-item color-option-5">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base-240&deg;</div>
</div>
</div>
</div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.0)
// ----
/* ==========================================================================
COLOR SWATCHES
========================================================================== */
$base-color: #4a8ec2; // Set this to your brand colour
// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack.
@mixin clearfix {
&:before,
&:after{
content:"";
display:table;
}
&:after{
clear:both;
}
}
.clearfix {
@include clearfix;
}
/* A Sass map for each of our pallette types */
$analogous-colors: (
option-1: adjust_hue($base-color, -30),
option-2: adjust_hue($base-color, 30),
);
$split-complement-colors: (
option-1: adjust_hue($base-color, -150),
option-2: adjust_hue($base-color, 150),
);
$triadic-colors: (
option-1: adjust_hue($base-color, -120),
option-2: adjust_hue($base-color, 120),
);
$tetradic-colors: (
option-1: adjust_hue($base-color, +180),
option-2: adjust_hue($base-color, +240),
option-3: adjust_hue($base-color, -60),
option-4: adjust_hue($base-color, +60),
option-5: adjust_hue($base-color, -240),
);
/* Generic swatch styles */
.color-item {
position: relative;
text-align: center;
}
.color-swatch {
display: block;
height: 0;
margin: 0 auto;
padding-bottom: 100%;
width: 100%;
}
.color-label {
padding: 1em;
text-align: left;
@media only screen and (min-width: 45em) {
background: rgba(0,0,0,.5);
color: #fff;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.swatch {
margin-bottom: 2em;
max-width: 45em;
}
/* Special treatment for our 'Brand' colour */
.color-brand {
.color-swatch {
background-color: $base-color;
}
.color-value {
&:after {
content: '#{$base-color}';
}
}
}
/* Shared swatch styles */
.swatch-analogous,
.swatch-split-complement,
.swatch-triadic {
.color-brand .color-swatch {
padding-bottom: 50%;
}
[class*="color-option"] {
float: left;
width: 50%;
}
}
/* Shared swatch styles */
.swatch-tetradic {
.color-brand .color-swatch {
padding-bottom: 50%;
}
[class*="color-option"] {
float: left;
width: 33.3333333%;
}
}
/* Styles for each swatch type */
.swatch-analogous {
@each $color-name, $color-value in $analogous-colors {
.color-#{$color-name} {
.color-swatch {
background-color: $color-value;
}
.color-value {
&:after {
content: '#{$color-value}';
}
}
}
}
}
.swatch-complement {
.color-item {
float: left;
width: 50%;
}
.color-option-1 {
.color-swatch {
background-color: adjust_hue($base-color, 180);
}
.color-value {
&:after {
content: '#{adjust_hue($base-color, 180)}';
}
}
}
}
.swatch-split-complement {
@each $color-name, $color-value in $split-complement-colors {
.color-#{$color-name} {
.color-swatch {
background-color: $color-value;
}
.color-value {
&:after {
content: '#{$color-value}';
}
}
}
}
}
.swatch-tetradic {
@each $color-name, $color-value in $tetradic-colors {
.color-#{$color-name} {
.color-swatch {
background-color: $color-value;
}
.color-value {
&:after {
content: '#{$color-value}';
}
}
}
}
}
.swatch-triadic {
@each $color-name, $color-value in $triadic-colors {
.color-#{$color-name} {
.color-swatch {
background-color: $color-value;
}
.color-value {
&:after {
content: '#{$color-value}';
}
}
}
}
}
Raw
SassMeister-output.css
/* ==========================================================================
COLOR SWATCHES
========================================================================== */
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* A Sass map for each of our pallette types */
/* Generic swatch styles */
.color-item {
position: relative;
text-align: center;
}
.color-swatch {
display: block;
height: 0;
margin: 0 auto;
padding-bottom: 100%;
width: 100%;
}
.color-label {
padding: 1em;
text-align: left;
}
@media only screen and (min-width: 45em) {
.color-label {
background: rgba(0, 0, 0, 0.5);
color: #fff;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.swatch {
margin-bottom: 2em;
max-width: 45em;
}
/* Special treatment for our 'Brand' colour */
.color-brand .color-swatch {
background-color: #4a8ec2;
}
.color-brand .color-value:after {
content: "#4a8ec2";
}
/* Shared swatch styles */
.swatch-analogous .color-brand .color-swatch,
.swatch-split-complement .color-brand .color-swatch,
.swatch-triadic .color-brand .color-swatch {
padding-bottom: 50%;
}
.swatch-analogous [class*="color-option"],
.swatch-split-complement [class*="color-option"],
.swatch-triadic [class*="color-option"] {
float: left;
width: 50%;
}
/* Shared swatch styles */
.swatch-tetradic .color-brand .color-swatch {
padding-bottom: 50%;
}
.swatch-tetradic [class*="color-option"] {
float: left;
width: 33.3333333%;
}
/* Styles for each swatch type */
.swatch-analogous .color-option-1 .color-swatch {
background-color: #4ac2ba;
}
.swatch-analogous .color-option-1 .color-value:after {
content: "#4ac2ba";
}
.swatch-analogous .color-option-2 .color-swatch {
background-color: #4a52c2;
}
.swatch-analogous .color-option-2 .color-value:after {
content: "#4a52c2";
}
.swatch-complement .color-item {
float: left;
width: 50%;
}
.swatch-complement .color-option-1 .color-swatch {
background-color: #c27e4a;
}
.swatch-complement .color-option-1 .color-value:after {
content: "#c27e4a";
}
.swatch-split-complement .color-option-1 .color-swatch {
background-color: #c2ba4a;
}
.swatch-split-complement .color-option-1 .color-value:after {
content: "#c2ba4a";
}
.swatch-split-complement .color-option-2 .color-swatch {
background-color: #c24a52;
}
.swatch-split-complement .color-option-2 .color-value:after {
content: "#c24a52";
}
.swatch-tetradic .color-option-1 .color-swatch {
background-color: #c27e4a;
}
.swatch-tetradic .color-option-1 .color-value:after {
content: "#c27e4a";
}
.swatch-tetradic .color-option-2 .color-swatch {
background-color: #8ec24a;
}
.swatch-tetradic .color-option-2 .color-value:after {
content: "#8ec24a";
}
.swatch-tetradic .color-option-3 .color-swatch {
background-color: #4ac27e;
}
.swatch-tetradic .color-option-3 .color-value:after {
content: "#4ac27e";
}
.swatch-tetradic .color-option-4 .color-swatch {
background-color: #7e4ac2;
}
.swatch-tetradic .color-option-4 .color-value:after {
content: "#7e4ac2";
}
.swatch-tetradic .color-option-5 .color-swatch {
background-color: #c24a8e;
}
.swatch-tetradic .color-option-5 .color-value:after {
content: "#c24a8e";
}
.swatch-triadic .color-option-1 .color-swatch {
background-color: #8ec24a;
}
.swatch-triadic .color-option-1 .color-value:after {
content: "#8ec24a";
}
.swatch-triadic .color-option-2 .color-swatch {
background-color: #c24a8e;
}
.swatch-triadic .color-option-2 .color-value:after {
content: "#c24a8e";
}
Raw
SassMeister-rendered.html
<h1>Color swatches generated with Sass</h1>
<p>This demo includes only the styles needed to generate the colours, so you should be able to drop the markup and Sass/CSS into your project without conflict. Please note though, this isn't intended to be used in production environments <em>this is a development tool</em> to help you quickly find colours for your project.</em></p>
<h2>Complement colour</h2>
<p>The exact opposite of your base colour, useful for delivering contrast but needs to be used with care. <em>Never</em> set copy in your complement colour against a background of your base colour, or vice-versa.</em></p>
<div class="swatch swatch-complement">
<div class="clearfix">
<div class="color-item color-brand">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
</div>
</div>
<div class="color-item color-option-1">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base+180&deg;</div>
</div>
</div>
</div>
</div>
<h2>Analogous colours</h2>
<p>Two colours, one either side of your base colour on a <a href="http://en.wikipedia.org/wiki/Color_wheel">colour wheel</a>. Analogous colours are often found in nature and pleasing to the eye, making them a great choice for most projects.</p>
<div class="swatch swatch-analogous">
<div class="color-item color-brand">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
</div>
</div>
<div class="clearfix">
<div class="color-item color-option-1">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base-30&deg;</div>
</div>
</div>
<div class="color-item color-option-2">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base+30&deg;</div>
</div>
</div>
</div>
</div>
<h2>Split-complementary colours</h2>
<p>Similar to the analogous colour scheme but using two colours, one either side of the complement colour. Like an analogous colour scheme it's hard to go too far wrong with this one.</p>
<div class="swatch swatch-split-complement">
<div class="color-item color-brand">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
</div>
</div>
<div class="clearfix">
<div class="color-item color-option-1">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base-150&deg;</div>
</div>
</div>
<div class="color-item color-option-2">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base+150&deg;</div>
</div>
</div>
</div>
</div>
<h2>Triadic colours</h2>
<p>In this scheme colours are distributed evenly around the colour wheel, typically creating a very vibrant pallette. Use the two spin colours with care, in small doses.
<div class="swatch swatch-triadic">
<div class="color-item color-brand">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
</div>
</div>
<div class="clearfix">
<div class="color-item color-option-1">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base-120&deg;</div>
</div>
</div>
<div class="color-item color-option-2">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base+120&deg;</div>
</div>
</div>
</div>
</div>
<h2>Tetradic colours 1</h2>
<p>A tetradic, or rectangular colour scheme inludes four colours arranged into two complementary pairs, with one pair offset by two stops of the colour wheel giving two possible directions of 'spin'.</p>
<h3>Spin 1</h3>
<div class="swatch swatch-tetradic">
<div class="color-item color-brand">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
</div>
</div>
<div class="clearfix">
<div class="color-item color-option-1">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base+180&deg;</div>
</div>
</div>
<div class="color-item color-option-2">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base+240&deg;</div>
</div>
</div>
<div class="color-item color-option-3">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base-60&deg;</div>
</div>
</div>
</div>
</div>
<h3>Spin 2</h3>
<div class="swatch swatch-tetradic">
<div class="color-item color-brand">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
</div>
</div>
<div class="clearfix">
<div class="color-item color-option-1">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base+180&deg;</div>
</div>
</div>
<div class="color-item color-option-4">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base+60&deg;</div>
</div>
</div>
<div class="color-item color-option-5">
<div class="color-swatch"></div>
<div class="color-label">
<div class="color-value"></div>
<div class="color-treatment">Base-240&deg;</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment