且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

算法的挑战:从图像生成配色方案

更新时间:2022-10-25 19:38:36

  1. 要找到一次X颜色,screencap应用程序。运行在图像上的颜色直方图。顶的X颜色在直方图的主题。编辑:如果渐变时,你要挑颜色鲜明的峰;也就是说,你可能对周围橙色一大堆的颜色,如果是橙色,在渐变中使用的主要颜色之一。实际上,只是执行一定量的颜色从直方图选择之间的距离。

  2. 调整颜色方案可以在HSV空间***的完成;将您的颜色到HSV空间,如果用户希望它是海阔天空,增加值,如果他们需要更加多彩,增加饱和度,等等。

  3. 确定文本颜色最能表征由高可变性(傅立叶空间高频)的区域进行。在这些领域,你应该有两种:两种颜色,文字和背景,在这种情况下,您的文字是很少使用的颜色;或者你有几种颜色,文字和背景图像色彩,在这种情况下,文本颜色是最常见的颜色。

Background

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! :)

The Challenge

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.)

Bonus points (street cred points, not actual SO points) for:

  • 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).

Inspiration

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?"

  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. Edit: 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.

  2. 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.

  3. 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.