color picker

by phloe

HTML

<script src="https://unpkg.com/react-input-mask/dist/react-input-mask.min.js"></script>
<div class="react-picker"></div>

CSS

html {
	background-color: #eee;
}

body {
	background-color: inherit;
}

.picker {
	--hue: 180;
	--saturation: 100;
	--lightness: 50;
	--text-color: white;
	--opacity: 1;
	
	font: 400 14px/1.25 -apple-system,".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande", sans-serif;
	font-family: Monaco, Andale Mono, Lucida Console, Consolas, monospace;
	margin: 100px auto;
	width: 360px;
}

.picker-maps {
	position: relative;
}

.contrast-map {
	position: absolute;
	top: 0;
	z-index: 1000;
	opacity: .5;
	pointer-events: none;
}

.use {
	float: left;
	margin-top: 20px;
	margin-right: 20px;
	color: var(--text-color);
	position: relative;
	width: 60px;
	overflow: visible;
}

.use__swatch {
	position: relative;
	width: 100%;
}

.use__swatch:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.use__bg-color {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
}

.use__swatch--suggestion {
	position: absolute;
	top: 0;
	clip-path: inset(0 -50% 0 50%);
}

.use__swatch--suggestion__warning {
	display: inline-block;
	height: 12px;
	width: 14px;
	color: #FFF;
	font-size: 12px;
	text-align: center;
	line-height: 1.1;
	font-weight: bold;
	position: absolute;
	right: -9px;
	top: 0;
	z-index: 10;
}
.use__swatch--suggestion__warning:before {
	content: "";
	display: inline-block;
	height: 0;
	width: 0;
	left: 0;
	border: 7px solid transparent;
	border-top-width: 0;
	border-bottom-width: 12px;
	border-bottom-color: #000;
	position: absolute;
	z-index: -1;
}


.use__fg-color {
	position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	border-radius: 50%;
	background-color: currentColor;
}

.use--invalid{
}

.use__code {
	text-align: center;
	display: block;
	color: #000;
	margin-top: 5px;
	text-transform: uppercase;
}

.color-map {
	width: 360px;
	height: 360px;
	background:
	  radial-gradient(
	    10px 10px at...

React

/*

themes: nyheder, kultur...
schemes: primary, secondary...
colors: brand, interaction
roles: solid, text


config = {
	schemes: [
		{
			name: "primary",
			backgroundColor: "#FFF",
			color: ["#FFF", "#000"]
		},
		{
			name: "secondary",
			backgroundColor: "#1A1A1A",
			color: ["#FFF", "#000"]
		}
	],
	colors: ["brand", "interaction"],
	roles: [
		{ name: "solid", type: "backgroundColor" },
		{ name: "text", type: "color" }
	]
}

	primary: {
		solid: "#FFF"
	},
	secondary: {
		solid: "#1a1a1a"
	},
	themes: [
		{
			primary: {
				brand: {
					solid: {},
					text: {}
				},
				interaction: {
					solid: {},
					text: {}
				}
			},
			secondary: {
				brand: {
					solid: {},
					text: {}
				},
				interaction: {
					solid: {},
					text: {}
				}
			}
		}
	]
*/

const AA = "AA";
const AAA = "AAA";
const NONE = "None";

const COLOR = "color";
const BACKGROUND_COLOR = "backgroundColor";


// # Relative luminance
//
// http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
// https://en.wikipedia.org/wiki/Luminance_(relative)
// https://en.wikipedia.org/wiki/Luminosity_function
// https://en.wikipedia.org/wiki/Rec._709#Luma_coefficients

// red, green, and blue coefficients
const rc = 0.2126;
const gc = 0.7152;
const bc = 0.0722;
// low-gamma adjust coefficient
const lowc = 1 / 12.92;

function adjustGamma(_) {
  return Math.pow((_ + 0.055) / 1.055, 2.4);
}

/**
 * Given a 3-element array of R, G, B varying from 0 to 255, return the luminance
 * as a number from 0 to 1.
 * @param {Array<number>} rgb 3-element array of a color
 * @returns {number} luminance, between 0 and 1
 * @example
 * var luminance = require('relative-luminance');
 * var black_lum = luminance([0, 0, 0]); // 0
 */
function relativeLuminance(rgb) {
  const rsrgb = rgb[0] / 255;
  const gsrgb = rgb[1] / 255;
  const bsrgb = rgb[2] / 255;

  const r = rsrgb <= 0.03928 ? rsrgb * lowc : adjustGamma(rsrgb);
  const g = gsrgb <= 0.03928 ? gsrgb * lowc : adjustGamma(gsrgb);
 ...