Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Swatches for every theme based on the same color.

  • Loading branch information...
commit 069af634434cf4b5af10c393c7c8096a8ee32975 1 parent 7f69fa4
@chriseppstein authored
View
81 analogous_example.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Analogous Color Example</title>
+ <link rel="stylesheet" href="stylesheets/analogous.css" type="text/css" media="screen" charset="utf-8">
+ </head>
+ <body id="analogous">
+ <div class="base">
+ <div class="lightest">
+ <br>
+ </div>
+ <div class="lighter">
+ <br>
+ </div>
+ <div class="light">
+ <br>
+ </div>
+ <div class="normal">
+ <br>
+ </div>
+ <div class="dark">
+ <br>
+ </div>
+ <div class="darker">
+ <br>
+ </div>
+ <div class="darkest">
+ <br>
+ </div>
+ </div>
+ <div class="support">
+ <div class="lightest">
+ <br>
+ </div>
+ <div class="lighter">
+ <br>
+ </div>
+ <div class="light">
+ <br>
+ </div>
+ <div class="normal">
+ <br>
+ </div>
+ <div class="dark">
+ <br>
+ </div>
+ <div class="darker">
+ <br>
+ </div>
+ <div class="darkest">
+ <br>
+ </div>
+ </div>
+ <div class="accent">
+ <div class="lightest">
+ <br>
+ </div>
+ <div class="lighter">
+ <br>
+ </div>
+ <div class="light">
+ <br>
+ </div>
+ <div class="normal">
+ <br>
+ </div>
+ <div class="dark">
+ <br>
+ </div>
+ <div class="darker">
+ <br>
+ </div>
+ <div class="darkest">
+ <br>
+ </div>
+ <br>
+ </div>
+ </body>
+</html>
View
34 basic_example.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Basic Color Example</title>
+ <link rel="stylesheet" href="stylesheets/basic.css" type="text/css" media="screen" charset="utf-8">
+ </head>
+ <body id="basic">
+ <div class="base">
+ <div class="lightest">
+ <br>
+ </div>
+ <div class="lighter">
+ <br>
+ </div>
+ <div class="light">
+ <br>
+ </div>
+ <div class="normal">
+ <br>
+ </div>
+ <div class="dark">
+ <br>
+ </div>
+ <div class="darker">
+ <br>
+ </div>
+ <div class="darkest">
+ <br>
+ </div>
+ </div>
+ </body>
+</html>
View
57 complementary_example.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Complementary Color Example</title>
+ <link rel="stylesheet" href="stylesheets/complementary.css" type="text/css" media="screen" charset="utf-8">
+ </head>
+ <body id="complementary">
+ <div class="base">
+ <div class="lightest">
+ <br>
+ </div>
+ <div class="lighter">
+ <br>
+ </div>
+ <div class="light">
+ <br>
+ </div>
+ <div class="normal">
+ <br>
+ </div>
+ <div class="dark">
+ <br>
+ </div>
+ <div class="darker">
+ <br>
+ </div>
+ <div class="darkest">
+ <br>
+ </div>
+ </div>
+ <div class="complement">
+ <div class="lightest">
+ <br>
+ </div>
+ <div class="lighter">
+ <br>
+ </div>
+ <div class="light">
+ <br>
+ </div>
+ <div class="normal">
+ <br>
+ </div>
+ <div class="dark">
+ <br>
+ </div>
+ <div class="darker">
+ <br>
+ </div>
+ <div class="darkest">
+ <br>
+ </div>
+ </div>
+ </body>
+</html>
View
38 index.html
@@ -28,7 +28,7 @@
.download { float: right; }
pre { background: #000; color: #fff; padding: 15px;}
hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
- .footer { text-align:center; padding-top:30px; font-style: italic; }
+ .footer { padding-top:30px; font-style: italic; }
</style>
</head>
@@ -38,37 +38,23 @@
<div id="container">
- <div class="download">
- <a href="http://github.com/chriseppstein/compass-colors/zipball/master">
- <img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a>
- <a href="http://github.com/chriseppstein/compass-colors/tarball/master">
- <img border="0" width="90" src="http://github.com/images/modules/download/tar.png"></a>
- </div>
-
- <h1><a href="http://github.com/chriseppstein/compass-colors">compass-colors</a>
- <span class="small">by <a href="http://github.com/chriseppstein">chriseppstein</a></span></h1>
+ <h1><a href="http://github.com/chriseppstein/compass-colors">Compass Colors</a></h1>
<div class="description">
Color Tools and Theme Support for Compass and Sass
</div>
- <h2>Authors</h2>
-<p>Chris Eppstein (chris@eppsteins.net)
-<br/>
-<br/> </p>
-<h2>Contact</h2>
+ <div id="demos">
+ <h2>Theme Demos</h2>
+ <ul>
+ <li><a href="basic_example.html">Basic/Monochromatic</a></li>
+ <li><a href="complementary_example.html">Complementary</a></li>
+ <li><a href="triadic_example.html">Triadic</a></li>
+ <li><a href="split_compliment_example.html">Split Complement</a></li>
+ <li><a href="analogous_example.html" title="analogous_example">Analogous</a></li>
+ </ul>
+ </div>
-<br/> </p>
-
-
- <h2>Download</h2>
- <p>
- You can download this project in either
- <a href="http://github.com/chriseppstein/compass-colors/zipball/master">zip</a> or
- <a href="http://github.com/chriseppstein/compass-colors/tarball/master">tar</a> formats.
- </p>
- <p>You can also clone the project with <a href="http://git-scm.com">Git</a>
- by running:
<div class="footer">
get the source code on GitHub : <a href="http://github.com/chriseppstein/compass-colors">chriseppstein/compass-colors</a>
</div>
View
81 split_compliment_example.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Split Compliment Color Example</title>
+ <link rel="stylesheet" href="stylesheets/split_complement.css" type="text/css" media="screen" charset="utf-8">
+ </head>
+ <body id="split-compliment">
+ <div class="base">
+ <div class="lightest">
+ <br>
+ </div>
+ <div class="lighter">
+ <br>
+ </div>
+ <div class="light">
+ <br>
+ </div>
+ <div class="normal">
+ <br>
+ </div>
+ <div class="dark">
+ <br>
+ </div>
+ <div class="darker">
+ <br>
+ </div>
+ <div class="darkest">
+ <br>
+ </div>
+ </div>
+ <div class="complement-support">
+ <div class="lightest">
+ <br>
+ </div>
+ <div class="lighter">
+ <br>
+ </div>
+ <div class="light">
+ <br>
+ </div>
+ <div class="normal">
+ <br>
+ </div>
+ <div class="dark">
+ <br>
+ </div>
+ <div class="darker">
+ <br>
+ </div>
+ <div class="darkest">
+ <br>
+ </div>
+ </div>
+ <div class="complement-accent">
+ <div class="lightest">
+ <br>
+ </div>
+ <div class="lighter">
+ <br>
+ </div>
+ <div class="light">
+ <br>
+ </div>
+ <div class="normal">
+ <br>
+ </div>
+ <div class="dark">
+ <br>
+ </div>
+ <div class="darker">
+ <br>
+ </div>
+ <div class="darkest">
+ <br>
+ </div>
+ <br>
+ </div>
+ </body>
+</html>
View
2  src/_analogous_theme.sass
@@ -2,7 +2,7 @@
// In reality, these values should be adjusted to create a more pleasant color combination.
// There is not any mathematical formula for this, but you can use the lighten, darken,
// saturate and desaturate functions to adjust your main colors.
-!base_color = red
+!base_color ||= red
!support_color = adjust_hue(!base_color, 30)
!accent_color = adjust_hue(!base_color, -30)
View
2  src/_basic_theme.sass
@@ -1,4 +1,4 @@
-!base_color = red
+!base_color ||= red
!dark_base_color = darken(!base_color, 50)
!darker_base_color = darken(!base_color, 70)
!darkest_base_color = darken(!base_color, 90)
View
2  src/_complementary_theme.sass
@@ -2,7 +2,7 @@
// In reality, these values should be adjusted to create a more pleasant color combination.
// There is not any mathematical formula for this, but you can use the lighten, darken,
// saturate and desaturate functions to adjust your main colors.
-!base_color = red
+!base_color ||= red
!complementary_color = complement(!base_color)
!base_dark_color = darken(!base_color, 50)
View
42 src/_mixins.sass
@@ -0,0 +1,42 @@
+=annotate(!color, !name)
+ &:before, &:after
+ @if luminosity(!color) < 30
+ :color #ddd
+ @else
+ :color black
+ &:before
+ :content "#{!color}"
+ &:after
+ :content "#{!name}_color"
+ :font-size smaller
+
+=gradient(!color, !name)
+ !darkest = darken(!color, 75%)
+ !text_color = adjust_hue(!color, -180)
+ :background-color = !darkest
+ .darkest
+ :background-color = !darkest
+ +annotate(!darkest, "darkest_#{!name}")
+ .darker
+ !darker = darken(!color, 50%)
+ :background-color = !darker
+ +annotate(!darker, "darker_#{!name}")
+ .dark
+ !dark = darken(!color, 25%)
+ :background-color = !dark
+ +annotate(!dark, "dark_#{!name}")
+ .normal
+ :background-color = !color
+ +annotate(!color, !name)
+ .light
+ !light = lighten(!color, 25%)
+ :background-color = !light
+ +annotate(!light, "light_#{!name}")
+ .lighter
+ !lighter = lighten(!color, 50%)
+ :background-color = !lighter
+ +annotate(!lighter, "lighter_#{!name}")
+ .lightest
+ !lightest = lighten(!color, 75%)
+ :background-color = !lightest
+ +annotate(!lightest, "lightest_#{!name}")
View
2  src/_split_complement_theme.sass
@@ -2,7 +2,7 @@
// In reality, these values should be adjusted to create a more pleasant color combination.
// There is not any mathematical formula for this, but you can use the lighten, darken,
// saturate and desaturate functions to adjust your main colors.
-!base_color = red
+!base_color ||= red
!complement_support_color = adjust_hue(!base_color, 180 + 30)
!complement_accent_color = adjust_hue(!base_color, 180 - 30)
View
2  src/_triadic_theme.sass
@@ -2,7 +2,7 @@
// In reality, these values should be adjusted to create a more pleasant color combination.
// There is not any mathematical formula for this, but you can use the lighten, darken,
// saturate and desaturate functions to adjust your main colors.
-!base_color = red
+!base_color ||= red
!support_color = adjust_hue(!base_color, 120)
!accent_color = adjust_hue(!base_color, -120)
View
26 src/analogous.sass
@@ -0,0 +1,26 @@
+@import compass/utilities.sass
+@import mixins.sass
+// We can change the theme color here by pre-setting the !base_color
+!base_color = #614DA3
+@import analogous_theme.sass
+
+html
+ :height 100%
+
+body#analogous
+ :margin 0
+ :height 100%
+ .base, .support, .accent
+ +clearfix
+ :height 33%
+ div
+ :height 100%
+ :float right
+ :width= (99.9% / 7) - 1%
+ :padding 4px 0.5%
+ .base
+ +gradient(!base_color, "base")
+ .support
+ +gradient(!support_color, "support")
+ .accent
+ +gradient(!accent_color, "accent")
View
22 src/basic.sass
@@ -0,0 +1,22 @@
+@import compass/utilities.sass
+@import mixins.sass
+// We can change the theme color here by pre-setting the !base_color
+!base_color = #614DA3
+@import basic_theme.sass
+
+html
+ :height 100%
+
+body#basic
+ :margin 0
+ :height 100%
+ .base
+ +clearfix
+ :height 100%
+ div
+ :height 100%
+ :float right
+ :width= (99.9% / 7) - 1%
+ :padding 4px 0.5%
+ .base
+ +gradient(!base_color, "base")
View
24 src/complementary.sass
@@ -0,0 +1,24 @@
+@import compass/utilities.sass
+@import mixins.sass
+// We can change the theme color here by pre-setting the !base_color
+!base_color = #614DA3
+@import complementary_theme.sass
+
+html
+ :height 100%
+
+body#complementary
+ :margin 0
+ :height 100%
+ .base, .complement
+ +clearfix
+ :height 50%
+ div
+ :height 100%
+ :float right
+ :width= (99.9% / 7) - 1%
+ :padding 4px 0.5%
+ .base
+ +gradient(!base_color, "base")
+ .complement
+ +gradient(!complementary_color, "complement")
View
26 src/split_complement.sass
@@ -0,0 +1,26 @@
+@import compass/utilities.sass
+@import mixins.sass
+// We can change the theme color here by pre-setting the !base_color
+!base_color = #614DA3
+@import split_complement_theme.sass
+
+html
+ :height 100%
+
+body#split-compliment
+ :margin 0
+ :height 100%
+ .base, .complement-support, .complement-accent
+ +clearfix
+ :height 33%
+ div
+ :height 100%
+ :float right
+ :width= (99.9% / 7) - 1%
+ :padding 4px 0.5%
+ .base
+ +gradient(!base_color, "base")
+ .complement-support
+ +gradient(!complement_support_color, "complement_support")
+ .complement-accent
+ +gradient(!complement_accent_color, "complement_accent")
View
26 src/triadic.sass
@@ -0,0 +1,26 @@
+@import compass/utilities.sass
+@import mixins.sass
+// We can change the theme color here by pre-setting the !base_color
+!base_color = #614DA3
+@import triadic_theme.sass
+
+html
+ :height 100%
+
+body#triadic
+ :margin 0
+ :height 100%
+ .base, .support, .accent
+ +clearfix
+ :height 33%
+ div
+ :height 100%
+ :float right
+ :width= (99.9% / 7) - 1%
+ :padding 4px 0.5%
+ .base
+ +gradient(!base_color, "base")
+ .support
+ +gradient(!support_color, "support")
+ .accent
+ +gradient(!accent_color, "accent")
View
93 stylesheets/analogous.css
@@ -0,0 +1,93 @@
+html { height: 100%; }
+
+body#analogous { margin: 0; height: 100%; }
+body#analogous .base, body#analogous .support, body#analogous .accent { overflow: hidden; display: inline-block; height: 33%; }
+body#analogous .base, body#analogous .support, body#analogous .accent { display: block; }
+body#analogous .base div, body#analogous .support div, body#analogous .accent div { height: 100%; float: right; width: 13.271%; padding: 4px 0.5%; }
+body#analogous .base { background-color: #181329; }
+body#analogous .base .darkest { background-color: #181329; }
+body#analogous .base .darkest:before, body#analogous .base .darkest:after { color: #ddd; }
+body#analogous .base .darkest:before { content: "#181329"; }
+body#analogous .base .darkest:after { content: "darkest_base_color"; font-size: smaller; }
+body#analogous .base .darker { background-color: #302652; }
+body#analogous .base .darker:before, body#analogous .base .darker:after { color: #ddd; }
+body#analogous .base .darker:before { content: "#302652"; }
+body#analogous .base .darker:after { content: "darker_base_color"; font-size: smaller; }
+body#analogous .base .dark { background-color: #493a7a; }
+body#analogous .base .dark:before, body#analogous .base .dark:after { color: black; }
+body#analogous .base .dark:before { content: "#493a7a"; }
+body#analogous .base .dark:after { content: "dark_base_color"; font-size: smaller; }
+body#analogous .base .normal { background-color: #614da3; }
+body#analogous .base .normal:before, body#analogous .base .normal:after { color: black; }
+body#analogous .base .normal:before { content: "#614da3"; }
+body#analogous .base .normal:after { content: "base_color"; font-size: smaller; }
+body#analogous .base .light { background-color: #8675be; }
+body#analogous .base .light:before, body#analogous .base .light:after { color: black; }
+body#analogous .base .light:before { content: "#8675be"; }
+body#analogous .base .light:after { content: "light_base_color"; font-size: smaller; }
+body#analogous .base .lighter { background-color: #afa3d4; }
+body#analogous .base .lighter:before, body#analogous .base .lighter:after { color: black; }
+body#analogous .base .lighter:before { content: "#afa3d4"; }
+body#analogous .base .lighter:after { content: "lighter_base_color"; font-size: smaller; }
+body#analogous .base .lightest { background-color: #d7d1e9; }
+body#analogous .base .lightest:before, body#analogous .base .lightest:after { color: black; }
+body#analogous .base .lightest:before { content: "#d7d1e9"; }
+body#analogous .base .lightest:after { content: "lightest_base_color"; font-size: smaller; }
+body#analogous .support { background-color: #231329; }
+body#analogous .support .darkest { background-color: #231329; }
+body#analogous .support .darkest:before, body#analogous .support .darkest:after { color: #ddd; }
+body#analogous .support .darkest:before { content: "#231329"; }
+body#analogous .support .darkest:after { content: "darkest_support_color"; font-size: smaller; }
+body#analogous .support .darker { background-color: #462652; }
+body#analogous .support .darker:before, body#analogous .support .darker:after { color: #ddd; }
+body#analogous .support .darker:before { content: "#462652"; }
+body#analogous .support .darker:after { content: "darker_support_color"; font-size: smaller; }
+body#analogous .support .dark { background-color: #693a7a; }
+body#analogous .support .dark:before, body#analogous .support .dark:after { color: black; }
+body#analogous .support .dark:before { content: "#693a7a"; }
+body#analogous .support .dark:after { content: "dark_support_color"; font-size: smaller; }
+body#analogous .support .normal { background-color: #8c4da3; }
+body#analogous .support .normal:before, body#analogous .support .normal:after { color: black; }
+body#analogous .support .normal:before { content: "#8c4da3"; }
+body#analogous .support .normal:after { content: "support_color"; font-size: smaller; }
+body#analogous .support .light { background-color: #ab75be; }
+body#analogous .support .light:before, body#analogous .support .light:after { color: black; }
+body#analogous .support .light:before { content: "#ab75be"; }
+body#analogous .support .light:after { content: "light_support_color"; font-size: smaller; }
+body#analogous .support .lighter { background-color: #c7a3d4; }
+body#analogous .support .lighter:before, body#analogous .support .lighter:after { color: black; }
+body#analogous .support .lighter:before { content: "#c7a3d4"; }
+body#analogous .support .lighter:after { content: "lighter_support_color"; font-size: smaller; }
+body#analogous .support .lightest { background-color: #e3d1e9; }
+body#analogous .support .lightest:before, body#analogous .support .lightest:after { color: black; }
+body#analogous .support .lightest:before { content: "#e3d1e9"; }
+body#analogous .support .lightest:after { content: "lightest_support_color"; font-size: smaller; }
+body#analogous .accent { background-color: #131929; }
+body#analogous .accent .darkest { background-color: #131929; }
+body#analogous .accent .darkest:before, body#analogous .accent .darkest:after { color: #ddd; }
+body#analogous .accent .darkest:before { content: "#131929"; }
+body#analogous .accent .darkest:after { content: "darkest_accent_color"; font-size: smaller; }
+body#analogous .accent .darker { background-color: #263252; }
+body#analogous .accent .darker:before, body#analogous .accent .darker:after { color: #ddd; }
+body#analogous .accent .darker:before { content: "#263252"; }
+body#analogous .accent .darker:after { content: "darker_accent_color"; font-size: smaller; }
+body#analogous .accent .dark { background-color: #3a4b7a; }
+body#analogous .accent .dark:before, body#analogous .accent .dark:after { color: black; }
+body#analogous .accent .dark:before { content: "#3a4b7a"; }
+body#analogous .accent .dark:after { content: "dark_accent_color"; font-size: smaller; }
+body#analogous .accent .normal { background-color: #4d64a3; }
+body#analogous .accent .normal:before, body#analogous .accent .normal:after { color: black; }
+body#analogous .accent .normal:before { content: "#4d64a3"; }
+body#analogous .accent .normal:after { content: "accent_color"; font-size: smaller; }
+body#analogous .accent .light { background-color: #7589be; }
+body#analogous .accent .light:before, body#analogous .accent .light:after { color: black; }
+body#analogous .accent .light:before { content: "#7589be"; }
+body#analogous .accent .light:after { content: "light_accent_color"; font-size: smaller; }
+body#analogous .accent .lighter { background-color: #a3b0d4; }
+body#analogous .accent .lighter:before, body#analogous .accent .lighter:after { color: black; }
+body#analogous .accent .lighter:before { content: "#a3b0d4"; }
+body#analogous .accent .lighter:after { content: "lighter_accent_color"; font-size: smaller; }
+body#analogous .accent .lightest { background-color: #d1d8e9; }
+body#analogous .accent .lightest:before, body#analogous .accent .lightest:after { color: black; }
+body#analogous .accent .lightest:before { content: "#d1d8e9"; }
+body#analogous .accent .lightest:after { content: "lightest_accent_color"; font-size: smaller; }
View
35 stylesheets/basic.css
@@ -0,0 +1,35 @@
+html { height: 100%; }
+
+body#basic { margin: 0; height: 100%; }
+body#basic .base { overflow: hidden; display: inline-block; height: 100%; }
+body#basic .base { display: block; }
+body#basic .base div { height: 100%; float: right; width: 13.271%; padding: 4px 0.5%; }
+body#basic .base { background-color: #181329; }
+body#basic .base .darkest { background-color: #181329; }
+body#basic .base .darkest:before, body#basic .base .darkest:after { color: #ddd; }
+body#basic .base .darkest:before { content: "#181329"; }
+body#basic .base .darkest:after { content: "darkest_base_color"; font-size: smaller; }
+body#basic .base .darker { background-color: #302652; }
+body#basic .base .darker:before, body#basic .base .darker:after { color: #ddd; }
+body#basic .base .darker:before { content: "#302652"; }
+body#basic .base .darker:after { content: "darker_base_color"; font-size: smaller; }
+body#basic .base .dark { background-color: #493a7a; }
+body#basic .base .dark:before, body#basic .base .dark:after { color: black; }
+body#basic .base .dark:before { content: "#493a7a"; }
+body#basic .base .dark:after { content: "dark_base_color"; font-size: smaller; }
+body#basic .base .normal { background-color: #614da3; }
+body#basic .base .normal:before, body#basic .base .normal:after { color: black; }
+body#basic .base .normal:before { content: "#614da3"; }
+body#basic .base .normal:after { content: "base_color"; font-size: smaller; }
+body#basic .base .light { background-color: #8675be; }
+body#basic .base .light:before, body#basic .base .light:after { color: black; }
+body#basic .base .light:before { content: "#8675be"; }
+body#basic .base .light:after { content: "light_base_color"; font-size: smaller; }
+body#basic .base .lighter { background-color: #afa3d4; }
+body#basic .base .lighter:before, body#basic .base .lighter:after { color: black; }
+body#basic .base .lighter:before { content: "#afa3d4"; }
+body#basic .base .lighter:after { content: "lighter_base_color"; font-size: smaller; }
+body#basic .base .lightest { background-color: #d7d1e9; }
+body#basic .base .lightest:before, body#basic .base .lightest:after { color: black; }
+body#basic .base .lightest:before { content: "#d7d1e9"; }
+body#basic .base .lightest:after { content: "lightest_base_color"; font-size: smaller; }
View
64 stylesheets/complementary.css
@@ -0,0 +1,64 @@
+html { height: 100%; }
+
+body#complementary { margin: 0; height: 100%; }
+body#complementary .base, body#complementary .complement { overflow: hidden; display: inline-block; height: 50%; }
+body#complementary .base, body#complementary .complement { display: block; }
+body#complementary .base div, body#complementary .complement div { height: 100%; float: right; width: 13.271%; padding: 4px 0.5%; }
+body#complementary .base { background-color: #181329; }
+body#complementary .base .darkest { background-color: #181329; }
+body#complementary .base .darkest:before, body#complementary .base .darkest:after { color: #ddd; }
+body#complementary .base .darkest:before { content: "#181329"; }
+body#complementary .base .darkest:after { content: "darkest_base_color"; font-size: smaller; }
+body#complementary .base .darker { background-color: #302652; }
+body#complementary .base .darker:before, body#complementary .base .darker:after { color: #ddd; }
+body#complementary .base .darker:before { content: "#302652"; }
+body#complementary .base .darker:after { content: "darker_base_color"; font-size: smaller; }
+body#complementary .base .dark { background-color: #493a7a; }
+body#complementary .base .dark:before, body#complementary .base .dark:after { color: black; }
+body#complementary .base .dark:before { content: "#493a7a"; }
+body#complementary .base .dark:after { content: "dark_base_color"; font-size: smaller; }
+body#complementary .base .normal { background-color: #614da3; }
+body#complementary .base .normal:before, body#complementary .base .normal:after { color: black; }
+body#complementary .base .normal:before { content: "#614da3"; }
+body#complementary .base .normal:after { content: "base_color"; font-size: smaller; }
+body#complementary .base .light { background-color: #8675be; }
+body#complementary .base .light:before, body#complementary .base .light:after { color: black; }
+body#complementary .base .light:before { content: "#8675be"; }
+body#complementary .base .light:after { content: "light_base_color"; font-size: smaller; }
+body#complementary .base .lighter { background-color: #afa3d4; }
+body#complementary .base .lighter:before, body#complementary .base .lighter:after { color: black; }
+body#complementary .base .lighter:before { content: "#afa3d4"; }
+body#complementary .base .lighter:after { content: "lighter_base_color"; font-size: smaller; }
+body#complementary .base .lightest { background-color: #d7d1e9; }
+body#complementary .base .lightest:before, body#complementary .base .lightest:after { color: black; }
+body#complementary .base .lightest:before { content: "#d7d1e9"; }
+body#complementary .base .lightest:after { content: "lightest_base_color"; font-size: smaller; }
+body#complementary .complement { background-color: #242913; }
+body#complementary .complement .darkest { background-color: #242913; }
+body#complementary .complement .darkest:before, body#complementary .complement .darkest:after { color: #ddd; }
+body#complementary .complement .darkest:before { content: "#242913"; }
+body#complementary .complement .darkest:after { content: "darkest_complement_color"; font-size: smaller; }
+body#complementary .complement .darker { background-color: #475226; }
+body#complementary .complement .darker:before, body#complementary .complement .darker:after { color: #ddd; }
+body#complementary .complement .darker:before { content: "#475226"; }
+body#complementary .complement .darker:after { content: "darker_complement_color"; font-size: smaller; }
+body#complementary .complement .dark { background-color: #6b7a3a; }
+body#complementary .complement .dark:before, body#complementary .complement .dark:after { color: black; }
+body#complementary .complement .dark:before { content: "#6b7a3a"; }
+body#complementary .complement .dark:after { content: "dark_complement_color"; font-size: smaller; }
+body#complementary .complement .normal { background-color: #8fa34d; }
+body#complementary .complement .normal:before, body#complementary .complement .normal:after { color: black; }
+body#complementary .complement .normal:before { content: "#8fa34d"; }
+body#complementary .complement .normal:after { content: "complement_color"; font-size: smaller; }
+body#complementary .complement .light { background-color: #adbe75; }
+body#complementary .complement .light:before, body#complementary .complement .light:after { color: black; }
+body#complementary .complement .light:before { content: "#adbe75"; }
+body#complementary .complement .light:after { content: "light_complement_color"; font-size: smaller; }
+body#complementary .complement .lighter { background-color: #c8d4a3; }
+body#complementary .complement .lighter:before, body#complementary .complement .lighter:after { color: black; }
+body#complementary .complement .lighter:before { content: "#c8d4a3"; }
+body#complementary .complement .lighter:after { content: "lighter_complement_color"; font-size: smaller; }
+body#complementary .complement .lightest { background-color: #e4e9d1; }
+body#complementary .complement .lightest:before, body#complementary .complement .lightest:after { color: black; }
+body#complementary .complement .lightest:before { content: "#e4e9d1"; }
+body#complementary .complement .lightest:after { content: "lightest_complement_color"; font-size: smaller; }
View
93 stylesheets/split_complement.css
@@ -0,0 +1,93 @@
+html { height: 100%; }
+
+body#split-compliment { margin: 0; height: 100%; }
+body#split-compliment .base, body#split-compliment .complement-support, body#split-compliment .complement-accent { overflow: hidden; display: inline-block; height: 33%; }
+body#split-compliment .base, body#split-compliment .complement-support, body#split-compliment .complement-accent { display: block; }
+body#split-compliment .base div, body#split-compliment .complement-support div, body#split-compliment .complement-accent div { height: 100%; float: right; width: 13.271%; padding: 4px 0.5%; }
+body#split-compliment .base { background-color: #181329; }
+body#split-compliment .base .darkest { background-color: #181329; }
+body#split-compliment .base .darkest:before, body#split-compliment .base .darkest:after { color: #ddd; }
+body#split-compliment .base .darkest:before { content: "#181329"; }
+body#split-compliment .base .darkest:after { content: "darkest_base_color"; font-size: smaller; }
+body#split-compliment .base .darker { background-color: #302652; }
+body#split-compliment .base .darker:before, body#split-compliment .base .darker:after { color: #ddd; }
+body#split-compliment .base .darker:before { content: "#302652"; }
+body#split-compliment .base .darker:after { content: "darker_base_color"; font-size: smaller; }
+body#split-compliment .base .dark { background-color: #493a7a; }
+body#split-compliment .base .dark:before, body#split-compliment .base .dark:after { color: black; }
+body#split-compliment .base .dark:before { content: "#493a7a"; }
+body#split-compliment .base .dark:after { content: "dark_base_color"; font-size: smaller; }
+body#split-compliment .base .normal { background-color: #614da3; }
+body#split-compliment .base .normal:before, body#split-compliment .base .normal:after { color: black; }
+body#split-compliment .base .normal:before { content: "#614da3"; }
+body#split-compliment .base .normal:after { content: "base_color"; font-size: smaller; }
+body#split-compliment .base .light { background-color: #8675be; }
+body#split-compliment .base .light:before, body#split-compliment .base .light:after { color: black; }
+body#split-compliment .base .light:before { content: "#8675be"; }
+body#split-compliment .base .light:after { content: "light_base_color"; font-size: smaller; }
+body#split-compliment .base .lighter { background-color: #afa3d4; }
+body#split-compliment .base .lighter:before, body#split-compliment .base .lighter:after { color: black; }
+body#split-compliment .base .lighter:before { content: "#afa3d4"; }
+body#split-compliment .base .lighter:after { content: "lighter_base_color"; font-size: smaller; }
+body#split-compliment .base .lightest { background-color: #d7d1e9; }
+body#split-compliment .base .lightest:before, body#split-compliment .base .lightest:after { color: black; }
+body#split-compliment .base .lightest:before { content: "#d7d1e9"; }
+body#split-compliment .base .lightest:after { content: "lightest_base_color"; font-size: smaller; }
+body#split-compliment .complement-support { background-color: #192913; }
+body#split-compliment .complement-support .darkest { background-color: #192913; }
+body#split-compliment .complement-support .darkest:before, body#split-compliment .complement-support .darkest:after { color: #ddd; }
+body#split-compliment .complement-support .darkest:before { content: "#192913"; }
+body#split-compliment .complement-support .darkest:after { content: "darkest_complement_support_color"; font-size: smaller; }
+body#split-compliment .complement-support .darker { background-color: #325226; }
+body#split-compliment .complement-support .darker:before, body#split-compliment .complement-support .darker:after { color: #ddd; }
+body#split-compliment .complement-support .darker:before { content: "#325226"; }
+body#split-compliment .complement-support .darker:after { content: "darker_complement_support_color"; font-size: smaller; }
+body#split-compliment .complement-support .dark { background-color: #4b7a3a; }
+body#split-compliment .complement-support .dark:before, body#split-compliment .complement-support .dark:after { color: black; }
+body#split-compliment .complement-support .dark:before { content: "#4b7a3a"; }
+body#split-compliment .complement-support .dark:after { content: "dark_complement_support_color"; font-size: smaller; }
+body#split-compliment .complement-support .normal { background-color: #64a34d; }
+body#split-compliment .complement-support .normal:before, body#split-compliment .complement-support .normal:after { color: black; }
+body#split-compliment .complement-support .normal:before { content: "#64a34d"; }
+body#split-compliment .complement-support .normal:after { content: "complement_support_color"; font-size: smaller; }
+body#split-compliment .complement-support .light { background-color: #89be75; }
+body#split-compliment .complement-support .light:before, body#split-compliment .complement-support .light:after { color: black; }
+body#split-compliment .complement-support .light:before { content: "#89be75"; }
+body#split-compliment .complement-support .light:after { content: "light_complement_support_color"; font-size: smaller; }
+body#split-compliment .complement-support .lighter { background-color: #b0d4a3; }
+body#split-compliment .complement-support .lighter:before, body#split-compliment .complement-support .lighter:after { color: black; }
+body#split-compliment .complement-support .lighter:before { content: "#b0d4a3"; }
+body#split-compliment .complement-support .lighter:after { content: "lighter_complement_support_color"; font-size: smaller; }
+body#split-compliment .complement-support .lightest { background-color: #d8e9d1; }
+body#split-compliment .complement-support .lightest:before, body#split-compliment .complement-support .lightest:after { color: black; }
+body#split-compliment .complement-support .lightest:before { content: "#d8e9d1"; }
+body#split-compliment .complement-support .lightest:after { content: "lightest_complement_support_color"; font-size: smaller; }
+body#split-compliment .complement-accent { background-color: #292313; }
+body#split-compliment .complement-accent .darkest { background-color: #292313; }
+body#split-compliment .complement-accent .darkest:before, body#split-compliment .complement-accent .darkest:after { color: #ddd; }
+body#split-compliment .complement-accent .darkest:before { content: "#292313"; }
+body#split-compliment .complement-accent .darkest:after { content: "darkest_complement_accent_color"; font-size: smaller; }
+body#split-compliment .complement-accent .darker { background-color: #524626; }
+body#split-compliment .complement-accent .darker:before, body#split-compliment .complement-accent .darker:after { color: #ddd; }
+body#split-compliment .complement-accent .darker:before { content: "#524626"; }
+body#split-compliment .complement-accent .darker:after { content: "darker_complement_accent_color"; font-size: smaller; }
+body#split-compliment .complement-accent .dark { background-color: #7a693a; }
+body#split-compliment .complement-accent .dark:before, body#split-compliment .complement-accent .dark:after { color: black; }
+body#split-compliment .complement-accent .dark:before { content: "#7a693a"; }
+body#split-compliment .complement-accent .dark:after { content: "dark_complement_accent_color"; font-size: smaller; }
+body#split-compliment .complement-accent .normal { background-color: #a38c4d; }
+body#split-compliment .complement-accent .normal:before, body#split-compliment .complement-accent .normal:after { color: black; }
+body#split-compliment .complement-accent .normal:before { content: "#a38c4d"; }
+body#split-compliment .complement-accent .normal:after { content: "complement_accent_color"; font-size: smaller; }
+body#split-compliment .complement-accent .light { background-color: #beab75; }
+body#split-compliment .complement-accent .light:before, body#split-compliment .complement-accent .light:after { color: black; }
+body#split-compliment .complement-accent .light:before { content: "#beab75"; }
+body#split-compliment .complement-accent .light:after { content: "light_complement_accent_color"; font-size: smaller; }
+body#split-compliment .complement-accent .lighter { background-color: #d4c7a3; }
+body#split-compliment .complement-accent .lighter:before, body#split-compliment .complement-accent .lighter:after { color: black; }
+body#split-compliment .complement-accent .lighter:before { content: "#d4c7a3"; }
+body#split-compliment .complement-accent .lighter:after { content: "lighter_complement_accent_color"; font-size: smaller; }
+body#split-compliment .complement-accent .lightest { background-color: #e9e3d1; }
+body#split-compliment .complement-accent .lightest:before, body#split-compliment .complement-accent .lightest:after { color: black; }
+body#split-compliment .complement-accent .lightest:before { content: "#e9e3d1"; }
+body#split-compliment .complement-accent .lightest:after { content: "lightest_complement_accent_color"; font-size: smaller; }
View
93 stylesheets/triadic.css
@@ -0,0 +1,93 @@
+html { height: 100%; }
+
+body#triadic { margin: 0; height: 100%; }
+body#triadic .base, body#triadic .support, body#triadic .accent { overflow: hidden; display: inline-block; height: 33%; }
+body#triadic .base, body#triadic .support, body#triadic .accent { display: block; }
+body#triadic .base div, body#triadic .support div, body#triadic .accent div { height: 100%; float: right; width: 13.271%; padding: 4px 0.5%; }
+body#triadic .base { background-color: #181329; }
+body#triadic .base .darkest { background-color: #181329; }
+body#triadic .base .darkest:before, body#triadic .base .darkest:after { color: #ddd; }
+body#triadic .base .darkest:before { content: "#181329"; }
+body#triadic .base .darkest:after { content: "darkest_base_color"; font-size: smaller; }
+body#triadic .base .darker { background-color: #302652; }
+body#triadic .base .darker:before, body#triadic .base .darker:after { color: #ddd; }
+body#triadic .base .darker:before { content: "#302652"; }
+body#triadic .base .darker:after { content: "darker_base_color"; font-size: smaller; }
+body#triadic .base .dark { background-color: #493a7a; }
+body#triadic .base .dark:before, body#triadic .base .dark:after { color: black; }
+body#triadic .base .dark:before { content: "#493a7a"; }
+body#triadic .base .dark:after { content: "dark_base_color"; font-size: smaller; }
+body#triadic .base .normal { background-color: #614da3; }
+body#triadic .base .normal:before, body#triadic .base .normal:after { color: black; }
+body#triadic .base .normal:before { content: "#614da3"; }
+body#triadic .base .normal:after { content: "base_color"; font-size: smaller; }
+body#triadic .base .light { background-color: #8675be; }
+body#triadic .base .light:before, body#triadic .base .light:after { color: black; }
+body#triadic .base .light:before { content: "#8675be"; }
+body#triadic .base .light:after { content: "light_base_color"; font-size: smaller; }
+body#triadic .base .lighter { background-color: #afa3d4; }
+body#triadic .base .lighter:before, body#triadic .base .lighter:after { color: black; }
+body#triadic .base .lighter:before { content: "#afa3d4"; }
+body#triadic .base .lighter:after { content: "lighter_base_color"; font-size: smaller; }
+body#triadic .base .lightest { background-color: #d7d1e9; }
+body#triadic .base .lightest:before, body#triadic .base .lightest:after { color: black; }
+body#triadic .base .lightest:before { content: "#d7d1e9"; }
+body#triadic .base .lightest:after { content: "lightest_base_color"; font-size: smaller; }
+body#triadic .support { background-color: #291813; }
+body#triadic .support .darkest { background-color: #291813; }
+body#triadic .support .darkest:before, body#triadic .support .darkest:after { color: #ddd; }
+body#triadic .support .darkest:before { content: "#291813"; }
+body#triadic .support .darkest:after { content: "darkest_support_color"; font-size: smaller; }
+body#triadic .support .darker { background-color: #523026; }
+body#triadic .support .darker:before, body#triadic .support .darker:after { color: #ddd; }
+body#triadic .support .darker:before { content: "#523026"; }
+body#triadic .support .darker:after { content: "darker_support_color"; font-size: smaller; }
+body#triadic .support .dark { background-color: #7a493a; }
+body#triadic .support .dark:before, body#triadic .support .dark:after { color: black; }
+body#triadic .support .dark:before { content: "#7a493a"; }
+body#triadic .support .dark:after { content: "dark_support_color"; font-size: smaller; }
+body#triadic .support .normal { background-color: #a3614d; }
+body#triadic .support .normal:before, body#triadic .support .normal:after { color: black; }
+body#triadic .support .normal:before { content: "#a3614d"; }
+body#triadic .support .normal:after { content: "support_color"; font-size: smaller; }
+body#triadic .support .light { background-color: #be8675; }
+body#triadic .support .light:before, body#triadic .support .light:after { color: black; }
+body#triadic .support .light:before { content: "#be8675"; }
+body#triadic .support .light:after { content: "light_support_color"; font-size: smaller; }
+body#triadic .support .lighter { background-color: #d4afa3; }
+body#triadic .support .lighter:before, body#triadic .support .lighter:after { color: black; }
+body#triadic .support .lighter:before { content: "#d4afa3"; }
+body#triadic .support .lighter:after { content: "lighter_support_color"; font-size: smaller; }
+body#triadic .support .lightest { background-color: #e9d7d1; }
+body#triadic .support .lightest:before, body#triadic .support .lightest:after { color: black; }
+body#triadic .support .lightest:before { content: "#e9d7d1"; }
+body#triadic .support .lightest:after { content: "lightest_support_color"; font-size: smaller; }
+body#triadic .accent { background-color: #132918; }
+body#triadic .accent .darkest { background-color: #132918; }
+body#triadic .accent .darkest:before, body#triadic .accent .darkest:after { color: #ddd; }
+body#triadic .accent .darkest:before { content: "#132918"; }
+body#triadic .accent .darkest:after { content: "darkest_accent_color"; font-size: smaller; }
+body#triadic .accent .darker { background-color: #265231; }
+body#triadic .accent .darker:before, body#triadic .accent .darker:after { color: #ddd; }
+body#triadic .accent .darker:before { content: "#265231"; }
+body#triadic .accent .darker:after { content: "darker_accent_color"; font-size: smaller; }
+body#triadic .accent .dark { background-color: #3a7a49; }
+body#triadic .accent .dark:before, body#triadic .accent .dark:after { color: black; }
+body#triadic .accent .dark:before { content: "#3a7a49"; }
+body#triadic .accent .dark:after { content: "dark_accent_color"; font-size: smaller; }
+body#triadic .accent .normal { background-color: #4da361; }
+body#triadic .accent .normal:before, body#triadic .accent .normal:after { color: black; }
+body#triadic .accent .normal:before { content: "#4da361"; }
+body#triadic .accent .normal:after { content: "accent_color"; font-size: smaller; }
+body#triadic .accent .light { background-color: #75be86; }
+body#triadic .accent .light:before, body#triadic .accent .light:after { color: black; }
+body#triadic .accent .light:before { content: "#75be86"; }
+body#triadic .accent .light:after { content: "light_accent_color"; font-size: smaller; }
+body#triadic .accent .lighter { background-color: #a3d4af; }
+body#triadic .accent .lighter:before, body#triadic .accent .lighter:after { color: black; }
+body#triadic .accent .lighter:before { content: "#a3d4af"; }
+body#triadic .accent .lighter:after { content: "lighter_accent_color"; font-size: smaller; }
+body#triadic .accent .lightest { background-color: #d1e9d7; }
+body#triadic .accent .lightest:before, body#triadic .accent .lightest:after { color: black; }
+body#triadic .accent .lightest:before { content: "#d1e9d7"; }
+body#triadic .accent .lightest:after { content: "lightest_accent_color"; font-size: smaller; }
View
81 triadic_example.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Triadic Color Example</title>
+ <link rel="stylesheet" href="stylesheets/triadic.css" type="text/css" media="screen" charset="utf-8">
+ </head>
+ <body id="triadic">
+ <div class="base">
+ <div class="lightest">
+ <br>
+ </div>
+ <div class="lighter">
+ <br>
+ </div>
+ <div class="light">
+ <br>
+ </div>
+ <div class="normal">
+ <br>
+ </div>
+ <div class="dark">
+ <br>
+ </div>
+ <div class="darker">
+ <br>
+ </div>
+ <div class="darkest">
+ <br>
+ </div>
+ </div>
+ <div class="support">
+ <div class="lightest">
+ <br>
+ </div>
+ <div class="lighter">
+ <br>
+ </div>
+ <div class="light">
+ <br>
+ </div>
+ <div class="normal">
+ <br>
+ </div>
+ <div class="dark">
+ <br>
+ </div>
+ <div class="darker">
+ <br>
+ </div>
+ <div class="darkest">
+ <br>
+ </div>
+ </div>
+ <div class="accent">
+ <div class="lightest">
+ <br>
+ </div>
+ <div class="lighter">
+ <br>
+ </div>
+ <div class="light">
+ <br>
+ </div>
+ <div class="normal">
+ <br>
+ </div>
+ <div class="dark">
+ <br>
+ </div>
+ <div class="darker">
+ <br>
+ </div>
+ <div class="darkest">
+ <br>
+ </div>
+ <br>
+ </div>
+ </body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.