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

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