colorable-dominant

Create ARIA-compliant color themes based on a predominant color palette. Similar to react-image-palette but out of the box

colorable-dominant is based mayority in react-image-palette but designed for be used leaving the process of get the most predominant colors out of the library.

You can use your favorite predominant colors extractor (such as splashy) and then use this library for get the best WCAG contrast standard combination.

Install

$ npm install colorable-dominant --save

Usage

const colorableDominant = require('colorable-dominant')
const splashy = require('splashy')()

;(async () => {
  const predominantColors = await splashy.fromUrl('https://i.imgur.com/ZJDyOhn.jpg')
  const palette = colorableDominant(predominantColors)

  console.log(palette)
  // {
  //   backgroundColor: '#3C1020',
  //   alternativeColor: '#D17872',
  //   color: '#EF4E2E'
  // }
})()

API

colorableDominant(colors, [options])

colors

Required
Type: array

A collection of a predominant colors, sorted from most to less predominant.

options

minContrast

Type: number
Default: 4.5

This is the WCAG contrast ratio for considered a good combination of colors.

These contrast ratio is used for create color variations from the original colors in order to get a better (but still predominant) color present in original colors.

The value provided by default is a "AA" certification.

threshold

Type: number
Default: 1.0

The minimum WCAG contrast ratio to considered a combination of colors.

The value means that combinations below this value will be discarded.

Related

• splashy – Given an image, extract predominant & palette colors.
• color-microservice – Get color information from any URL image microservice.

License

colorable-dominant © Formidable Labs, Released under the MIT License.
Authored by Formidable Labs and maintained by Kiko Beats with help from contributors.

kikobeats.com · GitHub @Kiko Beats · Twitter @Kikobeats