2f:T4d0,md` ### Functions Wishlist - [ ] convert from rgba to toned hex color (against white) - [x] convert from hex/rgba to Array [0-1, 0-1, 0-1, 0-1] (for WegGL colors) - [ ] get name(s) of a color - [x] get hue of a color ### Widgets Wishlist - **Color Mixer** - make inputs distinct from outputs (give inputs more margin and rounded borders? use arrows?) - apply one color to all colors/rows (e.g. to tone all color rows with white in different percentages) - add/**delete** rows - **Color Solid Tools** - cone / sphere / cylinder - make cuts selectable - define ranges in hue / saturation / lightness - display a list of colors in the solid - **Color Harmony Tool** - triadic / tetradic / analogous - **Color Name Tool** with photos - **Preview** in UI / Layout / Illustration / Datavis - http://colormind.io/bootstrap/ [//]: # "image urls" [color solids]: https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Color_solid_comparison_hsl_hsv_rgb_cone_sphere_cube_cylinder.png/1024px-Color_solid_comparison_hsl_hsv_rgb_cone_sphere_cube_cylinder.png "Color Solids" [color harmonies]: http://www.websiteoptimization.com/speed/tweak/color-harmony/hue-wheel-color-harmonic-templates.png "Color harmonies" `30:T877,rgbToHsl = (rgb) => { // Yellow #FFFF00 (255,255,0) (60°, 100%, 50%) // grey #BFBFBF (191,191,191) (0°, 0%, 75%) // convert to 0-1 range const r = rgb[0] / 255; const g = rgb[1] / 255; const b = rgb[2] / 255; const min = Math.min(r, g, b); // get the darkest channel const max = Math.max(r, g, b); // get the lightest channel const delta = max - min; // get the difference between the lightest and the darkest channel // # yellow will have 0 as min and 255 as max, delta is 255 /* CALCULATE LIGHTNESS Lightness of a color is the middle of the lightest and the darkest channel # although yellow is a bright color, its lightness is only at 50%, because the blue channel is at 0, while red and green are at 255 ^ Ligthtness + ___|___ .' | `. ' |______| | /| | |'._./ |______| | | | | | /| '._|/ v Lightness - */ const lightness = (min + max) / 2; /* CALCULATE HUE hue is the rotaion on a cirular color scale from red (over yellow) to green (over cyan) to blue and back to red (over magenta). <--. 240° BLUE _______ `. .' 5-6 / `. 0° |______./ 3-4 | RED | 1-2 \ | | |'._______\_.'| '-+> 120° GREEN | | '._________.' */ // this will return a value between 0 and 6 const hueCircleSixth = r === max // if red channel is max ? (g - b) / delta : g === max // if green channel is max ? 2 + (b - r) / delta : b === max // if blue channel is max ? 4 + (r - g) / delta : 0; const hue = hueCircleSixth * 60; // CALCULATE SATURATION /* the vividness of the color _______ Saturation - `. Saturation + ' .<-----+-----> | /| | |'._./ |______| | | | | | / '._|/ */ const saturation = max === min ? 0 : lightness <= 0.5 ? delta / (max + min) : delta / (2 - max - min); return [hue, saturation * 100, lightness * 100]; }31:T59c,hslToRgb = (hsl) => { const hue = hsl[0]; // # 60 for yellow // turn saturation and lightness into fractions of 1 const saturation = hsl[1] / 100; // # 1 for yellow const lightness = hsl[2] / 100; // # 0.5 for yellow // chroma is the color intensity. const chroma = (1 - Math.abs((2 * lightness) - 1)) * saturation; /* 0.5 * 2 = 1 1 - 1 = 0 */ console.log(chroma); // # 1 for yellow => const secondary = chroma * (1 - Math.abs((hue / 60) % 2 - 1)); console.log(secondary); // # 1 for yellow const lightnessMatch = lightness - (chroma / 2); console.log(lightnessMatch) // # 0 for yellow let red = 0, green = 0, blue = 0; if (hue >= 0 && hue < 60) { red = chroma; green = secondary; blue = 0; } else if (60 <= hue && hue < 120) { red = secondary; green = chroma; blue = 0; } else if (120 <= hue && hue < 180) { red = 0; green = chroma; blue = secondary; } else if (180 <= hue && hue < 240) { red = 0; green = secondary; blue = chroma; } else if (240 <= hue && hue < 300) { red = secondary; green = 0; blue = chroma; } else if (300 <= hue && hue < 360) { red = chroma; green = 0; blue = secondary; } red = Math.round((red + lightnessMatch) * 255); green = Math.round((green + lightnessMatch) * 255); blue = Math.round((blue + lightnessMatch) * 255); return [red, green, blue]; }32:T863,{ const renderer = new THREE.WebGLRenderer({antialias: true}); const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableZoom = false; controls.enablePan = false; invalidation.then(() => (controls.dispose(), renderer.dispose())); renderer.setSize(width, height); renderer.setPixelRatio(devicePixelRatio); controls.addEventListener("change", () => { renderer.render(scene, camera); colorPositions.forEach((positionObject, i) => { const clone = positionObject.group.clone(); const projectedVec = clone.position.project(camera); const x = ( projectedVec.x + 1) * width / 2; const y = ( Math.abs(projectedVec.y - 1)) * height / 2; const indicatorElement = document.getElementById(`indicator-${i}`); indicatorElement.style.left = `${x}px` indicatorElement.style.top = `${y}px` }) }); renderer.render(scene, camera); const circleSize = 24; return html`

${renderer.domElement}

${colorPositions.map((positionObject, i) => { const clone = positionObject.group.clone(); const projectedVec = clone.position.project(camera); const x = ( projectedVec.x + 1) * width / 2; const y = ( Math.abs(projectedVec.y - 1)) * height / 2; return`

${positionObject.color}

`; })}

` ; }33:T5a1,scene = { const scene = new THREE.Scene(); scene.background = new THREE.Color(0xffffff); scene.add(cylinder); const circle = createCircle(16); circle.rotation.x = Math.PI / 2; scene.add(circle); const lightnessGeometry = new THREE.Geometry(); lightnessGeometry.vertices.push( new THREE.Vector3( 0, 0.5, 0 ), new THREE.Vector3( 0, -0.5, 0 ), ); const line = new THREE.Line( lightnessGeometry, lineMaterial ); scene.add(line); // color cube const primaryColors = [ "#FF0000", // red "#ffff00", // yellow "#00ff00", // green "#00ffff", // cyan "#0000ff", // blue "#ff00ff", // magenta ]; primaryColors.forEach(color => { const cubeHsl = rgbToHsl(hexToRgb(color)); const cubeHue = cubeHsl[0]; const cubeHueAngle = degreesToRadians(cubeHue); const saturationOffset = mapToRange(cubeHsl[1], [0, 100], [0, 1]); const lightnessOffset = mapToRange(cubeHsl[2], [0, 100], [-0.5, 0.5]); const cubeGeometry = new THREE.BoxGeometry( 0.1, 0.1, 0.1 ); cubeGeometry.translate( Math.sin(cubeHueAngle) * saturationOffset, lightnessOffset, Math.cos(cubeHueAngle) * saturationOffset ); const cubeMaterial = new THREE.MeshBasicMaterial( {color: color} ); var cube = new THREE.Mesh( cubeGeometry, cubeMaterial ); scene.add(cube); }); colorPositions.forEach(o => { scene.add(o); }); return scene; }34:[] 2d:{"title":"Color My Love","cells":[{"id":129,"value":"md`\n# Color My Love\n\na collection of color utility functions and for building color widgets.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"md`\n## Color functions\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"md`#### color conversions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"/**\n* turns a color hex string into an [r, g, b] array\n*\n*/\nhexToRgb = (hex) => {\n // example input: #22dd17\n const regexGroups = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex); // > [\"#22dd17\", \"22\", \"dd\", \"17\"]\n return regexGroups\n // base 16 parsing\n ? [parseInt(regexGroups[1], 16), parseInt(regexGroups[2], 16), parseInt(regexGroups[3], 16)]\n : null;\n}\t","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`\n\\`\\`\\`js\n hexToRgb(\"#22dd17\") // => [${hexToRgb(\"#22dd17\")[0]}, ${hexToRgb(\"#22dd17\")[1]}, ${hexToRgb(\"#22dd17\")[2]}]\n \n import {hexToRgb} from \"a05b91de4af14218\"\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"/**\n* turns an [r, g, b] array into a color hex string\n*\n*/\nrgbToHex = (rgb) => {\n const result = ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2]);\n return \"#\" + result.toString(16).slice(1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`\n\\`\\`\\`js\n rgbToHex([134, 221, 23]) // => ${rgbToHex([34, 221, 23])}\n\n import {rgbToHex} from \"a05b91de4af14218\"\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"md`\n\\`\\`\\`js\n rgbToHsl([255, 255, 0]) // => ${rgbToHsl([255, 255, 0])[0]}° ${rgbToHsl([255, 255, 0])[1]}% ${rgbToHsl([255, 255, 0])[2]}%\n \n import {rgbToHsl} from \"a05b91de4af14218\"\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"md`\n\\`\\`\\`js\n hslToRgb([60, 100, 50]) // => ${hslToRgb([60, 100, 50])[0]} ${hslToRgb([60, 100, 50])[1]} ${hslToRgb([60, 100, 50])[2]}\n \n import {hslToRgb} from \"a05b91de4af14218\"\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"/**\n* turns a color hex string into an gl color array [r, g, b, alpha=1]\n*\n*/\nhexToGLArray = (hex, alpha = 1) => {\n const rgb = hexToRgb(hex);\n const inputRange = [0, 255];\n const outputRange = [0, 1];\n \n return [\n mapToRange(rgb[0], inputRange, outputRange),\n mapToRange(rgb[1], inputRange, outputRange),\n mapToRange(rgb[2], inputRange, outputRange),\n alpha,\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"md`\n\\`\\`\\`js\n hexToGLArray(\"#22dd17\") // => [${hexToGLArray(\"#22dd17\")[0].toFixed(5)}, ${hexToGLArray(\"#22dd17\")[1].toFixed(5)}, ${hexToGLArray(\"#22dd17\")[2].toFixed(5)}, ${hexToGLArray(\"#22dd17\")[3]}]\n\n import {hexToGLArray} from \"a05b91de4af14218\"\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"md`#### Mixing colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"/**\n* mixes a base color with a tint color of a given tint amount (how strong the tint color affects the base color).\n* returns an [r, g, b] array\n*\n*/\ntintColorAsRgb = (baseColor, tintColor, tintAmount) => {\n const baseRgb = hexToRgb(baseColor);\n const tintRgb = hexToRgb(tintColor);\n\n return baseRgb.map((channel, i) => Math.round(channel + (tintRgb[i] - channel) * tintAmount));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"md`\n\\`\\`\\`js\n tintColorAsRgb(\"#2196F3\", \"#ffffff\", 0.2) // => [${tintColorAsRgb(\"#2196F3\", \"#ffffff\", 0.2)[0]}, ${tintColorAsRgb(\"#2196F3\", \"#ffffff\", 0.2)[1]}, ${tintColorAsRgb(\"#2196F3\", \"#ffffff\", 0.2)[2]}]\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"/**\n* mixes a base color with a tint color of a given tint amount (how strong the tint color affects the base color).\n* returns a color hex string\n*\n*/\ntintColorAsHex = (baseColor, tintColor, tintAmount) => {\n return rgbToHex(tintColorAsRgb(baseColor, tintColor, tintAmount));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"md`\n\\`\\`\\`js\n tintColorAsHex(\"#2196F3\", \"#ffffff\", 0.2) // => ${tintColorAsHex(\"#2196F3\", \"#ffffff\", 0.2)}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"md`#### Luminance + contrast`","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"/**\n* calculates the luminance (brightness) of a color\n* \n* https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html#procedure\n*/\nluminanace = (rgb) => {\n const out = rgb.map((channel) => {\n channel /= 255;\n return channel <= 0.03928\n ? channel / 12.92\n : Math.pow( (channel + 0.055) / 1.055, 2.4 );\n });\n return out[0] * 0.2126 + out[1] * 0.7152 + out[2] * 0.0722;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"md`\n\\`\\`\\`js\n luminanace(hexToRgb(\"#ffffff\") // => ${luminanace(hexToRgb(\"#ffffff\"))}\n luminanace(hexToRgb(\"#000000\") // => ${luminanace(hexToRgb(\"#000000\"))}\n luminanace(hexToRgb(\"#e4a6a5\") // => ${luminanace(hexToRgb(\"#e4a6a5\"))}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"html`\n

\n ${colorSwatch(['#ffffff', '#000000', '#E4A6A5'])}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"// https://stackoverflow.com/questions/9733288/how-to-programmatically-calculate-the-contrast-ratio-between-two-colors#answer-9733420\n/**\n* calculates the contrast of two colors. Black and white have the highest possible contrast of 21:1\n* \n*/\ncontrast = (rgb1, rgb2) => {\n return (luminanace(rgb1) + 0.05)\n / (luminanace(rgb2) + 0.05);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"md`\n\\`\\`\\`js\n contrast(hexToRgb(\"#ffffff\"), hexToRgb(\"#000000\")) // => ${contrast(hexToRgb(\"#ffffff\"), hexToRgb(\"#000000\"))}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"html`\n

\n ${colorSwatch(['#ffffff', '#000000'])}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"md`\n\\`\\`\\`js\n contrast(hexToRgb(\"#2B223F\"), hexToRgb(\"#000000\")) // => ${contrast(hexToRgb(\"#2B223F\"), hexToRgb(\"#000000\"))}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"html`\n

\n ${colorSwatch(['#2B223F', '#000000'])}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"md`#### Utility`","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"/**\n* maps a numeric value from an input range to an output range\n* \n*/\nmapToRange = (value, inputRange, outputRange) => {\n return outputRange[0] + (outputRange[1] - outputRange[0]) * ((value - inputRange[0]) / (inputRange[1] - inputRange[0]));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"md`\n\\`\\`\\`js\n mapToRange(120, [0, 255], [0, 1]) // => ${mapToRange(120, [0, 255], [0, 1])}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"degreesToRadians = (degrees) => degrees * (Math.PI/180)","pinned":false,"hidden":false,"mode":"ojs"},{"id":720,"value":"radiansToDegrees = (radians) => radians * (180/Math.PI)","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"md`## Widgets`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"colorSwatch = (listOfColors) => {\n return html`\n \n\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"md`\n\\`\\`\\`js\nimport {colorSwatch} from \"a05b91de4af14218\"\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"colorSwatch(['#FEFEFD', '#DE8DA1', '#E4A6A5', '#7C7A82', '#2B223F'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":918,"value":"colorSwatch([\"#9CA5A6\", \"#D0D8D9\", \"#D9A91A\", \"#BF8B2A\", \"#261616\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":548,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":654,"value":"lineMaterial = new THREE.LineBasicMaterial({\n\tcolor: 0x000000\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"createCircle = (segments) => {\n const geometry = new THREE.Geometry();\n const circleStep = (Math.PI * 2) / segments;\n\n _.times(segments, segment => {\n geometry.vertices.push(\n new THREE.Vector3( Math.sin(segment * circleStep), Math.cos(segment * circleStep), 0 )\n );\n });\n geometry.vertices.push(\n new THREE.Vector3( Math.sin(0), Math.cos(0), 0 )\n );\n\n return new THREE.Line(geometry, lineMaterial);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"\ncylinder = {\n var cylinderMaterial = new THREE.MeshBasicMaterial({\n color: 0xeeeeee,\n wireframe: true\n });\n /*\n CylinderGeometry(\n radiusTop : Float,\n radiusBottom : Float,\n height : Float,\n radialSegments : Integer,\n heightSegments : Integer,\n openEnded : Boolean,\n thetaStart : Float,\n thetaLength : Float\n )\n */\n var geometry = new THREE.CylinderGeometry( 1, 1, 1, 16 );\n return new THREE.Mesh(geometry, cylinderMaterial);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"camera = {\n const fov = 45;\n const aspect = width / height;\n const near = 1;\n const far = 1000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(2, 2, -1.75)\n camera.lookAt(new THREE.Vector3(0, 0, 0));\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":795,"value":"getColorPositions = (colors) => {\n const colorPositions = [];\n \n colors.forEach(color => {\n const hsl = rgbToHsl(hexToRgb(color));\n const hue = hsl[0];\n const hueAngle = degreesToRadians(hue);\n const saturationOffset = mapToRange(hsl[1], [0, 100], [0, 1]);\n const lightnessOffset = mapToRange(hsl[2], [0, 100], [-0.5, 0.5]);\n\n const vec = new THREE.Vector3(\n Math.sin(hueAngle) * saturationOffset,\n lightnessOffset,\n Math.cos(hueAngle) * saturationOffset\n );\n\n var group = new THREE.Group();\n group.position.set(vec.x, vec.y, vec.z)\n colorPositions.push({\n group: group,\n color: color\n });\n });\n \n return colorPositions;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":839,"value":"colorPositions = getColorPositions(['#FEFEFD', '#DE8DA1', '#E4A6A5', '#7C7A82', '#2B223F']);","pinned":true,"hidden":false,"mode":"ojs"},{"id":554,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"md`\n### imports\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.99.0/build/three.min.js\");\n await require(\"three@0.99.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"_ = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}