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.
$ npm install colorable-dominant --saveconst colorableDominant = require('colorable-dominant')
const splashy = require('splashy')
const buffer = Buffer.from(await fetch('https://i.imgur.com/ZJDyOhn.jpg').then(res => res.arrayBuffer()))
const palette = await splashy(buffer)
console.log({ palette, ...colorableDominant(palette) })
// {
// palette: [ '#941c1c', '#8c0c04', '#d58d74', '#ad685d', '#644430', '#ceb9ad' ],
// backgroundColor: '#CEB9AD',
// color: '#8C0C04',
// alternativeColor: '#941C1C'
// }Required
Type: array
A collection of a predominant colors, sorted from most to less predominant.
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.
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.
- splashy – Given an image, extract predominant & palette colors.
- color-microservice – Get color information from any URL image microservice.
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 · X @Kikobeats