-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcolour-info-tool.min.js
1 lines (1 loc) · 11.7 KB
/
colour-info-tool.min.js
1
const htmlColours=[["IndianRed","205","92","92"],["LightCoral","240","128","128"],["Salmon","250","128","114"],["DarkSalmon","233","150","122"],["LightSalmon","255","160","122"],["Crimson","220","20","60"],["Red","255","0","0"],["FireBrick","178","34","34"],["DarkRed","139","0","0"],["Pink","255","192","203"],["LightPink","255","182","193"],["HotPink","255","105","180"],["DeepPink","255","20","147"],["MediumVioletRed","199","21","133"],["PaleVioletRed","219","112","147"],["LightSalmon","255","160","122"],["Coral","255","127","80"],["Tomato","255","99","71"],["OrangeRed","255","69","0"],["DarkOrange","255","140","0"],["Orange","255","165","0"],["Gold","255","215","0"],["Yellow","255","255","0"],["LightYellow","255","255","224"],["LemonChiffon","255","250","205"],["LightGoldenrodYellow","250","250","210"],["PapayaWhip","255","239","213"],["Moccasin","255","228","181"],["PeachPuff","255","218","185"],["PaleGoldenrod","238","232","170"],["Khaki","240","230","140"],["DarkKhaki","189","183","107"],["Lavender","230","230","250"],["Thistle","216","191","216"],["Plum","221","160","221"],["Violet","238","130","238"],["Orchid","218","112","214"],["Fuchsia","255","0","255"],["Magenta","255","0","255"],["MediumOrchid","186","85","211"],["MediumPurple","147","112","219"],["RebeccaPurple","102","51","153"],["BlueViolet","138","43","226"],["DarkViolet","148","0","211"],["DarkOrchid","153","50","204"],["DarkMagenta","139","0","139"],["Purple","128","0","128"],["Indigo","75","0","130"],["SlateBlue","106","90","205"],["DarkSlateBlue","72","61","139"],["MediumSlateBlue","123","104","238"],["GreenYellow","173","255","47"],["Chartreuse","127","255","0"],["LawnGreen","124","252","0"],["Lime","0","255","0"],["LimeGreen","50","205","50"],["PaleGreen","152","251","152"],["LightGreen","144","238","144"],["MediumSpringGreen","0","250","154"],["SpringGreen","0","255","127"],["MediumSeaGreen","60","179","113"],["SeaGreen","46","139","87"],["ForestGreen","34","139","34"],["Green","0","128","0"],["DarkGreen","0","100","0"],["YellowGreen","154","205","50"],["OliveDrab","107","142","35"],["Olive","128","128","0"],["DarkOliveGreen","85","107","47"],["MediumAquamarine","102","205","170"],["DarkSeaGreen","143","188","139"],["LightSeaGreen","32","178","170"],["DarkCyan","0","139","139"],["Teal","0","128","128"],["Aqua","0","255","255"],["Cyan","0","255","255"],["LightCyan","224","255","255"],["PaleTurquoise","175","238","238"],["Aquamarine","127","255","212"],["Turquoise","64","224","208"],["MediumTurquoise","72","209","204"],["DarkTurquoise","0","206","209"],["CadetBlue","95","158","160"],["SteelBlue","70","130","180"],["LightSteelBlue","176","196","222"],["PowderBlue","176","224","230"],["LightBlue","173","216","230"],["SkyBlue","135","206","235"],["LightSkyBlue","135","206","250"],["DeepSkyBlue","0","191","255"],["DodgerBlue","30","144","255"],["CornflowerBlue","100","149","237"],["MediumSlateBlue","123","104","238"],["RoyalBlue","65","105","225"],["Blue","0","0","255"],["MediumBlue","0","0","205"],["DarkBlue","0","0","139"],["Navy","0","0","128"],["MidnightBlue","25","25","112"],["Cornsilk","255","248","220"],["BlanchedAlmond","255","235","205"],["Bisque","255","228","196"],["NavajoWhite","255","222","173"],["Wheat","245","222","179"],["BurlyWood","222","184","135"],["Tan","210","180","140"],["RosyBrown","188","143","143"],["SandyBrown","244","164","96"],["Goldenrod","218","165","32"],["DarkGoldenrod","184","134","11"],["Peru","205","133","63"],["Chocolate","210","105","30"],["SaddleBrown","139","69","19"],["Sienna","160","82","45"],["Brown","165","42","42"],["Maroon","128","0","0"],["White","255","255","255"],["Snow","255","250","250"],["HoneyDew","240","255","240"],["MintCream","245","255","250"],["Azure","240","255","255"],["AliceBlue","240","248","255"],["GhostWhite","248","248","255"],["WhiteSmoke","245","245","245"],["SeaShell","255","245","238"],["Beige","245","245","220"],["OldLace","253","245","230"],["FloralWhite","255","250","240"],["Ivory","255","255","240"],["AntiqueWhite","250","235","215"],["Linen","250","240","230"],["LavenderBlush","255","240","245"],["MistyRose","255","228","225"],["Gainsboro","220","220","220"],["LightGray","211","211","211"],["Silver","192","192","192"],["DarkGray","169","169","169"],["Gray","128","128","128"],["DimGray","105","105","105"],["LightSlateGray","119","136","153"],["SlateGray","112","128","144"],["DarkSlateGray","47","79","79"],["Black","0","0","0"]],colourInfo=document.getElementById("colour-info-tool"),colourCodeLink=document.getElementById("colour-code-link"),colourCodeLinkSVG=document.querySelector('a[id="colour-code-link"] > svg > path'),colourHeader=document.getElementById("colour-header"),colourLegend=document.getElementById("colour-legend"),colourInput=document.getElementById("colour-input"),colourChooser=document.getElementById("colour-chooser"),colourOutput=document.getElementById("colour-output");function outputColourInfo(hex,rgb,name){rgb||(rgb=hexToRGB(hex)),hex||(hex=rgbToHex(...rgb)),name||(name=closestColour(...rgb)),hsl=rgbToHSL(...rgb),hsv=hslToHSV(...hsl),cmyk=rgbToCMYK(...rgb),decimal=rgbToDecimal(...rgb),complementaryColoursArray=complementaryColours(...rgb),complementaryColoursArray=[...new Set([...complementaryColoursArray])],colourOutput.style.height=null,colourGrid="",complementaryColoursArray.forEach(complementaryColour=>{complementaryColour!==hex&&(colourGrid+=`<div style="background-color:#${complementaryColour};color:${setFontColour(...hexToRGB(complementaryColour))}">#${complementaryColour}</div>`)}),colourOutput.innerHTML=`<div class="bb wfc g" style="width:280px;grid-template-columns:auto 1fr;grid-template-rows:repeat(6,22px)27px auto;grid-column-gap:20px;grid-row-gap:3px">\n <span class="l1">HTML Name*:</span> ${name}\n <span class="l1">HEX:</span> #${hex}\n <span class="l1">RGB:</span> ${rgb[0]}, ${rgb[1]}, ${rgb[2]}\n <span class="l1">HSL:</span> ${hsl[0]}°, ${hsl[1]}%, ${hsl[2]}%\n <span class="l1">HSV:</span> ${hsv[0]}°, ${hsv[1]}%, ${hsv[2]}%\n <span class="l1">CMYK:</span> ${cmyk[0]}%, ${cmyk[1]}%, ${cmyk[2]}%, ${cmyk[3]}%\n <span class="l1">Decimal:</span> ${decimal}\n <span class="l1" style="grid-column-end:span 2">Complementary Colours:</span>\n <div class="g tac" style="grid-template-columns:repeat(auto-fit,minmax(85px,1fr));grid-column-end:span 2;grid-gap:1px">\n ${colourGrid}\n </div>\n <span style="grid-column-end:span 2;margin-top:15px" class="f13">* The closest HTML colour name based on its RGB values.</span>\n </div>`,improveReadability(...rgb)}function improveReadability(r,g,b){colourInfo.style.backgroundColor=`rgb(${r}, ${g}, ${b})`,bestContrastColour=contrastColour(r,g,b),"rgb(255, 255, 255)"===window.getComputedStyle(colourInfo).backgroundColor?(colourCodeLink.style.color="var(--secondaryColour)",colourCodeLink.style.boxShadow="inset 0.2em 0.2em 0.2em 0 #fff, inset 2px -2px 2px 0 var(--secondaryColour)",colourCodeLinkSVG.setAttribute("fill","var(--secondaryColour)"),colourHeader.style.textDecorationColor="var(--mainColour)"):(colourCodeLink.style.color=bestContrastColour,colourCodeLink.style.boxShadow=`inset 0.2em 0.2em 0.2em 0 #fff, inset 2px -2px 2px 0 ${bestContrastColour}`,colourCodeLinkSVG.setAttribute("fill",bestContrastColour),colourHeader.style.textDecorationColor=bestContrastColour),colourHeader.style.color=bestContrastColour,colourLegend.style.color=bestContrastColour}function closestColour(r,g,b){return lowestDiff=765,htmlColours.some(colour=>{if(rDiff=Math.abs(r-colour[1]),gDiff=Math.abs(g-colour[2]),bDiff=Math.abs(b-colour[3]),totalDiff=rDiff+gDiff+bDiff,0==totalDiff)return closestColourName=colour[0],closestColourName;totalDiff<lowestDiff&&(lowestDiff=totalDiff,closestColourName=colour[0])}),closestColourName}function contrastColour(r1,g1,b1){return testColour=(299*r1+587*g1+114*b1)/1e3,white=255,black=0,whiteBrightness=Math.round(Math.abs(testColour-white)),blackBrightness=Math.round(Math.abs(testColour-black)),whiteBrightness<blackBrightness?"rgb(0, 0, 0)":"rgb(255, 255, 255)"}function complementaryColours(r,g,b){return rgbl30m=shiftLightness(r,g,b,-30),rgbl15=shiftLightness(r,g,b,15),rgbl30=shiftLightness(r,g,b,30),rgbl45=shiftLightness(r,g,b,45),rgbh90=shiftHue(r,g,b,90),rgbh120=shiftHue(r,g,b,120),rgbh180=shiftHue(r,g,b,180),rgbh270=shiftHue(r,g,b,270),rgbopp=[255-r,255-g,255-b],[rgbToHex(...rgbl30m),rgbToHex(...rgbl15),rgbToHex(...rgbl30),rgbToHex(...rgbl45),rgbToHex(...rgbh90),rgbToHex(...rgbh120),rgbToHex(...rgbh180),rgbToHex(...rgbh270),rgbToHex(...rgbopp)]}function shiftHue(r,g,b,number){return hsl=rgbToHSL(r,g,b),hueShift=hsl[0]+number,hueShift>360&&(hueShift-=360),newRGB=hslToRGB(hueShift,hsl[1],hsl[2]),newRGB}function shiftLightness(r,g,b,number){return hsl=rgbToHSL(r,g,b),lightShift=hsl[2]+number,lightShift>100?lightShift-=100:lightShift<0&&(lightShift+=100),newRGB=hslToRGB(hsl[0],hsl[1],lightShift),newRGB}function setFontColour(r,g,b){return.299*r+.587*g+.114*b>186?"#000":"#fff"}function separateRGB(rgb){return rgb=rgb.match(/([0-2]?\d?\d(?:\.\d?\d?)?)/g),r=Math.round(rgb[0]),g=Math.round(rgb[1]),b=Math.round(rgb[2]),r>255&&(r=255),g>255&&(g=255),b>255&&(b=255),[r,g,b]}function rgbToHex(r,g,b){return rHex=Number(r).toString(16),gHex=Number(g).toString(16),bHex=Number(b).toString(16),rHex=rHex.padStart(2,rHex[0]),gHex=gHex.padStart(2,gHex[0]),bHex=bHex.padStart(2,bHex[0]),rHex+gHex+bHex}function hexToRGB(h){return 3==(h=h.replace(/^#/,"")).length?(r="0x"+h[0]+h[0],g="0x"+h[1]+h[1],b="0x"+h[2]+h[2]):6==h.length&&(r="0x"+h[0]+h[1],g="0x"+h[2]+h[3],b="0x"+h[4]+h[5]),[+r,+g,+b]}function rgbToDecimal(r,g,b){return rDecimal=parseInt(r)<<16,gDecimal=parseInt(g)<<8,bDecimal=parseInt(b),Number(rDecimal+gDecimal+bDecimal)}function hslToRGB(h,s,l){s/=100,l/=100;let c=(1-Math.abs(2*l-1))*s,x=c*(1-Math.abs(h/60%2-1)),m=l-c/2,r=0,g=0,b=0;return 0<=h&&h<60?(r=c,g=x,b=0):60<=h&&h<120?(r=x,g=c,b=0):120<=h&&h<180?(r=0,g=c,b=x):180<=h&&h<240?(r=0,g=x,b=c):240<=h&&h<300?(r=x,g=0,b=c):300<=h&&h<360&&(r=c,g=0,b=x),r=Math.round(255*(r+m)),g=Math.round(255*(g+m)),b=Math.round(255*(b+m)),[r,g,b]}function rgbToHSL(r,g,b){return r/=255,g/=255,b/=255,cmin=Math.min(r,g,b),cmax=Math.max(r,g,b),delta=cmax-cmin,0==delta?h=0:cmax==r?h=(g-b)/delta%6:cmax==g?h=(b-r)/delta+2:h=(r-g)/delta+4,h=Math.round(60*h),h<0&&(h+=360),l=(cmax+cmin)/2,s=0==delta?0:delta/(1-Math.abs(2*l-1)),s=Math.round(100*s),l=Math.round(100*l),[h,s,l]}function hslToHSV(h,s,l){return s/=100,l/=100,v=l+s*Math.min(l,1-l),s=0===v?0:2*(1-l/v),s=Math.round(100*s),v=Math.round(100*v),[h,s,v]}function rgbToCMYK(r,g,b){return 0==r&&0==g&&0==b?[0,0,0,1]:(c=1-r/255,m=1-g/255,y=1-b/255,k=Math.min(c,Math.min(m,y)),c=(c-k)/(1-k),m=(m-k)/(1-k),y=(y-k)/(1-k),c=Math.round(100*c),m=Math.round(100*m),y=Math.round(100*y),k=Math.round(100*k),[c,m,y,k])}colourChooser.addEventListener("input",()=>{hex=colourChooser.value.replace(/^#/,""),outputColourInfo(hex,!1,!1)}),colourInput.addEventListener("input",()=>{null!==colourInput.value.match(/^#?([A-Fa-f0-9]{3}){1,2}$/)?(hex=colourInput.value.replace(/^#/,""),3===hex.length&&(hex=`${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`),outputColourInfo(hex,!1,!1)):null!==colourInput.value.match(/^(rgb)?a?\(?(\s*([\d.]+\s*%?)\s*,?){4}\)?$/)?(rgb=separateRGB(colourInput.value),3==rgb.length&&outputColourInfo(!1,rgb,!1)):null===colourInput.value.match(/\d/g)&&(colourName=colourInput.value.toLowerCase().replace(/ /g,""),htmlColours.forEach(colour=>{colour[0].toLowerCase()===colourName&&(colourName=colour[0],rgb=[colour[1],colour[2],colour[3]],hex=rgbToHex(...rgb),outputColourInfo(hex,rgb,colourName))}))});