Image Palette screenshot

Image Palette

Author Avatar Theme by Formidablelabs
Updated: 3 Mar 2022
356 Stars

Generate a WCAG compliant color theme from any image

Overview:

The image-palette project allows users to dynamically create adaptive user interfaces (UIs) based on the colors of any given image. The palettes are generated from the most dominant and vibrant colors in the source image, and ensure that the color pairings meet the WCAG contrast standard for accessible design. The project is subdivided into three packages: image-palette-core, react-image-palette, and preact-image-palette. However, it should be noted that the project is no longer maintained by Formidable, and interested developers are encouraged to fork the project and continue its development on their own.

Features:

  • Adaptive UIs: Users can create adaptive UIs by dynamically generating palettes from any image.
  • WCAG Contrast Standard: Color pairings in the generated palettes are guaranteed to meet the WCAG contrast standard for accessibility.
  • Core Logic: The image-palette-core package contains the core logic for parsing palettes from images.
  • React Adapter: The react-image-palette package provides an adapter for using image-palette-core in React projects.
  • Preact Adapter: The preact-image-palette package provides an adapter for using image-palette-core in Preact projects.

Installation:

To install and use the image-palette project, follow these steps:

  1. Install the image-palette-core package by running the following command:
npm install image-palette-core
  1. If you are using React, install the react-image-palette package:
npm install react-image-palette
  1. If you are using Preact, install the preact-image-palette package:
npm install preact-image-palette
  1. Import the necessary packages into your codebase:
import {generatePalette} from 'image-palette-core';
import ImagePalette from 'react-image-palette'; // for React
import ImagePalette from 'preact-image-palette'; // for Preact
  1. Start using the image-palette features in your project.

Summary:

The image-palette project offers an innovative approach to creating adaptive UIs based on image colors. It ensures that the generated palettes meet the accessibility standards for color contrast. The project provides separate packages for React and Preact, and although it is no longer maintained by Formidable, interested developers are encouraged to fork and continue its development.