How to use the color-blend.normal function in color-blend

To help you get started, we’ve selected a few color-blend examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github gatsbyjs / gatsby / www / src / utils / guidelines / color.js View on Github external
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,

color-blend

Blends RGBA colors with different blend modes

MIT
Latest version published 2 years ago

Package Health Score

60 / 100
Full package analysis