Last active
February 8, 2023 12:01
-
-
Save popdemtech/f371b8fed63fa6f72a497aa420c3a816 to your computer and use it in GitHub Desktop.
Here's the Code for the Coloring Page Episodes: https://www.youtube.com/watch?v=3Xx3RaKpRJ8&list=PLiH3jthmEihcS3qHGG6xLe_ASoYeAMlel
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "black": { | |
| "rgb": { | |
| "r": "0", | |
| "g": "0", | |
| "b": "0" | |
| }, | |
| "hex": "#000000", | |
| "name": "black" | |
| }, | |
| "blue": { | |
| "rgb": { | |
| "r": "0", | |
| "g": "102", | |
| "b": "255" | |
| }, | |
| "hex": "#0066FF", | |
| "name": "blue" | |
| }, | |
| "blue green": { | |
| "rgb": { | |
| "r": "0", | |
| "g": "149", | |
| "b": "183" | |
| }, | |
| "hex": "#0095B7", | |
| "name": "blue green" | |
| }, | |
| "green": { | |
| "rgb": { | |
| "r": "1", | |
| "g": "166", | |
| "b": "56" | |
| }, | |
| "hex": "#01A638", | |
| "name": "green" | |
| }, | |
| "blue violet": { | |
| "rgb": { | |
| "r": "100", | |
| "g": "86", | |
| "b": "183" | |
| }, | |
| "hex": "#6456B7", | |
| "name": "blue violet" | |
| }, | |
| "violet": { | |
| "rgb": { | |
| "r": "131", | |
| "g": "89", | |
| "b": "163" | |
| }, | |
| "hex": "#8359A3", | |
| "name": "violet" | |
| }, | |
| "blue 76": { | |
| "rgb": { | |
| "r": "133", | |
| "g": "182", | |
| "b": "255" | |
| }, | |
| "hex": "#85B6FF", | |
| "name": "blue 76" | |
| }, | |
| "blue-green 76": { | |
| "rgb": { | |
| "r": "133", | |
| "g": "232", | |
| "b": "255" | |
| }, | |
| "hex": "#85E9FF", | |
| "name": "blue-green 76" | |
| }, | |
| "green 76": { | |
| "rgb": { | |
| "r": "134", | |
| "g": "254", | |
| "b": "174" | |
| }, | |
| "hex": "#86FEAE", | |
| "name": "green 76" | |
| }, | |
| "brown": { | |
| "rgb": { | |
| "r": "175", | |
| "g": "89", | |
| "b": "62" | |
| }, | |
| "hex": "#AF593E", | |
| "name": "brown" | |
| }, | |
| "blue-violet 76": { | |
| "rgb": { | |
| "r": "176", | |
| "g": "169", | |
| "b": "218" | |
| }, | |
| "hex": "#B0A9DA", | |
| "name": "blue-violet 76" | |
| }, | |
| "red violet": { | |
| "rgb": { | |
| "r": "187", | |
| "g": "51", | |
| "b": "133" | |
| }, | |
| "hex": "#BB3385", | |
| "name": "red violet" | |
| }, | |
| "violet 76": { | |
| "rgb": { | |
| "r": "196", | |
| "g": "176", | |
| "b": "212" | |
| }, | |
| "hex": "#C4B0D4", | |
| "name": "violet 76" | |
| }, | |
| "yellow green": { | |
| "rgb": { | |
| "r": "197", | |
| "g": "225", | |
| "b": "122" | |
| }, | |
| "hex": "#C5E17A", | |
| "name": "yellow green" | |
| }, | |
| "yellow-green 76": { | |
| "rgb": { | |
| "r": "211", | |
| "g": "232", | |
| "b": "155" | |
| }, | |
| "hex": "#D3E89B", | |
| "name": "yellow-green 76" | |
| }, | |
| "brown 76": { | |
| "rgb": { | |
| "r": "223", | |
| "g": "179", | |
| "b": "165" | |
| }, | |
| "hex": "#DFB3A5", | |
| "name": "brown 76" | |
| }, | |
| "safety yellow": { | |
| "rgb": { | |
| "r": "223", | |
| "g": "255", | |
| "b": "0" | |
| }, | |
| "hex": "#DFFF00", | |
| "name": "safety yellow" | |
| }, | |
| "red-violet 76": { | |
| "rgb": { | |
| "r": "229", | |
| "g": "159", | |
| "b": "201" | |
| }, | |
| "hex": "#E59FC9", | |
| "name": "red-violet 76" | |
| }, | |
| "red": { | |
| "rgb": { | |
| "r": "237", | |
| "g": "10", | |
| "b": "63" | |
| }, | |
| "hex": "#ED0A3F", | |
| "name": "red" | |
| }, | |
| "red 76": { | |
| "rgb": { | |
| "r": "251", | |
| "g": "137", | |
| "b": "164" | |
| }, | |
| "hex": "#FB89A4", | |
| "name": "red 76" | |
| }, | |
| "yellow": { | |
| "rgb": { | |
| "r": "251", | |
| "g": "232", | |
| "b": "112" | |
| }, | |
| "hex": "#FBE870", | |
| "name": "yellow" | |
| }, | |
| "yellow 76": { | |
| "rgb": { | |
| "r": "252", | |
| "g": "236", | |
| "b": "136" | |
| }, | |
| "hex": "#FCEC88", | |
| "name": "yellow 76" | |
| }, | |
| "red orange": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "104", | |
| "b": "31" | |
| }, | |
| "hex": "#FF681F", | |
| "name": "red orange" | |
| }, | |
| "pink 76": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "133", | |
| "b": "181" | |
| }, | |
| "hex": "#FF85B5", | |
| "name": "pink 76" | |
| }, | |
| "orange": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "136", | |
| "b": "51" | |
| }, | |
| "hex": "#FF8833", | |
| "name": "orange" | |
| }, | |
| "carnation pink": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "166", | |
| "b": "201" | |
| }, | |
| "hex": "#FFA6C9", | |
| "name": "carnation pink" | |
| }, | |
| "red-orange 76": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "172", | |
| "b": "133" | |
| }, | |
| "hex": "#FFAC85", | |
| "name": "red-orange 76" | |
| }, | |
| "yellow orange": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "174", | |
| "b": "66" | |
| }, | |
| "hex": "#FFAE42", | |
| "name": "yellow orange" | |
| }, | |
| "orange 76": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "184", | |
| "b": "133" | |
| }, | |
| "hex": "#FFB885", | |
| "name": "orange 76" | |
| }, | |
| "yellow-orange 76": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "202", | |
| "b": "133" | |
| }, | |
| "hex": "#FFCA85", | |
| "name": "yellow-orange 76" | |
| }, | |
| "ffffff": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "255", | |
| "b": "255" | |
| }, | |
| "hex": "#FFFFFF", | |
| "name": "ffffff" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <style> | |
| #coloring-page { | |
| width: 500px; | |
| max-width: 500px; | |
| display: flex; | |
| padding: 20px; | |
| border: 1px solid #aaa; | |
| box-shadow: 1px 1px 3px rgba(255,204,0, .25); | |
| } | |
| #coloring-page #image { | |
| width: 300px; | |
| } | |
| #coloring-page svg { | |
| width: 100%; | |
| height: auto; | |
| } | |
| #image-side { | |
| margin-right: 50px; | |
| } | |
| #image-side #image { | |
| margin-bottom: 40px; | |
| } | |
| #current-color-widget { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| #current-color-widget label { | |
| margin-right: 20px; | |
| } | |
| #current-color-widget #current-color-block { | |
| display: inline-block; | |
| height: 50px; | |
| width: 100px; | |
| background-color: black; | |
| } | |
| </style> | |
| <div id="coloring-page"> | |
| <div id="image-side"> | |
| <div id="image"> | |
| <svg | |
| width="422.97653mm" | |
| height="422.9765mm" | |
| viewBox="0 0 0.002014174 0.0016041633" | |
| version="1.1" | |
| id="svg5" | |
| xml:space="preserve" | |
| inkscape:version="1.2 (dc2aeda, 2022-05-15)" | |
| xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" | |
| xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" | |
| xmlns="http://www.w3.org/2000/svg" | |
| xmlns:svg="http://www.w3.org/2000/svg"> | |
| <sodipodi:namedview | |
| id="namedview7" | |
| pagecolor="#d1d1d1" | |
| bordercolor="#000000" | |
| borderopacity="0.24705882" | |
| inkscape:showpageshadow="false" | |
| inkscape:pageopacity="0" | |
| inkscape:pagecheckerboard="false" | |
| inkscape:deskcolor="#d1d1d1" | |
| inkscape:document-units="px" | |
| showgrid="false" | |
| showborder="false" | |
| borderlayer="false" | |
| shape-rendering="crispEdges" /> | |
| <g | |
| inkscape:label="Layer 1" | |
| inkscape:groupmode="layer" | |
| id="layer1" | |
| transform="translate(0.00138463,6.7748639e-4)"> | |
| <rect | |
| style="fill:#ffffff;stroke:#000000;stroke-width:1.26e-05;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke" | |
| id="rect233" | |
| width="0.0020015738" | |
| height="0.0020015738" | |
| x="-0.0013783294" | |
| y="-0.00087832921" | |
| rx="1.2599206e-05" | |
| ry="1.2599206e-05" /> | |
| <rect | |
| style="fill:#ffffff;stroke:#000000;stroke-width:1.26e-05;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;paint-order:fill markers stroke" | |
| id="rect287" | |
| width="0.00060526631" | |
| height="0.00068916468" | |
| x="-0.0011194614" | |
| y="0.00011020467" | |
| ry="1.2599206e-05" /> | |
| <path | |
| sodipodi:type="star" | |
| style="fill:#ffffff;stroke:#000000;stroke-width:11.3041;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke" | |
| id="path1110" | |
| inkscape:flatsided="false" | |
| sodipodi:sides="3" | |
| sodipodi:cx="-612.58917" | |
| sodipodi:cy="-192.11375" | |
| sodipodi:r1="532.19" | |
| sodipodi:r2="260.7731" | |
| sodipodi:arg1="0.65984843" | |
| sodipodi:arg2="1.707046" | |
| inkscape:rounded="-3.469447e-18" | |
| inkscape:randomized="0" | |
| d="M -192.11375,134.11718 -648.00959,66.242597 -1105.3512,8.9131749 -818.62213,-351.96691 l 278.31952,-367.4047 169.16681,428.75466 z" | |
| transform="matrix(1.0676663e-6,0,0,1.1635238e-6,2.177993e-4,1.2087061e-4)" | |
| inkscape:transform-center-x="-1.9321004e-05" | |
| inkscape:transform-center-y="4.7540169e-06" /> | |
| <circle | |
| style="fill:#ffffff;stroke:#000000;stroke-width:1.25992e-05;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke" | |
| id="path1216" | |
| cx="9.7822103e-06" | |
| cy="0.00036801852" | |
| r="0.00042929285" /> | |
| </g> | |
| </svg> | |
| </div> | |
| <div id="current-color-widget"> | |
| <label>Current Color:</label><span id="current-color-block"></span> | |
| </div> | |
| </div> | |
| <div id="color-palatte"></div> | |
| </div> | |
| <script> | |
| const NAMESPACE = 'COLOR_A_PAGE'; | |
| window[NAMESPACE] = {}; | |
| window[NAMESPACE].state = { | |
| currentColor: null | |
| }; | |
| window[NAMESPACE].config = { | |
| palatteGrid: { | |
| width: '100px' | |
| }, | |
| palatteBlock: { | |
| classname: '.color-block', | |
| width: '25px', | |
| height: '25px' | |
| }, | |
| indicatorBlock: { | |
| id: '#current-color-block', | |
| width: '100px', | |
| height: '50px' | |
| } | |
| } | |
| const colors = { | |
| "black": { | |
| "rgb": { | |
| "r": "0", | |
| "g": "0", | |
| "b": "0" | |
| }, | |
| "hex": "#000000", | |
| "name": "black" | |
| }, | |
| "blue": { | |
| "rgb": { | |
| "r": "0", | |
| "g": "102", | |
| "b": "255" | |
| }, | |
| "hex": "#0066FF", | |
| "name": "blue" | |
| }, | |
| "blue green": { | |
| "rgb": { | |
| "r": "0", | |
| "g": "149", | |
| "b": "183" | |
| }, | |
| "hex": "#0095B7", | |
| "name": "blue green" | |
| }, | |
| "green": { | |
| "rgb": { | |
| "r": "1", | |
| "g": "166", | |
| "b": "56" | |
| }, | |
| "hex": "#01A638", | |
| "name": "green" | |
| }, | |
| "blue violet": { | |
| "rgb": { | |
| "r": "100", | |
| "g": "86", | |
| "b": "183" | |
| }, | |
| "hex": "#6456B7", | |
| "name": "blue violet" | |
| }, | |
| "violet": { | |
| "rgb": { | |
| "r": "131", | |
| "g": "89", | |
| "b": "163" | |
| }, | |
| "hex": "#8359A3", | |
| "name": "violet" | |
| }, | |
| "blue 76": { | |
| "rgb": { | |
| "r": "133", | |
| "g": "182", | |
| "b": "255" | |
| }, | |
| "hex": "#85B6FF", | |
| "name": "blue 76" | |
| }, | |
| "blue-green 76": { | |
| "rgb": { | |
| "r": "133", | |
| "g": "232", | |
| "b": "255" | |
| }, | |
| "hex": "#85E9FF", | |
| "name": "blue-green 76" | |
| }, | |
| "green 76": { | |
| "rgb": { | |
| "r": "134", | |
| "g": "254", | |
| "b": "174" | |
| }, | |
| "hex": "#86FEAE", | |
| "name": "green 76" | |
| }, | |
| "brown": { | |
| "rgb": { | |
| "r": "175", | |
| "g": "89", | |
| "b": "62" | |
| }, | |
| "hex": "#AF593E", | |
| "name": "brown" | |
| }, | |
| "blue-violet 76": { | |
| "rgb": { | |
| "r": "176", | |
| "g": "169", | |
| "b": "218" | |
| }, | |
| "hex": "#B0A9DA", | |
| "name": "blue-violet 76" | |
| }, | |
| "red violet": { | |
| "rgb": { | |
| "r": "187", | |
| "g": "51", | |
| "b": "133" | |
| }, | |
| "hex": "#BB3385", | |
| "name": "red violet" | |
| }, | |
| "violet 76": { | |
| "rgb": { | |
| "r": "196", | |
| "g": "176", | |
| "b": "212" | |
| }, | |
| "hex": "#C4B0D4", | |
| "name": "violet 76" | |
| }, | |
| "yellow green": { | |
| "rgb": { | |
| "r": "197", | |
| "g": "225", | |
| "b": "122" | |
| }, | |
| "hex": "#C5E17A", | |
| "name": "yellow green" | |
| }, | |
| "yellow-green 76": { | |
| "rgb": { | |
| "r": "211", | |
| "g": "232", | |
| "b": "155" | |
| }, | |
| "hex": "#D3E89B", | |
| "name": "yellow-green 76" | |
| }, | |
| "brown 76": { | |
| "rgb": { | |
| "r": "223", | |
| "g": "179", | |
| "b": "165" | |
| }, | |
| "hex": "#DFB3A5", | |
| "name": "brown 76" | |
| }, | |
| "safety yellow": { | |
| "rgb": { | |
| "r": "223", | |
| "g": "255", | |
| "b": "0" | |
| }, | |
| "hex": "#DFFF00", | |
| "name": "safety yellow" | |
| }, | |
| "red-violet 76": { | |
| "rgb": { | |
| "r": "229", | |
| "g": "159", | |
| "b": "201" | |
| }, | |
| "hex": "#E59FC9", | |
| "name": "red-violet 76" | |
| }, | |
| "red": { | |
| "rgb": { | |
| "r": "237", | |
| "g": "10", | |
| "b": "63" | |
| }, | |
| "hex": "#ED0A3F", | |
| "name": "red" | |
| }, | |
| "red 76": { | |
| "rgb": { | |
| "r": "251", | |
| "g": "137", | |
| "b": "164" | |
| }, | |
| "hex": "#FB89A4", | |
| "name": "red 76" | |
| }, | |
| "yellow": { | |
| "rgb": { | |
| "r": "251", | |
| "g": "232", | |
| "b": "112" | |
| }, | |
| "hex": "#FBE870", | |
| "name": "yellow" | |
| }, | |
| "yellow 76": { | |
| "rgb": { | |
| "r": "252", | |
| "g": "236", | |
| "b": "136" | |
| }, | |
| "hex": "#FCEC88", | |
| "name": "yellow 76" | |
| }, | |
| "red orange": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "104", | |
| "b": "31" | |
| }, | |
| "hex": "#FF681F", | |
| "name": "red orange" | |
| }, | |
| "pink 76": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "133", | |
| "b": "181" | |
| }, | |
| "hex": "#FF85B5", | |
| "name": "pink 76" | |
| }, | |
| "orange": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "136", | |
| "b": "51" | |
| }, | |
| "hex": "#FF8833", | |
| "name": "orange" | |
| }, | |
| "carnation pink": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "166", | |
| "b": "201" | |
| }, | |
| "hex": "#FFA6C9", | |
| "name": "carnation pink" | |
| }, | |
| "red-orange 76": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "172", | |
| "b": "133" | |
| }, | |
| "hex": "#FFAC85", | |
| "name": "red-orange 76" | |
| }, | |
| "yellow orange": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "174", | |
| "b": "66" | |
| }, | |
| "hex": "#FFAE42", | |
| "name": "yellow orange" | |
| }, | |
| "orange 76": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "184", | |
| "b": "133" | |
| }, | |
| "hex": "#FFB885", | |
| "name": "orange 76" | |
| }, | |
| "yellow-orange 76": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "202", | |
| "b": "133" | |
| }, | |
| "hex": "#FFCA85", | |
| "name": "yellow-orange 76" | |
| }, | |
| "ffffff": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "255", | |
| "b": "255" | |
| }, | |
| "hex": "#FFFFFF", | |
| "name": "ffffff" | |
| } | |
| }; | |
| function initColorPalatte(colors) { | |
| const colorGrid = document.createElement('div'); | |
| colorGrid.style.display = 'flex'; | |
| colorGrid.style.flexWrap = 'wrap'; | |
| colorGrid.style.width = window[NAMESPACE].config.palatteGrid.width; | |
| document.getElementById('color-palatte').append(colorGrid); | |
| Object.keys(colors).forEach((c) => { | |
| const color = colors[c]; | |
| const colorBlock = document.createElement('div'); | |
| const rgbColor = `rgb(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b})`; | |
| colorBlock.style.backgroundColor = rgbColor; | |
| colorBlock.style.height = window[NAMESPACE].config.palatteBlock.height; | |
| colorBlock.style.width = window[NAMESPACE].config.palatteBlock.width; | |
| colorBlock.style.flexGrow = '0'; | |
| colorBlock.style.flexShrink = '0'; | |
| colorBlock.style.boxSizing = 'border-box'; | |
| colorBlock.classList.add(window[NAMESPACE].config.palatteBlock.classname.slice(1)); | |
| if (color.name === 'ffffff') { | |
| colorBlock.style.border = '1px solid #ababab'; | |
| } | |
| colorGrid.append(colorBlock); | |
| }); | |
| } | |
| function createHeading(text) { | |
| const heading = document.createElement('h2'); | |
| heading.innerText = text; | |
| document.body.prepend(heading); | |
| } | |
| createHeading('Color a Page'); | |
| initColorPalatte(colors); | |
| function fillWithColor(event) { | |
| const color = window[NAMESPACE].state.currentColor; | |
| event.target.style.fill = color; | |
| } | |
| function initializeInteraction() { | |
| const colorBlocks = document.querySelectorAll(window[NAMESPACE].config.palatteBlock.classname); | |
| colorBlocks.forEach((element) => { | |
| element.onclick = function() { | |
| const currentColor = event.target.style.backgroundColor; | |
| window[NAMESPACE].state.currentColor = currentColor; | |
| const indicatorBlock = document.querySelector(window[NAMESPACE].config.indicatorBlock.id); | |
| indicatorBlock.style.backgroundColor = currentColor; | |
| }; | |
| }) | |
| const fillables = document.querySelectorAll('rect,path,circle'); | |
| fillables.forEach((element) => { | |
| element.onclick = fillWithColor; | |
| }); | |
| } | |
| initializeInteraction(); | |
| </script> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <script> | |
| const colors = { | |
| "black": { | |
| "rgb": { | |
| "r": "0", | |
| "g": "0", | |
| "b": "0" | |
| }, | |
| "hex": "#000000", | |
| "name": "black" | |
| }, | |
| "blue": { | |
| "rgb": { | |
| "r": "0", | |
| "g": "102", | |
| "b": "255" | |
| }, | |
| "hex": "#0066FF", | |
| "name": "blue" | |
| }, | |
| "blue green": { | |
| "rgb": { | |
| "r": "0", | |
| "g": "149", | |
| "b": "183" | |
| }, | |
| "hex": "#0095B7", | |
| "name": "blue green" | |
| }, | |
| "green": { | |
| "rgb": { | |
| "r": "1", | |
| "g": "166", | |
| "b": "56" | |
| }, | |
| "hex": "#01A638", | |
| "name": "green" | |
| }, | |
| "blue violet": { | |
| "rgb": { | |
| "r": "100", | |
| "g": "86", | |
| "b": "183" | |
| }, | |
| "hex": "#6456B7", | |
| "name": "blue violet" | |
| }, | |
| "violet": { | |
| "rgb": { | |
| "r": "131", | |
| "g": "89", | |
| "b": "163" | |
| }, | |
| "hex": "#8359A3", | |
| "name": "violet" | |
| }, | |
| "blue 76": { | |
| "rgb": { | |
| "r": "133", | |
| "g": "182", | |
| "b": "255" | |
| }, | |
| "hex": "#85B6FF", | |
| "name": "blue 76" | |
| }, | |
| "blue-green 76": { | |
| "rgb": { | |
| "r": "133", | |
| "g": "232", | |
| "b": "255" | |
| }, | |
| "hex": "#85E9FF", | |
| "name": "blue-green 76" | |
| }, | |
| "green 76": { | |
| "rgb": { | |
| "r": "134", | |
| "g": "254", | |
| "b": "174" | |
| }, | |
| "hex": "#86FEAE", | |
| "name": "green 76" | |
| }, | |
| "brown": { | |
| "rgb": { | |
| "r": "175", | |
| "g": "89", | |
| "b": "62" | |
| }, | |
| "hex": "#AF593E", | |
| "name": "brown" | |
| }, | |
| "blue-violet 76": { | |
| "rgb": { | |
| "r": "176", | |
| "g": "169", | |
| "b": "218" | |
| }, | |
| "hex": "#B0A9DA", | |
| "name": "blue-violet 76" | |
| }, | |
| "red violet": { | |
| "rgb": { | |
| "r": "187", | |
| "g": "51", | |
| "b": "133" | |
| }, | |
| "hex": "#BB3385", | |
| "name": "red violet" | |
| }, | |
| "violet 76": { | |
| "rgb": { | |
| "r": "196", | |
| "g": "176", | |
| "b": "212" | |
| }, | |
| "hex": "#C4B0D4", | |
| "name": "violet 76" | |
| }, | |
| "yellow green": { | |
| "rgb": { | |
| "r": "197", | |
| "g": "225", | |
| "b": "122" | |
| }, | |
| "hex": "#C5E17A", | |
| "name": "yellow green" | |
| }, | |
| "yellow-green 76": { | |
| "rgb": { | |
| "r": "211", | |
| "g": "232", | |
| "b": "155" | |
| }, | |
| "hex": "#D3E89B", | |
| "name": "yellow-green 76" | |
| }, | |
| "brown 76": { | |
| "rgb": { | |
| "r": "223", | |
| "g": "179", | |
| "b": "165" | |
| }, | |
| "hex": "#DFB3A5", | |
| "name": "brown 76" | |
| }, | |
| "safety yellow": { | |
| "rgb": { | |
| "r": "223", | |
| "g": "255", | |
| "b": "0" | |
| }, | |
| "hex": "#DFFF00", | |
| "name": "safety yellow" | |
| }, | |
| "red-violet 76": { | |
| "rgb": { | |
| "r": "229", | |
| "g": "159", | |
| "b": "201" | |
| }, | |
| "hex": "#E59FC9", | |
| "name": "red-violet 76" | |
| }, | |
| "red": { | |
| "rgb": { | |
| "r": "237", | |
| "g": "10", | |
| "b": "63" | |
| }, | |
| "hex": "#ED0A3F", | |
| "name": "red" | |
| }, | |
| "red 76": { | |
| "rgb": { | |
| "r": "251", | |
| "g": "137", | |
| "b": "164" | |
| }, | |
| "hex": "#FB89A4", | |
| "name": "red 76" | |
| }, | |
| "yellow": { | |
| "rgb": { | |
| "r": "251", | |
| "g": "232", | |
| "b": "112" | |
| }, | |
| "hex": "#FBE870", | |
| "name": "yellow" | |
| }, | |
| "yellow 76": { | |
| "rgb": { | |
| "r": "252", | |
| "g": "236", | |
| "b": "136" | |
| }, | |
| "hex": "#FCEC88", | |
| "name": "yellow 76" | |
| }, | |
| "red orange": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "104", | |
| "b": "31" | |
| }, | |
| "hex": "#FF681F", | |
| "name": "red orange" | |
| }, | |
| "pink 76": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "133", | |
| "b": "181" | |
| }, | |
| "hex": "#FF85B5", | |
| "name": "pink 76" | |
| }, | |
| "orange": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "136", | |
| "b": "51" | |
| }, | |
| "hex": "#FF8833", | |
| "name": "orange" | |
| }, | |
| "carnation pink": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "166", | |
| "b": "201" | |
| }, | |
| "hex": "#FFA6C9", | |
| "name": "carnation pink" | |
| }, | |
| "red-orange 76": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "172", | |
| "b": "133" | |
| }, | |
| "hex": "#FFAC85", | |
| "name": "red-orange 76" | |
| }, | |
| "yellow orange": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "174", | |
| "b": "66" | |
| }, | |
| "hex": "#FFAE42", | |
| "name": "yellow orange" | |
| }, | |
| "orange 76": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "184", | |
| "b": "133" | |
| }, | |
| "hex": "#FFB885", | |
| "name": "orange 76" | |
| }, | |
| "yellow-orange 76": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "202", | |
| "b": "133" | |
| }, | |
| "hex": "#FFCA85", | |
| "name": "yellow-orange 76" | |
| }, | |
| "ffffff": { | |
| "rgb": { | |
| "r": "255", | |
| "g": "255", | |
| "b": "255" | |
| }, | |
| "hex": "#FFFFFF", | |
| "name": "ffffff" | |
| } | |
| }; | |
| const wackyColors = { | |
| "black": { | |
| "rgb": { | |
| "r": "0", | |
| "b": "0", | |
| "g": "0" | |
| }, | |
| "hex": "#000000", | |
| "name": "black" | |
| }, | |
| "blue": { | |
| "rgb": { | |
| "r": "0", | |
| "b": "102", | |
| "g": "255" | |
| }, | |
| "hex": "#0066FF", | |
| "name": "blue" | |
| }, | |
| "blue green": { | |
| "rgb": { | |
| "r": "0", | |
| "b": "149", | |
| "g": "183" | |
| }, | |
| "hex": "#0095B7", | |
| "name": "blue green" | |
| }, | |
| "green": { | |
| "rgb": { | |
| "r": "1", | |
| "b": "166", | |
| "g": "56" | |
| }, | |
| "hex": "#01A638", | |
| "name": "green" | |
| }, | |
| "blue violet": { | |
| "rgb": { | |
| "r": "100", | |
| "b": "86", | |
| "g": "183" | |
| }, | |
| "hex": "#6456B7", | |
| "name": "blue violet" | |
| }, | |
| "violet": { | |
| "rgb": { | |
| "r": "131", | |
| "b": "89", | |
| "g": "163" | |
| }, | |
| "hex": "#8359A3", | |
| "name": "violet" | |
| }, | |
| "blue 76": { | |
| "rgb": { | |
| "r": "133", | |
| "b": "182", | |
| "g": "255" | |
| }, | |
| "hex": "#85B6FF", | |
| "name": "blue 76" | |
| }, | |
| "blue-green 76": { | |
| "rgb": { | |
| "r": "133", | |
| "b": "232", | |
| "g": "255" | |
| }, | |
| "hex": "#85E9FF", | |
| "name": "blue-green 76" | |
| }, | |
| "green 76": { | |
| "rgb": { | |
| "r": "134", | |
| "b": "254", | |
| "g": "174" | |
| }, | |
| "hex": "#86FEAE", | |
| "name": "green 76" | |
| }, | |
| "brown": { | |
| "rgb": { | |
| "r": "175", | |
| "b": "89", | |
| "g": "62" | |
| }, | |
| "hex": "#AF593E", | |
| "name": "brown" | |
| }, | |
| "blue-violet 76": { | |
| "rgb": { | |
| "r": "176", | |
| "b": "169", | |
| "g": "218" | |
| }, | |
| "hex": "#B0A9DA", | |
| "name": "blue-violet 76" | |
| }, | |
| "red violet": { | |
| "rgb": { | |
| "r": "187", | |
| "b": "51", | |
| "g": "133" | |
| }, | |
| "hex": "#BB3385", | |
| "name": "red violet" | |
| }, | |
| "violet 76": { | |
| "rgb": { | |
| "r": "196", | |
| "b": "176", | |
| "g": "212" | |
| }, | |
| "hex": "#C4B0D4", | |
| "name": "violet 76" | |
| }, | |
| "yellow green": { | |
| "rgb": { | |
| "r": "197", | |
| "b": "225", | |
| "g": "122" | |
| }, | |
| "hex": "#C5E17A", | |
| "name": "yellow green" | |
| }, | |
| "yellow-green 76": { | |
| "rgb": { | |
| "r": "211", | |
| "b": "232", | |
| "g": "155" | |
| }, | |
| "hex": "#D3E89B", | |
| "name": "yellow-green 76" | |
| }, | |
| "brown 76": { | |
| "rgb": { | |
| "r": "223", | |
| "b": "179", | |
| "g": "165" | |
| }, | |
| "hex": "#DFB3A5", | |
| "name": "brown 76" | |
| }, | |
| "safety yellow": { | |
| "rgb": { | |
| "r": "223", | |
| "b": "255", | |
| "g": "0" | |
| }, | |
| "hex": "#DFFF00", | |
| "name": "safety yellow" | |
| }, | |
| "red-violet 76": { | |
| "rgb": { | |
| "r": "229", | |
| "b": "159", | |
| "g": "201" | |
| }, | |
| "hex": "#E59FC9", | |
| "name": "red-violet 76" | |
| }, | |
| "red": { | |
| "rgb": { | |
| "r": "237", | |
| "b": "10", | |
| "g": "63" | |
| }, | |
| "hex": "#ED0A3F", | |
| "name": "red" | |
| }, | |
| "red 76": { | |
| "rgb": { | |
| "r": "251", | |
| "b": "137", | |
| "g": "164" | |
| }, | |
| "hex": "#FB89A4", | |
| "name": "red 76" | |
| }, | |
| "yellow": { | |
| "rgb": { | |
| "r": "251", | |
| "b": "232", | |
| "g": "112" | |
| }, | |
| "hex": "#FBE870", | |
| "name": "yellow" | |
| }, | |
| "yellow 76": { | |
| "rgb": { | |
| "r": "252", | |
| "b": "236", | |
| "g": "136" | |
| }, | |
| "hex": "#FCEC88", | |
| "name": "yellow 76" | |
| }, | |
| "red orange": { | |
| "rgb": { | |
| "r": "255", | |
| "b": "104", | |
| "g": "31" | |
| }, | |
| "hex": "#FF681F", | |
| "name": "red orange" | |
| }, | |
| "pink 76": { | |
| "rgb": { | |
| "r": "255", | |
| "b": "133", | |
| "g": "181" | |
| }, | |
| "hex": "#FF85B5", | |
| "name": "pink 76" | |
| }, | |
| "orange": { | |
| "rgb": { | |
| "r": "255", | |
| "b": "136", | |
| "g": "51" | |
| }, | |
| "hex": "#FF8833", | |
| "name": "orange" | |
| }, | |
| "carnation pink": { | |
| "rgb": { | |
| "r": "255", | |
| "b": "166", | |
| "g": "201" | |
| }, | |
| "hex": "#FFA6C9", | |
| "name": "carnation pink" | |
| }, | |
| "red-orange 76": { | |
| "rgb": { | |
| "r": "255", | |
| "b": "172", | |
| "g": "133" | |
| }, | |
| "hex": "#FFAC85", | |
| "name": "red-orange 76" | |
| }, | |
| "yellow orange": { | |
| "rgb": { | |
| "r": "255", | |
| "b": "174", | |
| "g": "66" | |
| }, | |
| "hex": "#FFAE42", | |
| "name": "yellow orange" | |
| }, | |
| "orange 76": { | |
| "rgb": { | |
| "r": "255", | |
| "b": "184", | |
| "g": "133" | |
| }, | |
| "hex": "#FFB885", | |
| "name": "orange 76" | |
| }, | |
| "yellow-orange 76": { | |
| "rgb": { | |
| "r": "255", | |
| "b": "202", | |
| "g": "133" | |
| }, | |
| "hex": "#FFCA85", | |
| "name": "yellow-orange 76" | |
| }, | |
| "ffffff": { | |
| "rgb": { | |
| "r": "255", | |
| "b": "255", | |
| "g": "255" | |
| }, | |
| "hex": "#FFFFFF", | |
| "name": "ffffff" | |
| } | |
| }; | |
| function createColorGrid(colors) { | |
| const colorGrid = document.createElement('div'); | |
| colorGrid.style.display = 'flex'; | |
| colorGrid.style.flexWrap = 'wrap'; | |
| document.body.append(colorGrid); | |
| Object.keys(colors).forEach((c) => { | |
| const color = colors[c]; | |
| const colorBlock = document.createElement('div'); | |
| const rgbColor = `rgb(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b})`; | |
| colorBlock.style.backgroundColor = rgbColor; | |
| colorBlock.style.height = '100px'; | |
| colorBlock.style.width = '100px'; | |
| colorBlock.style.flexGrow = '0'; | |
| colorBlock.style.flexShrink = '0'; | |
| colorBlock.style.boxSizing = 'border-box'; | |
| if (color.name === 'ffffff') { | |
| colorBlock.style.border = '1px solid #ababab'; | |
| } | |
| colorGrid.append(colorBlock); | |
| }); | |
| } | |
| function createHeading(text) { | |
| const heading = document.createElement('h2'); | |
| heading.innerText = text; | |
| document.body.appendChild(heading); | |
| } | |
| createHeading('Basic Colors'); | |
| createColorGrid(colors); | |
| createHeading('Wacky Colors'); | |
| createColorGrid(wackyColors); | |
| // They are the same because the "wacky" colors have a different RGB value, not hex | |
| // The difference between basic colors and "wacky" colors is switching the green and blue color values | |
| </script> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const fs = require('fs'); | |
| const colors = fs.readFileSync('./colors.txt').toString(); | |
| const colorsJson = colors.split('\n').filter(Boolean).reduce((json, color) => { | |
| const rgbRx = new RegExp(/([\d ]+)/); | |
| const rgbMatches = color.match(rgbRx)[0].split(' ').filter(Boolean); | |
| const rgb = { r: rgbMatches[0], g: rgbMatches[1], b: rgbMatches[2] }; | |
| // This happened once, producing the 'wacky' colorset | |
| // const rgb - { r: rgbMatches[0], b: rgbMatches[1], g: rgbMatches[2] }; | |
| const hexRx = new RegExp(/(#.{6})/); | |
| const hexMatch = color.match(hexRx); | |
| const hex = hexMatch[0]; | |
| const nameRx = new RegExp(/^[\d ]+#.{6}(.+)/); | |
| const name = color.match(nameRx)[1].slice(1); | |
| const colorobj = { rgb, hex, name }; | |
| json[name] = colorobj; | |
| return json; | |
| }, {}); | |
| fs.writeFileSync('./basic-colors.json',JSON.stringify(colorsJson, null, 2)); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 0 0 0 #000000 black | |
| 0 102 255 #0066FF blue | |
| 0 149 183 #0095B7 blue green | |
| 1 166 56 #01A638 green | |
| 100 86 183 #6456B7 blue violet | |
| 131 89 163 #8359A3 violet | |
| 133 182 255 #85B6FF blue 76 | |
| 133 232 255 #85E9FF blue-green 76 | |
| 134 254 174 #86FEAE green 76 | |
| 175 89 62 #AF593E brown | |
| 176 169 218 #B0A9DA blue-violet 76 | |
| 187 51 133 #BB3385 red violet | |
| 196 176 212 #C4B0D4 violet 76 | |
| 197 225 122 #C5E17A yellow green | |
| 211 232 155 #D3E89B yellow-green 76 | |
| 223 179 165 #DFB3A5 brown 76 | |
| 223 255 0 #DFFF00 safety yellow | |
| 229 159 201 #E59FC9 red-violet 76 | |
| 237 10 63 #ED0A3F red | |
| 251 137 164 #FB89A4 red 76 | |
| 251 232 112 #FBE870 yellow | |
| 252 236 136 #FCEC88 yellow 76 | |
| 255 104 31 #FF681F red orange | |
| 255 133 181 #FF85B5 pink 76 | |
| 255 136 51 #FF8833 orange | |
| 255 166 201 #FFA6C9 carnation pink | |
| 255 172 133 #FFAC85 red-orange 76 | |
| 255 174 66 #FFAE42 yellow orange | |
| 255 184 133 #FFB885 orange 76 | |
| 255 202 133 #FFCA85 yellow-orange 76 | |
| 255 255 255 #FFFFFF ffffff |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "black": { | |
| "rgb": { | |
| "r": "0", | |
| "b": "0", | |
| "g": "0" | |
| }, | |
| "hex": "#000000", | |
| "name": "black" | |
| }, | |
| "blue": { | |
| "rgb": { | |
| "r": "0", | |
| "b": "102", | |
| "g": "255" | |
| }, | |
| "hex": "#0066FF", | |
| "name": "blue" | |
| }, | |
| "blue green": { | |
| "rgb": { | |
| "r": "0", | |
| "b": "149", | |
| "g": "183" | |
| }, | |
| "hex": "#0095B7", | |
| "name": "blue green" | |
| }, | |
| "green": { | |
| "rgb": { | |
| "r": "1", | |
| "b": "166", | |
| "g": "56" | |
| }, | |
| "hex": "#01A638", | |
| "name": "green" | |
| }, | |
| "blue violet": { | |
| "rgb": { | |
| "r": "100", | |
| "b": "86", | |
| "g": "183" | |
| }, | |
| "hex": "#6456B7", | |
| "name": "blue violet" | |
| }, | |
| "violet": { | |
| "rgb": { | |
| "r": "131", | |
| "b": "89", | |
| "g": "163" | |
| }, | |
| "hex": "#8359A3", | |
| "name": "violet" | |
| }, | |
| "blue 76": { | |
| "rgb": { | |
| "r": "133", | |
| "b": "182", | |
| "g": "255" | |
| }, | |
| "hex": "#85B6FF", | |
| "name": "blue 76" | |
| }, | |
| "blue-green 76": { | |
| "rgb": { | |
| "r": "133", | |
| "b": "232", | |
| "g": "255" | |
| }, | |
| "hex": "#85E9FF", | |
| "name": "blue-green 76" | |
| }, | |
| "green 76": { | |
| "rgb": { | |
| "r": "134", | |
| "b": "254", | |
| "g": "174" | |
| }, | |
| "hex": "#86FEAE", | |
| "name": "green 76" | |
| }, | |
| "brown": { | |
| "rgb": { | |
| "r": "175", | |
| "b": "89", | |
| "g": "62" | |
| }, | |
| "hex": "#AF593E", | |
| "name": "brown" | |
| }, | |
| "blue-violet 76": { | |
| "rgb": { | |
| "r": "176", | |
| "b": "169", | |
| "g": "218" | |
| }, | |
| "hex": "#B0A9DA", | |
| "name": "blue-violet 76" | |
| }, | |
| "red violet": { | |
| "rgb": { | |
| "r": "187", | |
| "b": "51", | |
| "g": "133" | |
| }, | |
| "hex": "#BB3385", | |
| "name": "red violet" | |
| }, | |
| "violet 76": { | |
| "rgb": { | |
| "r": "196", | |
| "b": "176", | |
| "g": "212" | |
| }, | |
| "hex": "#C4B0D4", | |
| "name": "violet 76" | |
| }, | |
| "yellow green": { | |
| "rgb": { | |
| "r": "197", | |
| "b": "225", | |
| "g": "122" | |
| }, | |
| "hex": "#C5E17A", | |
| "name": "yellow green" | |
| }, | |
| "yellow-green 76": { | |
| "rgb": { | |
| "r": "211", | |
| "b": "232", | |
| "g": "155" | |
| }, | |
| "hex": "#D3E89B", | |
| "name": "yellow-green 76" | |
| }, | |
| "brown 76": { | |
| "rgb": { | |
| "r": "223", | |
| "b": "179", | |
| "g": "165" | |
| }, | |
| "hex": "#DFB3A5", | |
| "name": "brown 76" | |
| }, | |
| "safety yellow": { | |
| "rgb": { | |
| "r": "223", | |
| "b": "255", | |
| "g": "0" | |
| }, | |
| "hex": "#DFFF00", | |
| "name": "safety yellow" | |
| }, | |
| "red-violet 76": { | |
| "rgb": { | |
| "r": "229", | |
| "b": "159", | |
| "g": "201" | |
| }, | |
| "hex": "#E59FC9", | |
| "name": "red-violet 76" | |
| }, | |
| "red": { | |
| "rgb": { | |
| "r": "237", | |
| "b": "10", | |
| "g": "63" | |
| }, | |
| "hex": "#ED0A3F", | |
| "name": "red" | |
| }, | |
| "red 76": { | |
| "rgb": { | |
| "r": "251", | |
| "b": "137", | |
| "g": "164" | |
| }, | |
| "hex": "#FB89A4", | |
| "name": "red 76" | |
| }, | |
| "yellow": { | |
| "rgb": { | |
| "r": "251", | |
| "b": "232", | |
| "g": "112" | |
| }, | |
| "hex": "#FBE870", | |
| "name": "yellow" | |
| }, | |
| "yellow 76": { | |
| "rgb": { | |
| "r": "252", | |
| "b": "236", | |
| "g": "136" | |
| }, | |
| "hex": "#FCEC88", | |
| "name": "yellow 76" | |
| }, | |
| "red orange": { | |
| "rgb": { | |
| "r": "255", | |
| "b": "104", | |
| "g": "31" | |
| }, | |
| "hex": "#FF681F", | |
| "name": "red orange" | |
| }, | |
| "pink 76": { | |
| "rgb": { | |
| "r": "255", | |
| "b": "133", | |
| "g": "181" | |
| }, | |
| "hex": "#FF85B5", | |
| "name": "pink 76" | |
| }, | |
| "orange": { | |
| "rgb": { | |
| "r": "255", | |
| "b": "136", | |
| "g": "51" | |
| }, | |
| "hex": "#FF8833", | |
| "name": "orange" | |
| }, | |
| "carnation pink": { | |
| "rgb": { | |
| "r": "255", | |
| "b": "166", | |
| "g": "201" | |
| }, | |
| "hex": "#FFA6C9", | |
| "name": "carnation pink" | |
| }, | |
| "red-orange 76": { | |
| "rgb": { | |
| "r": "255", | |
| "b": "172", | |
| "g": "133" | |
| }, | |
| "hex": "#FFAC85", | |
| "name": "red-orange 76" | |
| }, | |
| "yellow orange": { | |
| "rgb": { | |
| "r": "255", | |
| "b": "174", | |
| "g": "66" | |
| }, | |
| "hex": "#FFAE42", | |
| "name": "yellow orange" | |
| }, | |
| "orange 76": { | |
| "rgb": { | |
| "r": "255", | |
| "b": "184", | |
| "g": "133" | |
| }, | |
| "hex": "#FFB885", | |
| "name": "orange 76" | |
| }, | |
| "yellow-orange 76": { | |
| "rgb": { | |
| "r": "255", | |
| "b": "202", | |
| "g": "133" | |
| }, | |
| "hex": "#FFCA85", | |
| "name": "yellow-orange 76" | |
| }, | |
| "ffffff": { | |
| "rgb": { | |
| "r": "255", | |
| "b": "255", | |
| "g": "255" | |
| }, | |
| "hex": "#FFFFFF", | |
| "name": "ffffff" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment