From 63ae89b30ae7dd615b4f88c4cafa9142b2aa8a50 Mon Sep 17 00:00:00 2001 From: Krophil Date: Sat, 2 Sep 2017 13:41:29 +0200 Subject: [PATCH] Add color palette creator --- doc/Color Theory - Palette Creator/README.txt | 3 + .../css/style.css | 74 +++ doc/Color Theory - Palette Creator/index.html | 422 ++++++++++++++++++ .../js/index.js | 103 +++++ .../license.txt | 16 + 5 files changed, 618 insertions(+) create mode 100644 doc/Color Theory - Palette Creator/README.txt create mode 100644 doc/Color Theory - Palette Creator/css/style.css create mode 100644 doc/Color Theory - Palette Creator/index.html create mode 100644 doc/Color Theory - Palette Creator/js/index.js create mode 100644 doc/Color Theory - Palette Creator/license.txt 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 + + + + + + + + + + +
+
+
+ +
+
+
+ First color +
+
+ +
+
+
+ Second color +
+
+ +
+
+
+
+
+ Primary color +
+
+ +
+
+
+ Secondary color +
+
+ +
+
+
+
+
+ Text on primary color +
+
+ Ab +
+ +
+
+
+ Text on complementary color +
+
+ Ab +
+ +
+
+
+
+
+ Complementary neutral light color +
+
+ Ab +
+ +
+
+
+ Complementary neutral color +
+
+ Ab +
+ +
+
+
+ Complementary neutral dark color +
+
+ Ab +
+ +
+
+
+ Primary neutral light color +
+
+ Ab +
+ +
+
+
+ Primary neutral color +
+
+ Ab +
+ +
+
+
+ Primary neutral dark color +
+
+ Ab +
+ +
+
+
+
+
+ "White" color +
+
+ Ab +
+ +
+
+
+ "Black" color +
+
+ Ab +
+ +
+
+
+
+
+ Primary light color +
+
+ Ab +
+ +
+
+
+ Primary color +
+
+ Ab +
+ +
+
+
+ Primary dark color +
+
+ Ab +
+ +
+
+
+
+ + + + + + + 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 @@ + + +