How to use color-blend - 3 common examples

import postcssCustomProps from 'postcss-custom-properties'
import postcssAdvancedVars from 'postcss-advanced-variables'
import postcssColor from 'postcss-color-function'
import postcssNested from 'postcss-nested'
import postcssPrefixUrl from 'postcss-prefix-url'
import postcssMedia from 'postcss-custom-media'
import postcssEach from 'postcss-each'
import colorBlend from 'color-blend'
import functions from 'postcss-functions'
import autoprefixer from 'autoprefixer'
import objectHash from 'node-object-hash'

let cssHashes = {}
let mainPlugins = []
mainPlugins.push(postcssEach)
mainPlugins.push(colorBlend())
let plugin = postcss.plugin('postcss-math', () => {
  return (css) => {
    // Transform CSS AST here
    css.walk((node) => {
      let nodeProp

      if (node.type === 'decl') {
        nodeProp = 'value'
      } else if (node.type === 'atrule' && node.name === 'media') {
        nodeProp = 'params'
      } else if (node.type === 'rule') {
        nodeProp = 'selector'
      } else {
        return
      }

export const a11y = function(hex, bg) {
  const text = colorToHex(hex)
  const background = colorToHex(bg)

  // not 100% sure how well this works — values are slightly different
  // than what https://contrast-ratio.com/ produces when the text
  // color is an rgba value; contrast ratios for solid colors seem fine
  const overlaid = normal(
    {
      r: background[0],
      g: background[1],
      b: background[2],
      a: background[3],
    },
    { r: text[0], g: text[1], b: text[2], a: text[3] }
  )

  const contrast = wcag(
    [overlaid.r, overlaid.g, overlaid.b],
    [background[0], background[1], background[2]]
  )

  return {
    contrast: contrast,

const mergeRgb = function(c1, c2, p) {
        if (p === undefined) p = 0.2;

        c1.a = 1;
        c2.a = 1;

        return blender.darken(c1, c2);
    };