调色板提取器

从任何图像中提取主要调色板。获取十六进制代码,检查 WCAG 可访问性对比度,并立即导出 Tailwind CSS 变量。

由 Shehzad Munir 构建和维护 ·

调色板提取器
Loading Color Architect
  • 图像工具
  • 自由的 · 无需注册
  • 在您的浏览器中运行
  • 6特点
Share

从任何图像中提取调色板

上传任何图像以提取其主色,或单击照片上的任意位置以采样精确的像素。获取每个样本的十六进制、RGB 和 HSL,调整要提取的颜色数量,生成类似/三色/互补和谐,检查 WCAG 对比度(通过一键式自动修复),并将调色板导出为 CSS 变量、SCSS、Tailwind 配置、JSON 或 SVG 样本表。

上传图像,提取器会识别其主色,返回现成的十六进制和 RGB 值。这是从照片构建调色板、匹配品牌颜色或在屏幕截图中找到确切颜色的最快方法,无需使用设计应用程序。

特征

  • 主色提取,计数可调 3-12
  • 点击选取精确像素+原生吸管
  • 一键复制十六进制、RGB 和 HSL 值
  • 类似、三元和互补和声
  • 具有自动修复功能的 WCAG 2.1 AA/AAA 对比度检查器
  • 导出 CSS、SCSS、Tailwind、JSON 或 SVG 样本

如何使用调色板提取器

  1. 1

    上传图片

    拖放或选择任何照片、徽标或屏幕截图。调色板会立即提取,完全在您的浏览器中。

  2. 2

    完善调色板

    滑动计数控件以提取 3-12 种颜色,或打开“从图像中选取”并单击任意点以采样精确的像素。

  3. 3

    检查及调整

    选择一个样本以查看其 HEX/RGB/HSL,微调亮度,并检查白色和黑色的 WCAG 对比度,点击魔杖自动修复失败的颜色。

  4. 4

    出口

    选择 CSS、SCSS、Tailwind、JSON 或 SVG 并复制代码,或下载设计文档的 SVG 样本表。

常见用例

  • 从徽标或情绪板图像构建品牌调色板
  • 获取屏幕截图或照片中颜色的精确十六进制
  • 生成易于访问、符合 WCAG 标准的 UI 配色方案
  • 将 Tailwind 或 CSS 变量直接导出到项目中
  • 从照片中创建和谐的渐变和强调色

详细指南

适用于设计师、开发人员和品牌工作

将灵感转化为可用的值,采样日落的渐变效果,提升竞争对手的强调色,或从英雄图像中生成有凝聚力的主题。处理发生在您的浏览器中,因此您的图像永远不会上传到服务器。

常见问题

如何从图像中获取十六进制颜色代码?

上传您的图像,该工具会自动对其进行分析,以使用 K 均值聚类提取主色。每种颜色都显示其 HEX、RGB 和 HSL 值,单击任何颜色即可复制它。

我可以从徽标中提取品牌颜色吗?

是的。上传任何徽标图像,该工具会识别主要和次要品牌颜色,为您提供在 CSS、Tailwind 或 Figma 等设计工具中使用的精确十六进制代码。

什么是 WCAG 对比检查?

WCAG(网页内容可访问性指南)定义文本和背景颜色之间的对比度。普通文本(AA 标准)的比例至少需要 4.5:1,以便有视力障碍的用户能够阅读。

提取器可以识别多少种颜色?

您可以控制它,滑块可以让您提取 3 到 12 种主色,并根据它们在图像中所携带的视觉空间和活力进行排名。您还可以直接单击照片来采样任何精确的像素颜色。

我可以导出调色板以在 CSS 或 Tailwind 中使用吗?

是的。该工具生成现成的 CSS 自定义属性变量 (--color-primary: #hex) 和 Tailwind 配置片段,您可以直接粘贴到项目中。

如何从图像中提取调色板?

上传一张照片,该工具就会提取出其主色,将每个颜色显示为带有十六进制、RGB 和 HSL 值的样本,您可以为您的设计复制这些值。

如何获取图片中颜色的十六进制代码?

提取的调色板列出了每种主色的十六进制(和 RGB/HSL)代码,因此您可以将准确的值复制到 CSS 或设计工具中。

我可以从徽标中提取品牌颜色吗?

是的。上传徽标并识别关键颜色,以便您可以重建品牌调色板。提取在您的浏览器中运行,保持图像的私密性。

我可以从徽标中获取准确的十六进制代码吗?

是的:提取器将主色返回为十六进制值,您可以将其直接复制到设计工具中。

来自杂志

All articles →