A tiny zero-dependency browser package that extracts dominant color or color palette from an image using WebGPU API with various algorithms.

Table of contents

• Live demo
• Install
• Import
  • Local
    • JS
    • HTML
    • Import maps
      • JS
      • HTML
    • Dev Servers / Builders
      • JS
      • HTML
  • CDN
    • UNPKG
      • JS
      • HTML
    • ESM CDN
      • JS
      • HTML
    • Skypack
      • JS
      • HTML
• Use
  • JS

Live demo

https://ivanludvig.dev/image-palette-webgpu/

Install

npm i image-palette-webgpu

Import

Local

JS

import { extractDominantColors } from './node_modules/image-palette-webgpu/index.js';

HTML

<script type="module">
  import { extractDominantColors } from './node_modules/image-palette-webgpu/index.js';
</script>

Import maps

<script type="importmap">
  {
    "imports": {
      "image-palette-webgpu": "./node_modules/image-palette-webgpu/index.js"
    }
  }
</script>

JS

import { extractDominantColors } from 'image-palette-webgpu';

HTML

<script type="module">
  import { extractDominantColors } from 'image-palette-webgpu';
</script>

Dev Servers / Builders

JS

import { extractDominantColors } from 'image-palette-webgpu';

HTML

<script type="module">
  import { extractDominantColors } from 'image-palette-webgpu';
</script>

CDN

UNPKG

JS

import { extractDominantColors } from 'https://unpkg.com/image-palette-webgpu';

HTML

<script type="module">
  import { extractDominantColors } from 'https://unpkg.com/image-palette-webgpu';
</script>

ESM CDN

JS

import { extractDominantColors } from 'https://esm.sh/image-palette-webgpu';

HTML

<script type="module">
  import { extractDominantColors } from 'https://esm.sh/image-palette-webgpu';
</script>

Skypack

JS

import { extractDominantColors } from 'https://cdn.skypack.dev/image-palette-webgpu';

HTML

<script type="module">
  import { extractDominantColors } from 'https://cdn.skypack.dev/image-palette-webgpu';
</script>

Use

JS

const image = new Image();
image.src = './image.png';
const colorCount = 4;
const algorithm = 'celebi';
await image.decode();
const dominantColors = await extractDominantColors(image, colorCount, algorithm);
console.log(dominantColors); // ['#4285f4', '#db4437', '#f4b400', '#0f9d58']