SHARE
TWEET

Untitled

a guest Apr 26th, 2019 79 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const VALID_HEX_CHARS = {
  2.   "0": true,
  3.   "1": true,
  4.   "2": true,
  5.   "3": true,
  6.   "4": true,
  7.   "5": true,
  8.   "6": true,
  9.   "7": true,
  10.   "8": true,
  11.   "9": true,
  12.   "A": true,
  13.   "B": true,
  14.   "C": true,
  15.   "D": true,
  16.   "E": true,
  17.   "F": true
  18. }
  19.  
  20. const getRGBComponentLuminance = (component) => {
  21.   if (typeof component == "string") component = parseInt(component);
  22.  
  23.   if (component < 0) component = 0;
  24.   else if (component > 255) component = 1;
  25.   else component = component / 255;
  26.  
  27.   if (component <= 0.03928) return component / 12.92;
  28.   else return Math.pow((component + 0.055) / 1.055, 2.4);
  29. }
  30.  
  31. const HEXComponentToRGB = (component) => {
  32.   if (component.length == 1) component = `${component}${component}`;
  33.   return parseInt(component, 16);
  34. }
  35.  
  36. const RGBComponentToHEX = (component) => {
  37.   if (typeof component == "string") component = parseInt(component);
  38.  
  39.   const tempHEX = component.toString(16);
  40.   return (tempHEX.length == 1) ? `0${tempHEX}` : tempHEX;
  41. }
  42.  
  43. const relativeLuminance = (color) => {
  44.   if (validHEXColor(color)) color = parseRGBFromHEX(color);
  45.  
  46.   const splitColor = splitRGB(color);
  47.  
  48.   const redLuminance = getRGBComponentLuminance(splitColor[0]);
  49.   const greenLuminance = getRGBComponentLuminance(splitColor[1]);
  50.   const blueminance = getRGBComponentLuminance(splitColor[2]);
  51.  
  52.   return 0.2126 * redLuminance + 0.7152 * greenLuminance + 0.0722 * blueminance;
  53. }
  54.  
  55. const splitHEX = (color) => {
  56.   if (color.length == 4) return color.replace("#","").split("");
  57.   else return color.replace("#","").match(/.{1,2}/g);
  58. }
  59.  
  60. const splitRGB = (color) => {
  61.   return color.replace("rgb(","").replace("rgba(","").replace(")","").split(",");
  62. }
  63.  
  64. export var validHEXColor = (color) => {
  65.   let valid = false;
  66.  
  67.   if (typeof color == "string") {
  68.     const splitColor = color.split("");
  69.     const length = splitColor.length;
  70.     const includesHEX = splitColor[0] == "#";
  71.        
  72.     if (includesHEX ? (length == 4 || length == 7) : (length == 3 || length == 6)) {
  73.       let i = includesHEX ? 1 : 0;
  74.      
  75.       while (i < length) {
  76.         if (typeof VALID_HEX_CHARS[splitColor[i].toUpperCase()] == "undefined") break;
  77.  
  78.         i++;
  79.       }
  80.      
  81.       valid = (i == length && length != 0);
  82.     }
  83.   }
  84.  
  85.   return valid;
  86. };
  87.  
  88. export var validRGBColor = (color) => {
  89.   let valid = false;
  90.  
  91.   if (typeof color == "string") {
  92.     const splitColor = splitRGB(color);
  93.     const length = splitColor.length;
  94.        
  95.     if (length == 3 || length == 4) {
  96.       let i = 0;
  97.      
  98.       while (i < length) {
  99.         if (isNaN((i == 3) ? parseFloat(splitColor[3]) : parseInt(splitColor[i]))) break;
  100.  
  101.         i++;
  102.       }
  103.      
  104.       valid = (i == length);
  105.     }
  106.   }
  107.  
  108.   return valid;
  109. }
  110.  
  111. export var parseHEXFromRGB = (color) => {
  112.   let HEX = "#";
  113.   const splitColor = splitRGB(color);
  114.  
  115.   for (let i = 0; i < 3; i++) {
  116.     HEX += RGBComponentToHEX(splitColor[i]);
  117.   }
  118.  
  119.   if (validHEXColor(HEX)) return HEX;
  120. }
  121.  
  122. export var parseRGBFromHEX = (color) => {
  123.   let RGB = "";
  124.   const splitColor = splitHEX(color);
  125.  
  126.   for (let i = 0; i < 3; i++) {
  127.     RGB += HEXComponentToRGB(splitColor[i]);
  128.     if (i != 2) RGB += ", ";
  129.   }
  130.  
  131.   return `rgb(${RGB})`;
  132. }
  133.  
  134. export var getFullHEXColor = (color) => {
  135.   const splitColor = color.split("");
  136.   const length = splitColor.length;
  137.   const includesHEX = splitColor[0] == "#";
  138.  
  139.   let fullHEXColor = "#";
  140.   let i = includesHEX ? 1 : 0;
  141.  
  142.   while (i < length) {
  143.     fullHEXColor += splitColor[i];
  144.  
  145.     if (includesHEX && (length == 3 || length == 4)) fullHEXColor += splitColor[i];
  146.  
  147.     i++;
  148.   }
  149.  
  150.   return fullHEXColor;
  151. }
  152.  
  153. const getContrastRatio = (background, foreground) => {
  154.   const l1 = relativeLuminance(background) + 0.05;
  155.   const l2 = relativeLuminance(foreground) + 0.05;
  156.  
  157.   if (l1 > l2) return l1 / l2;
  158.   else return l2 / l1;
  159. }
  160.  
  161. export var contrastRatio = (background, foreground) => {
  162.   return getContrastRatio(background, foreground).toFixed(2);
  163. }
  164.  
  165. export var passesWCAGAA = (background, foreground) => {
  166.   const contrastRatio = getContrastRatio(background, foreground);
  167.  
  168.   return {
  169.     normal: contrastRatio >= 4.5,
  170.     large: contrastRatio >= 3
  171.   }
  172. }
  173.  
  174. export var passesWCAGAAA = (background, foreground) => {
  175.   const contrastRatio = getContrastRatio(background, foreground);
  176.  
  177.   return {
  178.     normal: contrastRatio >= 7,
  179.     large: contrastRatio >= 4.5
  180.   }
  181. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top