算法挑战：从图像生成配色方案 [英] Algorithm challenge: Generate color scheme from an image

问题描述

因此，我正在开发一个新的网络应用程序。而且，我们发现我们的用户痴迷于懒惰。真的懒。事实上，我们为他们做的工作越多，他们越喜欢这项服务。现有应用程序的一部分需要用户选择要使用的颜色方案。但是，我们有一个图像（用户的网站的屏幕截图），所以为什么我们不能满足他们的懒惰，为他们做？答：我们可以，这将是一个有趣的编程练习！ ：）

So, I'm working on a fresh iteration of a web app. And, we've found that our users are obsessed with being lazy. Really lazy. In fact, the more work we do for them, the more they love the service. A portion of the existing app requires the user to select a color scheme to use. However, we have an image (a screenshot of the user's website), so why can't we just satiate their laziness and do it for them? Answer: We can, and it will be a fun programming exercise! :)

给定图片，如何创建相应的配色方案？ 换句话说，如何在图片中选择主X颜色（其中X由网络应用程序定义）。我们特定情况下使用的图片是用户网站的屏幕截图，以全分辨率拍摄（例如1280x1024）。 （ 请注意：请简单描述您的算法 - 无需发布实际的伪代码。）

Given an image, how do you create a corresponding color scheme? In other words, how do you select the primary X colors in an image (where X is defined by the web app). The image used in our particular situation is a screenshot of the user's website, taken at full resolution (e.g. 1280x1024). (Note: Please simply describe your algorithm - there's no need to post actual pseudocode.)

奖励积分点）：

• 描述一个简单而有效的算法。


• 允许用户根据各种情绪（例如'Colorful'，'Bright'，'Muted'）调整配色方案， ，Deep等（a la Kuler ）


• 描述一种可靠地确定网站屏幕截图中使用的主要文字颜色的方法（可能需要自己的，单独的算法）。

• Describing an algorithm that is simple yet effective. Code is how we create - keep it simple and beautiful.
• Allowing the user to tweak the color scheme according to various 'moods' such as 'Colorful', 'Bright', 'Muted', 'Deep', etc. (a la Kuler)
• Describing a method for reliably determining the main text color used in the website screenshot (will likely require its own, separate, algo).

有几个现有的网站执行类似的功能。

There are several existing sites that perform a similar function. Feel free to check them out and ask yourself, "How would I duplicate this? How could I improve it?"

• http://www.pictaculous.com/


• http://www.cssdrive.com/imagepalette/index.php


• http://kuler.adobe.com/#create/fromanimage
>

• http://www.pictaculous.com/
• http://www.cssdrive.com/imagepalette/index.php
• http://kuler.adobe.com/#create/fromanimage

推荐答案

1. 。在图像上运行颜色直方图。直方图中的前X个颜色是主题。编辑：如果使用渐变，您将需要选择不同的峰的颜色;也就是说，如果橙色是渐变中使用的主要颜色之一，您可能在橙色周围有一大堆颜色。

1. To find the primary X colors, screencap the app. Run a color histogram on the image. The top X colors in the histogram are the theme. if gradients are used, you'll want to pick distinct "peaks" of colors; that is, you may have a whole bunch of colors right around "orange" if orange is one of the main colors used in the gradients. Effectively, just enforce a certain amount of distance between your colors chosen from the histogram.

调整颜色方案最好在HSV空间中进行;将你的颜色转换为HSV空间，如果用户希望它是更亮，增加值，如果他们想要更多的多彩，增加饱和度等。

Tweaking the color scheme can best be done in HSV space; convert your colors to HSV space, and if the users want it to be "Brighter", increase the Value, if they want it to be more "Colorful", increase the Saturation, etc.

确定文本颜色最好通过表征高可变性（傅立叶空间中的高频率）的区域来完成。在这些区域中，您应该具有：两种颜色，文本和背景，在这种情况下，您的文本是较少使用的颜色;

Determining the text color can best be done by characterizing areas of high variability (high frequency in Fourier space). Within those areas, you should have either: two colors, text and background, in which case your text is the lesser-used color; or you'll have several colors, text and background image colors, in which case the text color is the most common color.

这篇关于算法挑战：从图像生成配色方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！