<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mike-schultz/pen/evKWYb" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">* {
box-sizing: border-box;
}
html,
body {
font-family: 'BlinkMacSystemFont', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #fff;
font-size: 12px;
margin: 0;
overflow: hidden;
height: 100%;
}
#container {
width: 370px;
max-width: 370px;
height: 410px;
position: relative;
box-shadow: 10px 10px 24px -12px rgba(0, 0, 0, 0.75);
}
.flow {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#key {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 60px;
width: 80px;
right: 0;
bottom: 0;
}
#key > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
height: 100%;
}
#tooltip {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: fixed;
min-width: 150px;
height: 40px;
top: 0;
left: 0;
padding: 10px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 2;
}
#clipboard {
position: fixed;
z-index: -1;
top: -370px;
}
#controls {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #263238;
height: 30px;
font-size: 18px;
padding: 2px;
border-radius: 5px 5px 0 0;
}
#controls .col {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#controls .col * {
margin: 0 2px;
}
#pin-state {
display: none;
}
#pin-state:checked ~ label {
color: #00b8d4;
}
#pin:hover {
color: #84ffff;
}
#hide:hover {
color: #ffea00;
}
#close:hover {
color: #ff1744;
}
#mode-selector {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#mode-selector:hover {
color: #00e5ff;
}
#current-output {
font-size: 18px;
}
.cell {
width: 20px;
height: 20px;
border: 0px solid rgba(0, 0, 0, 0.25);
line-height: 1.5em;
}
.cell:hover {
z-index: 1;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
}
.gutter.cell {
width: 90px;
text-align: center;
}
.color {
cursor: pointer;
}
.arrow {
width: 0;
height: 0;
cursor: pointer;
-webkit-user-select: none;
}
.arrow.left {
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid white;
}
.arrow.right {
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid white;
}
.arrow.left:hover {
border-left: 10px solid #00e5ff;
}
.arrow.right:hover {
border-right: 10px solid #00e5ff;
}
.clickable {
cursor: pointer;
}
.hidden {
opacity: 0;
z-index: -1 !important;
}
h1, h3 {
font-weight: 200;
color: #222;
}
header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
header h1 {
font-size: 4em;
margin-left: 0.25em;
}
section h3 {
margin: 0 0 2em;
text-align: center;
}
footer {
margin: 3em;
color: #222;
}
a, a:visited {
color: #2196f3;
}
</style></head><body>
<div class="flow">
<header>
<svg height="80px" viewBox="0 0 100 100" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
<style>
circle { opacity: 0.8; }
</style>
<circle cx="32" cy="50" r="30" fill="#4DD0E1"></circle>
<circle cx="68" cy="34" r="30" fill="#FFF04D"></circle>
<circle cx="60" cy="68" r="30" fill="#F84D8A"></circle>
</svg>
<h1>Materialette</h1>
</header>
<section>
<h3>A Material Design color palette, ported from my electron widget app:<br>
<a href="https://github.com/mike-schultz/materialette" target="_blank">https://github.com/mike-schultz/materialette</a>
</h3>
</section>
<a href="https://github.com/mike-schultz/materialette"></a>
<div id="container">
<section id="controls">
<div class="col">
<div id="mode-selector" class="clickable hint--bottom" aria-label="Toggle modes" onclick="changeOutput()">
<div id="current-output">hex</div>
<div><i class="fa fa-retweet"></i></div>
</div>
</div>
<div class="col">
<input id="pin-state" type="checkbox" />
<label id="pin" for="pin-state" class="clickable hint--bottom-left" aria-label="Pin to keep visible"><i class="fa fa-thumb-tack"></i></label>
<div id="hide" class="clickable hint--bottom" aria-label="Hide"><i class="fa fa-close"></i></div>
<div id="close" class="clickable hint--bottom-left" aria-label="Quit"><i class="fa fa-power-off"></i></div>
</div>
</section>
<div id="key">
<div class="color" style="background-color:#FFF; color: #000;" data-series=""> white </div>
<div class="color" style="background-color:#000; color: #FFF" data-series=""> black </div>
</div>
<div id="tooltip" class="hidden">
Color
</div>
<textarea id="clipboard" readonly></textarea>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >'use strict';
var CONTAINER_WIDTH = 370;
var TOOLTIP_WIDTH = 140;
var TOOLTIP_HEIGHT = 40;
var State = {
output: ['hex', 'rgb'],
index: 0,
tooltipEle: document.getElementById('tooltip'),
currentColor: null,
pinnedEle: document.getElementById('pin-state'),
// sharedObj: (require('electron').remote).getGlobal('sharedObj'),
lastTooltip: 0,
tooltipLock: false
};
var colors = {
"red": [["50", "#FFEBEE"], ["100", "#FFCDD2"], ["200", "#EF9A9A"], ["300", "#E57373"], ["400", "#EF5350"], ["500", "#F44336"], ["600", "#E53935"], ["700", "#D32F2F"], ["800", "#C62828"], ["900", "#B71C1C"], ["A100", "#FF8A80"], ["A200", "#FF5252"], ["A400", "#FF1744"], ["A700", "#D50000"]],
"pink": [["50", "#FCE4EC"], ["100", "#F8BBD0"], ["200", "#F48FB1"], ["300", "#F06292"], ["400", "#EC407A"], ["500", "#E91E63"], ["600", "#D81B60"], ["700", "#C2185B"], ["800", "#AD1457"], ["900", "#880E4F"], ["A100", "#FF80AB"], ["A200", "#FF4081"], ["A400", "#F50057"], ["A700", "#C51162"]],
"purple": [["50", "#F3E5F5"], ["100", "#E1BEE7"], ["200", "#CE93D8"], ["300", "#BA68C8"], ["400", "#AB47BC"], ["500", "#9C27B0"], ["600", "#8E24AA"], ["700", "#7B1FA2"], ["800", "#6A1B9A"], ["900", "#4A148C"], ["A100", "#EA80FC"], ["A200", "#E040FB"], ["A400", "#D500F9"], ["A700", "#AA00FF"]],
"deepPurple": [["50", "#EDE7F6"], ["100", "#D1C4E9"], ["200", "#B39DDB"], ["300", "#9575CD"], ["400", "#7E57C2"], ["500", "#673AB7"], ["600", "#5E35B1"], ["700", "#512DA8"], ["800", "#4527A0"], ["900", "#311B92"], ["A100", "#B388FF"], ["A200", "#7C4DFF"], ["A400", "#651FFF"], ["A700", "#6200EA"]],
"indigo": [["50", "#E8EAF6"], ["100", "#C5CAE9"], ["200", "#9FA8DA"], ["300", "#7986CB"], ["400", "#5C6BC0"], ["500", "#3F51B5"], ["600", "#3949AB"], ["700", "#303F9F"], ["800", "#283593"], ["900", "#1A237E"], ["A100", "#8C9EFF"], ["A200", "#536DFE"], ["A400", "#3D5AFE"], ["A700", "#304FFE"]],
"blue": [["50", "#E3F2FD"], ["100", "#BBDEFB"], ["200", "#90CAF9"], ["300", "#64B5F6"], ["400", "#42A5F5"], ["500", "#2196F3"], ["600", "#1E88E5"], ["700", "#1976D2"], ["800", "#1565C0"], ["900", "#0D47A1"], ["A100", "#82B1FF"], ["A200", "#448AFF"], ["A400", "#2979FF"], ["A700", "#2962FF"]],
"lightBlue": [["50", "#E1F5FE"], ["100", "#B3E5FC"], ["200", "#81D4FA"], ["300", "#4FC3F7"], ["400", "#29B6F6"], ["500", "#03A9F4"], ["600", "#039BE5"], ["700", "#0288D1"], ["800", "#0277BD"], ["900", "#01579B"], ["A100", "#80D8FF"], ["A200", "#40C4FF"], ["A400", "#00B0FF"], ["A700", "#0091EA"]],
"teal": [["50", "#E0F2F1"], ["100", "#B2DFDB"], ["200", "#80CBC4"], ["300", "#4DB6AC"], ["400", "#26A69A"], ["500", "#009688"], ["600", "#00897B"], ["700", "#00796B"], ["800", "#00695C"], ["900", "#004D40"], ["A100", "#A7FFEB"], ["A200", "#64FFDA"], ["A400", "#1DE9B6"], ["A700", "#00BFA5"]],
"cyan": [["50", "#E0F7FA"], ["100", "#B2EBF2"], ["200", "#80DEEA"], ["300", "#4DD0E1"], ["400", "#26C6DA"], ["500", "#00BCD4"], ["600", "#00ACC1"], ["700", "#0097A7"], ["800", "#00838F"], ["900", "#006064"], ["A100", "#84FFFF"], ["A200", "#18FFFF"], ["A400", "#00E5FF"], ["A700", "#00B8D4"]],
"green": [["50", "#E8F5E9"], ["100", "#C8E6C9"], ["200", "#A5D6A7"], ["300", "#81C784"], ["400", "#66BB6A"], ["500", "#4CAF50"], ["600", "#43A047"], ["700", "#388E3C"], ["800", "#2E7D32"], ["900", "#1B5E20"], ["A100", "#B9F6CA"], ["A200", "#69F0AE"], ["A400", "#00E676"], ["A700", "#00C853"]],
"lightGreen": [["50", "#F1F8E9"], ["100", "#DCEDC8"], ["200", "#C5E1A5"], ["300", "#AED581"], ["400", "#9CCC65"], ["500", "#8BC34A"], ["600", "#7CB342"], ["700", "#689F38"], ["800", "#558B2F"], ["900", "#33691E"], ["A100", "#CCFF90"], ["A200", "#B2FF59"], ["A400", "#76FF03"], ["A700", "#64DD17"]],
"lime": [["50", "#F9FBE7"], ["100", "#F0F4C3"], ["200", "#E6EE9C"], ["300", "#DCE775"], ["400", "#D4E157"], ["500", "#CDDC39"], ["600", "#C0CA33"], ["700", "#AFB42B"], ["800", "#9E9D24"], ["900", "#827717"], ["A100", "#F4FF81"], ["A200", "#EEFF41"], ["A400", "#C6FF00"], ["A700", "#AEEA00"]],
"yellow": [["50", "#FFFDE7"], ["100", "#FFF9C4"], ["200", "#FFF59D"], ["300", "#FFF176"], ["400", "#FFEE58"], ["500", "#FFEB3B"], ["600", "#FDD835"], ["700", "#FBC02D"], ["800", "#F9A825"], ["900", "#F57F17"], ["A100", "#FFFF8D"], ["A200", "#FFFF00"], ["A400", "#FFEA00"], ["A700", "#FFD600"]],
"amber": [["50", "#FFF8E1"], ["100", "#FFECB3"], ["200", "#FFE082"], ["300", "#FFD54F"], ["400", "#FFCA28"], ["500", "#FFC107"], ["600", "#FFB300"], ["700", "#FFA000"], ["800", "#FF8F00"], ["900", "#FF6F00"], ["A100", "#FFE57F"], ["A200", "#FFD740"], ["A400", "#FFC400"], ["A700", "#FFAB00"]],
"orange": [["50", "#FFF3E0"], ["100", "#FFE0B2"], ["200", "#FFCC80"], ["300", "#FFB74D"], ["400", "#FFA726"], ["500", "#FF9800"], ["600", "#FB8C00"], ["700", "#F57C00"], ["800", "#EF6C00"], ["900", "#E65100"], ["A100", "#FFD180"], ["A200", "#FFAB40"], ["A400", "#FF9100"], ["A700", "#FF6D00"]],
"deepOrange": [["50", "#FBE9E7"], ["100", "#FFCCBC"], ["200", "#FFAB91"], ["300", "#FF8A65"], ["400", "#FF7043"], ["500", "#FF5722"], ["600", "#F4511E"], ["700", "#E64A19"], ["800", "#D84315"], ["900", "#BF360C"], ["A100", "#FF9E80"], ["A200", "#FF6E40"], ["A400", "#FF3D00"], ["A700", "#DD2C00"]],
"grey": [["50", "#FAFAFA"], ["100", "#F5F5F5"], ["200", "#EEEEEE"], ["300", "#E0E0E0"], ["400", "#BDBDBD"], ["500", "#9E9E9E"], ["600", "#757575"], ["700", "#616161"], ["800", "#424242"], ["900", "#212121"]],
"blueGrey": [["50", "#ECEFF1"], ["100", "#CFD8DC"], ["200", "#B0BEC5"], ["300", "#90A4AE"], ["400", "#78909C"], ["500", "#607D8B"], ["600", "#546E7A"], ["700", "#455A64"], ["800", "#37474F"], ["900", "#263238"]],
"brown": [["50", "#EFEBE9"], ["100", "#D7CCC8"], ["200", "#BCAAA4"], ["300", "#A1887F"], ["400", "#8D6E63"], ["500", "#795548"], ["600", "#6D4C41"], ["700", "#5D4037"], ["800", "#4E342E"], ["900", "#3E2723"]]
};
// Populate color cells
var container = document.getElementById('container');
var _loop = function _loop(name) {
var row = document.createElement('section');
row.className = 'row';
colors[name].forEach(function (val, idx) {
//Append the color cell
var cell = createCell(val[0], val[1]);
row.appendChild(cell);
//Create the gutter cell from the 500 series
if (val[0] === '500') {
row.insertBefore(createCell(val[0], val[1], true, name), row.childNodes[0]);
}
});
container.appendChild(row);
};
for (var name in colors) {
_loop(name);
}
function createCell(series, color, isGutter, name) {
var cell = document.createElement('div');
cell.className = 'cell color';
if (isGutter) {
cell.innerHTML = '<span>' + name + '</span>';
cell.className += ' gutter';
}
cell.setAttribute('data-series', series);
cell.style.backgroundColor = color;
cell.style.color = luminance(color, '#fff', '#444');
return cell;
}
// Track tooltip movement and display a color + info
document.body.addEventListener('mousemove', function (e) {
var tooltip = State.tooltipEle;
var node = undefined;
if (e.target.className.indexOf('color') > -1) {
node = e.target;
} else if (e.target.parentNode.className.indexOf('color') > -1) {
node = e.target.parentNode;
} else {
tooltip.className = "hidden";
State.currentColor = null;
return;
}
State.lastTooltip = performance.now();
var rgb = node.style.backgroundColor;
var series = node.getAttribute('data-series');
var match = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/.exec(rgb);
var hex = rgbToHex(match[1], match[2], match[3]);
var output = undefined;
var value = undefined;
switch (State.output[State.index]) {
case 'rgb':
value = rgb;
break;
case 'hex':
value = hex;
break;
}
tooltip.style.backgroundColor = value;
if (!State.tooltipLock) {
tooltip.innerHTML = '<span style=\'font-size:1.2em\'>' + value + '</span>' + series;
}
tooltip.style.color = luminance(hex, '#fff', '#000');
State.currentColor = value;
// Adjust bounds of tooltip to avoid edge bleeding
var offsetX = e.clientX - TOOLTIP_WIDTH / 2;
var offsetY = e.clientY - TOOLTIP_HEIGHT - 10;
if (offsetX < 0) {
offsetX = e.clientX + 30;
} else if (offsetX > CONTAINER_WIDTH - TOOLTIP_WIDTH) {
offsetX -= 65;
}
if (offsetY < 0) {
offsetY = e.clientY + 25;
}
tooltip.style.top = offsetY + 'px';
tooltip.style.left = offsetX + 'px';
tooltip.className = "";
});
// Copy the user's selected color to the clipboard
document.body.addEventListener('click', copyColor);
document.body.addEventListener('touchend', copyColor);
function copyColor(e) {
if (State.currentColor !== null) {
var successful;
(function () {
State.tooltipLock = true;
var tooltip = State.tooltipEle;
var tooltipMsg = 'Copied to clipboard!';
State.lastTooltip = performance.now();
tooltip.className = "";
var clipboard = document.getElementById('clipboard');
var output = undefined;
clipboard.innerHTML = output = State.currentColor;
clipboard.select();
try {
(function () {
successful = document.execCommand('copy');
var prevValue = tooltip.innerHTML;
tooltip.innerHTML = "Copied to clipboard!";
setTimeout(function () {
State.tooltipLock = false;
if (tooltip.innerHTML === tooltipMsg) {
tooltip.innerHTML = prevValue;
}
}, 1000);
})();
} catch (err) {
console.log(err);
}
})();
}
}
document.onkeydown = function (e) {
if (e.keyCode === 27) {
hideApp();
}
};
setInterval(function () {
if (performance.now() - State.lastTooltip >= 2000) {
tooltip.className = "hidden";
}
}, 2000);
/**
* Toggle between HEX or RGB for the tooltip + copy
*/
function changeOutput() {
State.index++;
if (State.index === State.output.length) {
State.index = 0;
}
document.getElementById('current-output').innerHTML = State.output[State.index];
}
function closeApp() {
State.sharedObj.quit();
}
function hideApp() {
State.sharedObj.hide();
}
function togglePinned() {
State.sharedObj.pinned = State.pinnedEle.checked;
}
/** Utilities **/
function rgbToHex(r, g, b) {
return "#" + ((1 << 24) + (parseInt(r) << 16) + (parseInt(g) << 8) + parseInt(b)).toString(16).slice(1);
}
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
function luminance(sHexColor, sLight, sDark) {
var oRGB = hexToRgb(sHexColor);
var yiq = (oRGB.r * 299 + oRGB.g * 587 + oRGB.b * 114) / 1000;
return yiq >= 128 ? sDark : sLight;
}
//# sourceURL=pen.js
</script>
</body></html>
