提取网页的颜色调色板

6

我打算用一组新的颜色方案重新设计一个网站。我计划首先从网页中提取颜色并确定其调色板,然后对调色板进行一对一的映射。I) 你是否有更好的建议? 关于这种方法,我有以下问题:

  • II) 如何从网页中提取颜色? 我猜想是通过获取页面的样式表来实现。但是,可能存在未使用的样式或隐藏元素对应的颜色。III) 是否找到可见的 DOM 元素并查看它们的计算颜色会更好呢?
  • IV) 如何确定网页颜色调色板中的主要颜色? 统计颜色的频率或彩色元素的大小可能是一种选择,我想知道什么是稳健的解决方案。
  • 如果样式表没有详尽地指定网页的颜色,则浏览器可能会使用默认值。V) 如何同时考虑默认颜色呢
  • 最后,VI) 覆盖网页颜色的一个好方法是什么?是否可以通过用户样式表来实现?
2个回答

6

I) 你会推荐更好的方法吗? II) 我该如何从网页中提取颜色? 您可以使用Site Palette来实现。这是一款令人惊叹的 Chrome / Safari / FireFox 扩展,它分析网站的颜色,并在几秒钟内以非常有组织的方式呈现它们。

Google Site Palette

III) 找到可见的 DOM 元素并查看其计算颜色是否是更好的方法? 我非常确定该工具仅确定可见元素的颜色。

IV) 如何确定网页颜色调色板中的主要颜色? 这非常主观。有些人在单个网页中混合了彩虹的所有颜色。假设存在主要颜色,很难确定是哪种颜色。

VI) 覆盖网页颜色的好方法是什么?可以通过用户样式表实现吗? 最佳覆盖颜色的方式主要取决于您使用的框架和您所拥有的控制级别。如果您能够识别要覆盖的元素,我不明白为什么不能通过用户样式表实现。


3
嗯,我应该提到我需要编程访问颜色,因为我的目标是自动化。Site Palette似乎没有API。但我必须承认它是一个很棒的工具。这是一个非常有帮助的答案。 - rohit-biswas
我想我错误地使用了“原色”这个术语,我所指的是调色板的“主色”或“基色”。 - rohit-biswas
2
专业版似乎有一个API https://palette.site/pro/ 我自己没有使用过,但你可以查看一下,看它是否符合你的需求。免费版似乎首先显示主导颜色。不过我不确定是否有任何方法可以针对它。 - Sheedo

2
我会下载图片并使用好的图形处理程序(如PhotoShop,Fireworks或Gimp)从中创建调色板。另一个选择(也使用其中一个程序)是使用“吸管工具”对网页上感兴趣的任何颜色进行采样(并给出相关的RGB#以便您可以复制它)。

1
这绝对有效!但我想自动化这个过程,所以我需要在Javascript中确定调色板。 - rohit-biswas

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接