取色工具合集
3.github可能无法访问，不是链接问题。人机协作，AI模型：Deepseek。1.主页面找release进入下载。2.代码保存为html。
·
人机协作，AI模型：Deepseek
仅供参考
使用方法：
1.主页面找releases进入下载
2.代码保存为html
3.github可能无法访问，不是链接问题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>批量取色工具集 | 图片 & 视频颜色提取开源项目</title>
<!-- Google Font & Simple CSS Reset -->
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background: #f8fafc;
color: #0f172a;
line-height: 1.5;
padding: 2rem 1.5rem;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
/* header */
.header {
text-align: center;
margin-bottom: 3rem;
}
.header h1 {
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(135deg, #1e293b, #3b82f6);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
letter-spacing: -0.02em;
}
.header p {
font-size: 1.1rem;
color: #334155;
margin-top: 0.75rem;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.badge {
display: inline-block;
background: #e2e8f0;
border-radius: 40px;
padding: 0.2rem 0.8rem;
font-size: 0.75rem;
font-weight: 500;
color: #1e293b;
margin-top: 1rem;
}
/* 分类区块 */
.section {
margin-bottom: 3rem;
}
.section-title {
font-size: 1.8rem;
font-weight: 600;
letter-spacing: -0.01em;
border-left: 5px solid #3b82f6;
padding-left: 1rem;
margin-bottom: 1.5rem;
color: #0f172a;
}
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.75rem;
}
/* 卡片样式 */
.card {
background: #ffffff;
border-radius: 1.25rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.05);
transition: all 0.25s ease;
border: 1px solid #e9eef3;
display: flex;
flex-direction: column;
overflow: hidden;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
border-color: #cbd5e1;
}
.card-content {
padding: 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
}
.card-title {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.card-title a {
color: #0f172a;
text-decoration: none;
border-bottom: 1px dotted #94a3b8;
transition: color 0.2s;
}
.card-title a:hover {
color: #3b82f6;
border-bottom-color: #3b82f6;
}
.lang-tag {
font-size: 0.7rem;
background: #eef2ff;
padding: 0.2rem 0.6rem;
border-radius: 20px;
color: #2563eb;
font-weight: 500;
}
.description {
color: #334155;
font-size: 0.9rem;
margin: 0.75rem 0 1rem 0;
line-height: 1.5;
flex: 1;
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.5rem;
border-top: 1px solid #eef2ff;
padding-top: 1rem;
}
.repo-link {
background-color: #f1f5f9;
padding: 0.4rem 1rem;
border-radius: 40px;
font-size: 0.8rem;
font-weight: 500;
text-decoration: none;
color: #1e293b;
transition: background 0.2s;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.repo-link:hover {
background-color: #e2e8f0;
color: #0f172a;
}
.platform-icon {
font-size: 0.85rem;
opacity: 0.7;
}
hr {
margin: 1rem 0;
border: none;
border-top: 1px solid #e2e8f0;
}
footer {
text-align: center;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid #e2e8f0;
color: #475569;
font-size: 0.85rem;
}
@media (max-width: 640px) {
body {
padding: 1rem;
}
.cards-grid {
grid-template-columns: 1fr;
}
.section-title {
font-size: 1.5rem;
}
.header h1 {
font-size: 1.8rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🎨 批量取色工具箱</h1>
<p>从图片 & 视频中智能提取主色调 · 开源项目精选</p>
<div class="badge">✨ 支持批量处理 · 多语言实现 · 即拿即用</div>
</div>
<!-- 1. 批量图片颜色提取 -->
<div class="section">
<h2 class="section-title">🖼️ 批量图片颜色提取</h2>
<div class="cards-grid">
<!-- color-thief -->
<div class="card">
<div class="card-content">
<div class="card-title">
<a href="https://github.com/lokesh/color-thief" target="_blank" rel="noopener">color-thief</a>
<span class="lang-tag">JavaScript</span>
</div>
<div class="description">
经典强大的「调色板小偷」，从图片中提取主色调 / 调色盘，并支持实时视频取色。轻量级且生态丰富。
</div>
<div class="card-footer">
<a href="https://github.com/lokesh/color-thief" class="repo-link" target="_blank">🔗 GitHub</a>
<span class="platform-icon">⭐ 13.6k+</span>
</div>
</div>
</div>
<!-- extract-colors -->
<div class="card">
<div class="card-content">
<div class="card-title">
<a href="https://github.com/Namide/extract-colors" target="_blank" rel="noopener">extract-colors</a>
<span class="lang-tag">TypeScript</span>
</div>
<div class="description">
现代化的 TypeScript 库，高效提取图片中最常见的颜色，适用于浏览器和 Node.js，支持批量处理。
</div>
<div class="card-footer">
<a href="https://github.com/Namide/extract-colors" class="repo-link" target="_blank">🔗 GitHub</a>
<span class="platform-icon">📦 285+ Stars</span>
</div>
</div>
</div>
<!-- Olivattam -->
<div class="card">
<div class="card-content">
<div class="card-title">
<a href="https://github.com/Dheenack/olivattam" target="_blank" rel="noopener">Olivattam</a>
<span class="lang-tag">Python</span>
</div>
<div class="description">
轻量级 Python 模块，基于 Pillow 构建，快速提取主色并转换为 RGB/HEX 等多种格式，易于集成进批量脚本。
</div>
<div class="card-footer">
<a href="https://github.com/Dheenack/olivattam" class="repo-link" target="_blank">🔗 GitHub</a>
</div>
</div>
</div>
<!-- color-extraction (多算法) -->
<div class="card">
<div class="card-content">
<div class="card-title">
<a href="https://github.com/xiong35/color-extraction" target="_blank" rel="noopener">color-extraction</a>
<span class="lang-tag">TypeScript</span>
</div>
<div class="description">
实现了 K-means 聚类、中位切分、八叉树三种主流主色调提取算法，方便对比与选择。
</div>
<div class="card-footer">
<a href="https://github.com/xiong35/color-extraction" class="repo-link" target="_blank">🔗 GitHub</a>
</div>
</div>
</div>
</div>
</div>
<!-- 2. 批量视频颜色分析 -->
<div class="section">
<h2 class="section-title">🎬 批量视频颜色分析</h2>
<div class="cards-grid">
<!-- fast-average-color -->
<div class="card">
<div class="card-content">
<div class="card-title">
<a href="https://github.com/fast-average-color/fast-average-color" target="_blank" rel="noopener">fast-average-color</a>
<span class="lang-tag">JavaScript</span>
</div>
<div class="description">
超轻量级库，快速计算图片或视频的平均色 / 主色，性能优先，适合实时或大批量分析。
</div>
<div class="card-footer">
<a href="https://github.com/fast-average-color/fast-average-color" class="repo-link" target="_blank">🔗 GitHub</a>
</div>
</div>
</div>
<!-- VideoIntel -->
<div class="card">
<div class="card-content">
<div class="card-title">
<a href="https://github.com/TimMikeladze/video-intel" target="_blank" rel="noopener">VideoIntel</a>
<span class="lang-tag">TypeScript</span>
</div>
<div class="description">
浏览器端智能视频分析库，3行代码即可提取主色、缩略图、场景检测，支持批量视频流。
</div>
<div class="card-footer">
<a href="https://github.com/TimMikeladze/video-intel" class="repo-link" target="_blank">🔗 GitHub</a>
</div>
</div>
</div>
<!-- movie-tint -->
<div class="card">
<div class="card-content">
<div class="card-title">
<a href="https://github.com/w-m/movie-tint" target="_blank" rel="noopener">movie-tint</a>
<span class="lang-tag">Python</span>
</div>
<div class="description">
精巧脚本，通过 K-means 聚类将整部电影的色彩演变渲染成一幅长条图，适合色彩叙事分析。
</div>
<div class="card-footer">
<a href="https://github.com/w-m/movie-tint" class="repo-link" target="_blank">🔗 GitHub</a>
</div>
</div>
</div>
<!-- video-color-palette-generator -->
<div class="card">
<div class="card-content">
<div class="card-title">
<a href="https://github.com/kennykarnama/video-color-palette-generator" target="_blank" rel="noopener">video-color-palette-generator</a>
<span class="lang-tag">Go</span>
</div>
<div class="description">
基于 K-means 对视频帧聚类生成调色板，并输出详细 CSV 报告，适合批量视频处理和数据导出。
</div>
<div class="card-footer">
<a href="https://github.com/kennykarnama/video-color-palette-generator" class="repo-link" target="_blank">🔗 GitHub</a>
</div>
</div>
</div>
</div>
</div>
<!-- 3. 全媒体与 AI 工具 -->
<div class="section">
<h2 class="section-title">🧠 全媒体 & AI 增强</h2>
<div class="cards-grid">
<!-- image-go-nord (PyPI) -->
<div class="card">
<div class="card-content">
<div class="card-title">
<a href="https://pypi.org/project/image-go-nord/" target="_blank" rel="noopener">image-go-nord</a>
<span class="lang-tag">Python</span>
</div>
<div class="description">
可将任何 RGB 图片或视频转换为指定主题调色板（Nord、Gruvbox 等），创意色彩迁移工具。
</div>
<div class="card-footer">
<a href="https://pypi.org/project/image-go-nord/" class="repo-link" target="_blank">📦 PyPI</a>
</div>
</div>
</div>
<!-- ImageDominantColor -->
<div class="card">
<div class="card-content">
<div class="card-title">
<a href="https://github.com/akamhy/imagedominantcolor" target="_blank" rel="noopener">ImageDominantColor</a>
<span class="lang-tag">Python</span>
</div>
<div class="description">
采用与众不同的方法：量化后计算像素值的众数找出主色，简洁直观，适合快速实现。
</div>
<div class="card-footer">
<a href="https://github.com/akamhy/imagedominantcolor" class="repo-link" target="_blank">🔗 GitHub</a>
</div>
</div>
</div>
<!-- Wazzabeee / image-video-colorization -->
<div class="card">
<div class="card-content">
<div class="card-title">
<a href="https://github.com/Wazzabeee/image-video-colorization" target="_blank" rel="noopener">image-video-colorization</a>
<span class="lang-tag">Python/CNN</span>
</div>
<div class="description">
基于 CNN 的黑白图像 / 视频智能上色，通过 Hugging Face 可试用，适用于老照片 / 影片修复。
</div>
<div class="card-footer">
<a href="https://github.com/Wazzabeee/image-video-colorization" class="repo-link" target="_blank">🔗 GitHub</a>
</div>
</div>
</div>
</div>
</div>
<!-- 4. 拓展生态: 终端 / 系统主题 / 网页取色 -->
<div class="section">
<h2 class="section-title">⚙️ 拓展工具 & 应用</h2>
<div class="cards-grid">
<!-- Rong 命令行主题工具 -->
<div class="card">
<div class="card-content">
<div class="card-title">
<a href="https://github.com/ewen-lbh/rong" target="_blank" rel="noopener">Rong</a>
<span class="lang-tag">Rust</span>
</div>
<div class="description">
命令行工具，从图像或视频中提取配色，并应用到系统主题，实现类似 Material You 的全局效果。
</div>
<div class="card-footer">
<a href="https://github.com/ewen-lbh/rong" class="repo-link" target="_blank">🔗 GitHub</a>
</div>
</div>
</div>
<!-- website-color-extractor (npm) -->
<div class="card">
<div class="card-content">
<div class="card-title">
<a href="https://www.npmjs.com/package/website-color-extractor" target="_blank" rel="noopener">website-color-extractor</a>
<span class="lang-tag">Node.js</span>
</div>
<div class="description">
对网站截图后自动提取所有颜色或高频颜色，可用于网站风格分析或品牌色采集。
</div>
<div class="card-footer">
<a href="https://www.npmjs.com/package/website-color-extractor" class="repo-link" target="_blank">📦 npm</a>
</div>
</div>
</div>
<!-- 额外补充: 之前提及过 okmain (PyPI) 为了完整展示一个好用的 python 颜色聚类工具 -->
<div class="card">
<div class="card-content">
<div class="card-title">
<a href="https://pypi.org/project/okmain/" target="_blank" rel="noopener">okmain</a>
<span class="lang-tag">Python</span>
</div>
<div class="description">
显式地对颜色进行聚类，恢复并排列主色，保持结果干净纯净，适合批量提取清晰的调色板。
</div>
<div class="card-footer">
<a href="https://pypi.org/project/okmain/" class="repo-link" target="_blank">📦 PyPI</a>
</div>
</div>
</div>
<!-- 添加 video_colors.py 补充 (来自VANA仓库) 由于用户提到过这个脚本，更全面 -->
<div class="card">
<div class="card-content">
<div class="card-title">
<a href="https://github.com/dianigionath/VANA/tree/master/VANA-python/video_colors" target="_blank" rel="noopener">video_colors.py</a>
<span class="lang-tag">Python</span>
</div>
<div class="description">
小巧脚本，从视频帧集合中分析主色并生成 SVG 色板，适合视频关键帧批量处理。
</div>
<div class="card-footer">
<a href="https://github.com/dianigionath/VANA/tree/master/VANA-python/video_colors" class="repo-link" target="_blank">🔗 GitHub (目录)</a>
</div>
</div>
</div>
</div>
</div>
<!-- 额外说明 -->
<div style="background: #eef2ff; border-radius: 1rem; padding: 1rem 1.5rem; margin-top: 2rem;">
<p style="font-size: 0.9rem; color: #1e40af;">💡 <strong>提示</strong>：以上项目均支持批量 / 自动化颜色提取。Python 库可结合 glob 或 os.walk 轻松处理成百上千张图片；JS/TS 库可用在 Node 或浏览器环境批量分析。部分视频工具需要 FFmpeg 支持。</p>
</div>
<footer>
🧰 开源项目汇总 · 批量图片/视频取色工具 · 数据基于 GitHub & PyPI 官方仓库<br>
点击卡片链接直达项目主页，欢迎 ⭐ 支持原作者。
</footer>
</div>
</body>
</html>
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)