diff --git a/doc/Color Theory - Palette Creator/README.txt b/doc/Color Theory - Palette Creator/README.txt
new file mode 100644
index 00000000..81ec8d00
--- /dev/null
+++ b/doc/Color Theory - Palette Creator/README.txt
@@ -0,0 +1,3 @@
+A Pen created at CodePen.io. You can find this one at https://codepen.io/anon/pen/PKVVXY.
+
+This page was used to generate the color palette of the sith.
\ No newline at end of file
diff --git a/doc/Color Theory - Palette Creator/css/style.css b/doc/Color Theory - Palette Creator/css/style.css
new file mode 100644
index 00000000..c2172d22
--- /dev/null
+++ b/doc/Color Theory - Palette Creator/css/style.css
@@ -0,0 +1,74 @@
+html, body {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+ background: #424242;
+ font-size: 16px;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ font-size: .875rem;
+}
+
+.form {
+ margin: 5rem 0;
+ width: 30rem;
+ background: #FAFAFA;
+ padding: 2rem;
+ border-radius: .25rem;
+ box-shadow: 0 4px 5px hsla(0, 0%, 0%, .5);
+}
+
+.form-group {
+ display: flex;
+ flex-flow: column nowrap;
+}
+
+.form-group:not(:first-child) {
+ margin-top: 1rem;
+}
+
+.color-display {
+ display: flex;
+ align-items: center;
+}
+
+.color-group {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.color-group > .color-code {
+ flex: 1 0 auto;
+ margin-left: 1rem;
+}
+
+.color-hue {
+ height: 2rem;
+ align-self: stretch;
+ background-image: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red)
+}
+
+.form-input {
+ width: 100%;
+ margin: 0;
+}
+
+.color-preview {
+ height: 5rem;
+ width: 5rem;
+ background-color: lightgrey;
+ border: 1px solid black;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.color-text {
+ font-size: 3rem;
+}
\ No newline at end of file
diff --git a/doc/Color Theory - Palette Creator/index.html b/doc/Color Theory - Palette Creator/index.html
new file mode 100644
index 00000000..b67eb520
--- /dev/null
+++ b/doc/Color Theory - Palette Creator/index.html
@@ -0,0 +1,422 @@
+
+
+
+
+ Color Theory Palette creator
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/doc/Color Theory - Palette Creator/js/index.js b/doc/Color Theory - Palette Creator/js/index.js
new file mode 100644
index 00000000..f085c83f
--- /dev/null
+++ b/doc/Color Theory - Palette Creator/js/index.js
@@ -0,0 +1,103 @@
+/* jshint esversion: 6 */
+
+// This is using Sass.js to use Sass built-in color mixing functions
+
+const firstColorChooser = document.forms['color-theory']['first-color'];
+const firstColor = document.querySelector('.first-color');
+const secondColor = document.querySelector('.second-color');
+
+let hue = undefined;
+let comp = undefined;
+
+updateColors();
+Sass.options({
+ precision: 1
+});
+computeScss();
+
+document.forms['color-theory']['first-color'].addEventListener('input', updateColors);
+
+document.forms['color-theory']['first-color'].addEventListener('change', computeScss);
+
+function updateColors(ev) {
+ hue = parseInt(firstColorChooser.value);
+ comp = (hue + 180) % 360;
+ setColorPreview([firstColor], `hsl(${hue}, 100%, 50%)`);
+ setColorPreview([secondColor], `hsl(${comp}, 100%, 50%)`);
+}
+
+function setColorPreview(fieldsets, color) {
+ Array.from(fieldsets).forEach(fieldset => {
+ const preview = fieldset.querySelector('.color-preview');
+ preview.style.backgroundColor = fieldset.querySelector('.color-code').value = color;
+ const text = fieldset.querySelector('.color-text')
+ if(text)
+ text.style.color = computeTextColor(window.getComputedStyle(preview).backgroundColor);
+ });
+}
+
+function setColorText(fieldsets, bg, text) {
+ Array.from(fieldsets).forEach(fieldset => {
+ fieldset.querySelector('.color-preview').style.backgroundColor = bg;
+ fieldset.querySelector('.color-text').style.color = fieldset.querySelector('.color-code').value = text;
+ });
+}
+
+function computeScss() {
+ Sass.compile(
+ `$first-color: hsl(${hue}, 100%, 50%);` +
+ document.querySelector('#scss-template').content.firstElementChild.textContent, computedScssHandler);
+
+}
+
+function computedScssHandler(result) {
+ let colors = {};
+ result.text.split('\n\n').forEach(rule => {
+ const color = /\.([\w\-]+) {\s*color: (hsl\() (\d{1,3}(?:\.\d+)?)deg(.*) (\));\s*}/.exec(rule).splice(1, 5).join('').split('hsl');
+ colors[color[0]] = `hsl${color[1]}`;
+ });
+
+ for (let colorName in colors)
+ if (document.querySelector(`.${colorName}`)) setColorPreview(document.querySelectorAll(`.${colorName}`), colors[colorName]);
+
+ const primaryTextColor = computeTextColor(window.getComputedStyle(document.querySelector('.primary-color .color-preview')).backgroundColor);
+ const complementaryTextColor = computeTextColor(window.getComputedStyle(document.querySelector('.complementary-color .color-preview')).backgroundColor);
+ setColorText([document.querySelector('.text-on-primary')], document.querySelector('.primary-color .color-preview').style.backgroundColor, primaryTextColor);
+ setColorText([document.querySelector('.text-on-complementary')], document.querySelector('.complementary-color .color-preview').style.backgroundColor, complementaryTextColor)
+}
+
+function computeTextColor(colorStr) {
+ const black = [0, 0, 0, .87];
+ const white = [255, 255, 255, 1];
+
+ [, , r, g, b, a] = /(rgba?)\((\d{1,3}), (\d{1,3}), (\d{1,3})(?:, (\d(?:\.\d+)))?\)/.exec(colorStr);
+ const color = [parseInt(r), parseInt(g), parseInt(b), parseFloat(a == undefined ? 1 : a)]
+ const blackContrast = computeConstrastRatio(black, color);
+ const whiteContrast = computeConstrastRatio(white, color);
+ return blackContrast < whiteContrast ? `hsl(0, 0%, 100%)` : `hsla(0, 0%, 0%, 0.87)`
+}
+
+function computeConstrastRatio([fr, fg, fb, fa], [br, bg, bb, ba]) {
+ if (fa < 1) {
+ fr = fr * fa + br * (1 - fa);
+ fg = fg * fa + bg * (1 - fa);
+ fb = fb * fa + bb * (1 - fa);
+ fa = 1;
+ }
+ const fl = luminance([fr, fg, fb]);
+ const bl = luminance([br, bg, bb]);
+
+ if (fl < bl)
+ return (bl + .05) / (fl + .05);
+ else
+ return (fl + .05) / (bl + .05);
+}
+
+function luminance([r, g, b]) {
+ return .2126 * colorComponent(r) + .7152 * colorComponent(g) + .0722 * colorComponent(b);
+}
+
+function colorComponent(color) {
+ const c = color / 255;
+ return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
\ No newline at end of file
diff --git a/doc/Color Theory - Palette Creator/license.txt b/doc/Color Theory - Palette Creator/license.txt
new file mode 100644
index 00000000..5514f9a9
--- /dev/null
+++ b/doc/Color Theory - Palette Creator/license.txt
@@ -0,0 +1,16 @@
+
+
+