Skip to content

Instantly share code, notes, and snippets.

@BenOsodrac
BenOsodrac / getBrightness()
Created April 13, 2019 20:12
getBrightness color function
var getBrightness = function(hex) {
var rgb = 'rgb(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16); }).join(',') + ')';
// Get array of RGB values
rgb = rgb.replace(/[^\d,]/g, '').split(',');
var r = rgb[0], g = rgb[1], b = rgb[2];
var brightness = Math.floor((r * 299 + g * 587 + b * 114) / 1000);
@BenOsodrac
BenOsodrac / getContrast
Last active April 14, 2019 13:53
getContrast color function
var getContrast = function(background, foreground) {
// Convert hex to rgb
var backgroundRGB = 'rgb(' + (background = background.replace('#', '')).match(new RegExp('(.{' + background.length/3 + '})', 'g')).map(function(l) { return parseInt(background.length%2 ? l+l : l, 16); }).join(',') + ')';
var foregroundRGB = 'rgb(' + (foreground = foreground.replace('#', '')).match(new RegExp('(.{' + foreground.length/3 + '})', 'g')).map(function(l) { return parseInt(foreground.length%2 ? l+l : l, 16); }).join(',') + ')';
// Get array of RGB values
var backgroundRGBArray = backgroundRGB.replace(/[^\d,]/g, '').split(',');
var foregroundRGBArray = foregroundRGB.replace(/[^\d,]/g, '').split(',');
function ease (v, pow=4) {
return 1 - Math.pow(1 - v, pow);
}
let easedStep = ease(i / frame);
class Card extends HTMLElement {}
customElements.define('osui-card', Card);
<osui-card></osui-card>
const template = document.querySelector('template');
const node = document.importNode(template.content, true);
document.body.appendChild(node);
<template>
<h1>Hello world</h1>
</template>
class CardSectioned extends Card {}
customElements.define('osui-card-sectioned', CardSectioned );
class OSUIButton extends HTMLButtonElement {}
customElements.define('osui-button', OSUIButton {extends: 'button'});
<button is="osui-button"></button>