How to use hex-rgb - 9 common examples

${hexRgb(backgroundColor)[0]},
        ${hexRgb(backgroundColor)[1]},
        ${hexRgb(backgroundColor)[2]},
        ${backgroundColorOpacity})`,
      transitionDuration: `${timeOut}ms`,
    },
    [`& .${spinnerClassName}`]: {
      opacity: 1,
      transitionDuration: `${timeOut}ms`,
    },
  },
  '.fade-exit-active': {
    '& .overlay': {
      backgroundColor: `rgba(
        ${hexRgb(backgroundColor)[0]},
        ${hexRgb(backgroundColor)[1]},
        ${hexRgb(backgroundColor)[2]},
        0)`,
      transitionDuration: `${timeOut}ms`,
    },
    [`& .${spinnerClassName}`]: {
      opacity: 0,
      transitionDuration: `${timeOut}ms`,
    },
  },
}));

const colorToHex = color =>
  color.startsWith(`rgba(`)
    ? rgbArray(color)
    : hexRgb(color, { format: `array` })

export const toRGB = color => {
  if (isHex(color)) {
    return discretize(hexToRGB(color)).join(' ');
  } else if (colorNames[color]) {
    return discretize(colorNames[color]).join(' ');
  }

  throw new Error(`Unknown color: ${color}`);
};

textureCtx.scale(1, -1);
    textureCtx.drawImage(textureCanvas, 0, 0, W, H);
    textureCtx.restore();
    bufferCtx.save();
    bufferCtx.globalAlpha = 1.0;

    for (let r = 0; r < s; r++) {
      bufferCtx.translate(CX, CY);
      bufferCtx.rotate(PI2 / s);
      bufferCtx.translate(-CX, -CY);
      bufferCtx.drawImage(textureCanvas, 0, 0, W, H, 0, 0, W, H);
    }

    bufferCtx.restore();
    mainCtx.save();
    const { red, green, blue } = hexToRgb(backgroundColor);
    mainCtx.fillStyle = `rgba(${red}, ${green}, ${blue}, ${backgroundOpacity})`;
    mainCtx.fillRect(0, 0, canvas.width, canvas.height);
    mainCtx.translate(CX, CY);
    mainCtx.translate(-CX, -CY);
    mainCtx.drawImage(bufferCanvas, 0, 0);
    mainCtx.restore();
  }

onColorSelected = (color) => {
        this.webview.postMessage(JSON.stringify({op:'color', color: hexRgb(color)}));
        this.setState({color, showColorPicker: false});
    }
    componentWillMount() {

const genColorFromHex = ({ color }) => {
  if (!isHex(color)) return `1, 1, 1`;

  const { red, green, blue } = hexRgb(color);
  return `${(red / 255).toFixed(2)}, ${(green / 255).toFixed(2)}, ${(
    blue / 255
  ).toFixed(2)}`;
};

import { css } from 'emotion';
import tokens from '@contentful/forma-36-tokens';
import hexRgb from 'hex-rgb';

const { red, green, blue } = hexRgb(tokens.colorElementMid);

export const BORDER_SIZE = 2;

export const styles = {
  focalPoint: css({
    backgroundColor: `rgba(${red}, ${green}, ${blue}, 0.5)`,
    borderRadius: '50%',
    border: `${BORDER_SIZE}px solid ${tokens.colorElementDarkest}`,
    opacity: 1,
    transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingCubicBezier}`,
    position: 'absolute',
    pointerEvents: 'none'
  })
};

const rgb = str => hex(str).map(x => x / 255);