Hex/RGB Color Functions

shading.ts

import { PaletteColor, RgbString } from "../Theme";

export type RGB = [number, number, number];
type BackgroundColor = string;

export function getRedGreenBlue(rgbStr: string): RGB {
  const [r, g, b] = /rgba?\((.+)\)/
    .exec(rgbStr)[1]
    .split(",")
    .map((c) => Number(c.trim()));

  return [r, g, b];
}

export function getRgbFromHex(hex: string): `rgb(${string})` {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

  if (!result.length) {
    console.warn(`Can not convert "${hex}" to rgb.`);
    return `rgb(0,0,0)`;
  }

  return `rgb(${parseInt(result[1])},${parseInt(result[2])},${parseInt(
    result[3]
  )})` as any;
}

/**
 * @param rgb {RGB} Takes the RGB tuple
 * @param percentWhole {number} a whole number to convert to a decimal and multiply by.
 */
export function calculate([r, g, b]: RGB, percent: number): RGB {
  const arr: RGB = [
    (r * (100 + percent)) / 100,
    (g * (100 + percent)) / 100,
    (b * (100 + percent)) / 100,
  ];

  return arr.map((val) => (val > 255 ? 255 : val)) as any;
}

export function getRgbString([r, g, b]: RGB) {
  return `rgb(${r},${g},${b})`;
}

export function getRgbValuesFromString(color: PaletteColor): RGB {
  if (color.startsWith("#")) {
    const rgbStr = getRgbFromHex(color);

    console.log("----------------------------");
    console.log(rgbStr);
    console.log("----------------------------");

    return getRedGreenBlue(rgbStr);
  }

  if (color.startsWith("rgb")) {
    return getRedGreenBlue(color);
  }
}

export function lighten(color: PaletteColor, percent: number): RgbString {
  const rgb = getRgbValuesFromString(color);
  return getRgbString(calculate(rgb, percent));
}

export function darken(color: PaletteColor, percent: number): RgbString {
  const rgb = getRgbValuesFromString(color);
  return getRgbString(calculate(rgb, percent * -1));
}

export function shadeFromRgbString(rgbStr: string, percent: number): string {
  const rgb = getRedGreenBlue(rgbStr);
  const [r, g, b] = calculate(rgb, percent);

  return `rgb(${r},${g},${b})`;
}

export function convertRgbToHex(rgbStr: string, percent: number): string {
  const rgb = getRedGreenBlue(rgbStr);
  const [r, g, b] = calculate(rgb, percent).map((val) => {
    const hex = val.toString(16);
    return hex.length === 1 ? 0 + hex : hex;
  });

  return "#" + r + g + b;
}

export function getContrastingFontColor<
  L extends string = string,
  D extends string = string
>(bgColor: BackgroundColor, lightText: L = "" as any, darkText: D): L | D {
  const color: string = bgColor.startsWith("rgb")
    ? bgColor
    : getRgbFromHex(bgColor);
  const [r, g, b] = getRedGreenBlue(color);

  // http://www.w3.org/TR/AERT#color-contrast
  const brightness = Math.round((r * 299 + g * 587 + b * 114) / 1000);

  return brightness > 125 ? darkText : lightText;
}