luqven / imgix-palette-tool

Get a color palette from an imgix-image in CSS and JSON formats & recommend an overlaid-text color

Imgix-Palette-Tool

Get a color palette from an imgix-image in CSS and JSON formats and recommend an overlaid-text color to match.

Makes use of the imgix URL API parameter that extracts the color palette for an image served through its service.

Concepts and usage

npm i imgix-palette-tool

This small library has two functions:

• getPalette: asynchronous function that returns the color palette of a given imgix-served image
• getOverlayColor: function that determines a suitable color for overlaid text on a given imgix-served image.

Getting the color palette of a given imgix-served image

 getPalette(imgixUrl).then(res => {
  const palette = { css, json } = res;
});

Get a CSS and JSON representation of an image's color palette by passing getPalette a valid imgix url string.

import { getPalette } from 'imgix-palette-tool'

 const imgixUrl = 'https://www.imgix.some-img.net'
 getPalette(imgixUrl).then(res => {
  const palette = { css, json } = res;
});

• css: the imgix-palette attributes as a css text string

.image-fg-1 { color:#fa9e5a !important; }
.image-bg-1 { background-color:#fa9e5a !important; }
.image-fg-2 { color:#48abe6 !important; }
.image-bg-2 { background-color:#48abe6 !important; }
.image-fg-3 { color:#389cd3 !important; }
.image-bg-3 { background-color:#389cd3 !important; }
.image-fg-4 { color:#0483bc !important; }
.image-bg-4 { background-color:#0483bc !important; }
.image-fg-5 { color:#a45f59 !important; }
.image-bg-5 { background-color:#a45f59 !important; }
.image-fg-6 { color:#8f1613 !important; }
.image-bg-6 { background-color:#8f1613 !important; }
.image-fg-ex-1 { color:#ffffff !important; }
.image-bg-ex-1 { background-color:#ffffff !important; }
.image-fg-ex-2 { color:#000000 !important; }
.image-bg-ex-2 { background-color:#000000 !important; }
.image-fg-vibrant { color:#0789c5 !important; }
.image-bg-vibrant { background-color:#0789c5 !important; }
.image-fg-muted-dark { color:#354e60 !important; }
.image-bg-muted-dark { background-color:#354e60 !important; }
.image-fg-muted { color:#a45f59 !important; }
.image-bg-muted { background-color:#a45f59 !important; }
.image-fg-vibrant-light { color:#fa9e5a !important; }
.image-bg-vibrant-light { background-color:#fa9e5a !important; }
.image-fg-muted-light { color:#b2a4b1 !important; }
.image-bg-muted-light { background-color:#b2a4b1 !important; }
.image-fg-vibrant-dark { color:#027ab5 !important; }
.image-bg-vibrant-dark { background-color:#027ab5 !important; }

• json: the imgix-palette attributes as a JSON object

{"colors":[{"red":0.980392,"hex":"#fa9e5a","blue":0.352941,"green":0.619608},{"red":0.282353,"hex":"#48abe6","blue":0.901961,"green":0.670588},{"red":0.219608,"hex":"#389cd3","blue":0.827451,"green":0.611765},{"red":0.0156863,"hex":"#0483bc","blue":0.737255,"green":0.513725},{"red":0.643137,"hex":"#a45f59","blue":0.34902,"green":0.372549},{"red":0.560784,"hex":"#8f1613","blue":0.0745098,"green":0.0862745}],"average_luminance":0.375264,"dominant_colors":{"vibrant":{"red":0.027451,"hex":"#0789c5","blue":0.772549,"green":0.537255},"muted_light":{"red":0.698039,"hex":"#b2a4b1","blue":0.694118,"green":0.643137},"muted":{"red":0.643137,"hex":"#a45f59","blue":0.34902,"green":0.372549},"vibrant_dark":{"red":0.00784314,"hex":"#027ab5","blue":0.709804,"green":0.478431},"vibrant_light":{"red":0.980392,"hex":"#fa9e5a","blue":0.352941,"green":0.619608},"muted_dark":{"red":0.207843,"hex":"#354e60","blue":0.376471,"green":0.305882}}}

Determining a suitable color for overlaid text on a given imgix-served image

 const overlayColor = {className, needsBackdrop, color} = getOverlayColor(palette)

Get an Object with className, needsBackdrop, and hex color of the color that best suits text overlaid on an image by passing an imgix-color-palette to the getOverlayColor.

import { getPalette, getOverlayColor } from 'imgix-palette-tool'

const imgixUrl = 'https://www.imgix.some-img.net'
getPalette(imgixUrl).then(res => {
 const palette = res;
 const recommendedOverlayColor = getOverlayColor(palette);
 console.log(recommendedOverlayColor);
});

• className: string representing the imgix specific class for the color, i.e image-fg-1
• color: hex color code of the backdrop color
• needsBackdrop: boolean that indicates if contrast too low and a black semi-transparent backdrop is recommended