0.0.1 • Published 3 years ago
imgix-palette-tool v0.0.1
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 imagegetOverlayColor
: 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.eimage-fg-1
color
: hex color code of the backdrop colorneedsBackdrop
: boolean that indicates if contrast too low and a black semi-transparent backdrop is recommended
0.0.1
3 years ago