color-thief

开源

用JavaScript从图像中取出色调盘. 在浏览器和节点中工作.

13.6K stars0 点赞1 次浏览

工具介绍

用JavaScript从图像中取出色调盘. 在浏览器和节点中工作.

从浏览器和Node.js的图像中提取主色调和调色板。安装 bash npm 安装色相或直接从 CDN: html <script src=" https://unpkg.com/colorthief@3/dist/umd/color-thief.global.js" </script Quick Start js导入{得到ColorSync,得到PaletteSync,获得Swatchers}从"Colethief";//Dominant 彩色聚合=得到ColorSync(img);color.hex ();/#e84393' color.cs (s);//'rgb (232,67,147)"color.isdark;//假色.texcolor;/`000'/Palette Conters 得到PaletteSync (img, {count: 6}) 调色调色调色调色调色调色调色调色调色调色调色调(corEach (c.log (hex.hex)); 活性?.color.hex (); 地物 - TypeScript - 包括了完整类型定义 - 浏览器 + Node.js - 相同的API, 两个平台 - 同步 & async - 同步浏览器 API,用于 ZNode.js -

核心特点

•TypeScript — full type definitions included
•Browser + Node.js — same API, both platforms
•Sync & async — synchronous browser API, async for Node.js
•Live extraction — observe() watches video, canvas, or img elements and emits palette updates reactively
•Worker friendly — runs inside your own Web Worker via ImageBitmap or OffscreenCanvas
•Progressive extraction — 3-pass refinement for instant rough results
•OKLCH quantization — perceptually uniform palettes via colorSpace: 'oklch'
•Semantic swatches — Vibrant, Muted, DarkVibrant, DarkMuted, LightVibrant, LightMuted
•Rich Color objects — .hex(), .rgb(), .hsl(), .oklch(), .css(), contrast ratios, text color recommendations
•WCAG contrast — color.contrast.white, color.contrast.black, color.contrast.foreground