HSV和透明PNG的外观和调色板

我使用的是Chandler Server（又名Cosmo）的Ajaxy Web UI，这是一个与Chandler个人信息管理器（PIM）一起使用的开源服务器。 您可以通过在我们的免费在线服务Chandler Hub上创建一个帐户来查看Web UI。

当我们开始在Web UI中实现越来越多的日历功能时，我最终需要一套调色板来用于每个用户的日历，以便他们能够一眼分辨开。 （下一步是让用户选择日历的颜色，例如Chandler Desktop可以的颜色。）

用户的每个日历都需要为事件使用类似颜色的调色板，并带有漂亮的渐变，以使事件块在UI中弹出一些。 由于这是一个非常繁琐的JavaScript的Web UI，因此我需要以尽可能最轻便的方式进行操作。 由于需要大量下载，每种颜色的一堆不同图像并不理想。

我最终一起使用了两个技巧，这些技巧给了我各种各样的颜色和阴影，并且只使用了两个图像。

用于颜色渐变的透明PNG

我的好友杰里米·爱泼斯坦（Jeremy Epstein）向我建议的第一个技巧是在彩色背景上使用具有透明度的PNG文件创建颜色渐变。 （IE6中存在透明PNG的问题，但是众所周知的alpha透明性使事情工作得比较好。）

这是在白色背景上图像的外观：

如您所见，它看起来并不多，但是当您在其后添加漂亮的饱和色时，PNG中的透明性使其看起来像实际的颜色渐变。 这是与Chandler Server中的日历事件的拼贴渐变背景相同的图形：

现在，使用此技术，您所要做的就是更改其所在盒子的CSS background-color属性，并且只用一张图形就可以拥有基本上无限的不同颜色渐变。 很漂亮

HSV用于创建调色板

由于日历中的事件框不仅具有单一的颜色底纹，所以我还需要一种方法来生成一组相关的颜色，这些颜色均基于该日历的相同基色。

第二个技巧使此操作非常容易-我使用了HSV颜色 ，并通过更改饱和度和值来创建相关的颜色。 因此，对于我的蓝色，基色为210，则可以得到浅蓝色（饱和度：10，值：100），深蓝色（饱和度：100，值80），依此类推。 将基本色调更改为120可使我获得一组类似的绿色阴影，而将其设为0则为红色。

当然，CSS当前不支持颜色的HSV值-您必须以十六进制或RGB指定值。 但是颜色转换是许多JavaScript库的功能，因此将您的HSV颜色转换为浏览器可以呈现的内容非常容易。

钱德勒服务器使用Dojo工具包中的hsv2rgb函数。 （我们正在使用Dojo 0.4-似乎颜色转换代码在0.9中还没有找到家。）我维护的Fleegix.js JavaScript Toolkit 插件中还提供了 HSV到RGB转换器。

要将一组HSV值转换为RBG以在CSS中使用，您可以执行以下操作：

var rgbArray = fleegix.color.convert.hsv2rgb(210, 20, 20);
var rgbString = rgbArray.join(',');
someDiv.style.backgroundColor = 'rgb(' + rgbString + ')';

要调整蓝色阴影，请更改传递给hsv2rgb的第二个和第三个值。 要更改基本颜色，请更改第一个参数。 或者，拉起GIMP或Photoshop，并尝试使用不同的HSV颜色，直到找到使自己满意的颜色为止。

进一步的可能性

这两种技术共同开辟了各种可能性，包括以最小的努力为应用换肤的能力。 设置HSV阴影后，您要做的就是更改基本色相以获得完全不同的颜色集。 您甚至可以使用简单的滑块小部件让用户选择其颜色。

这使您可以创建几乎无限数量的相关颜色的调色板，以及一些非常漂亮的渐变效果-以最小的下载成本。 您的用户会发现一些不错的东西-不必整天坐在服务器上等待它下来，这在使用JavaScript的Web应用程序中非常重要。

如果您对JavaScript或Ajax UI开发感兴趣，请务必在chandlerproject.org上查看Chandler Server（Cosmo），或在Freenode上的#cosmo中在IRC中大喊大叫。

From: https://www.sitepoint.com/skinning-and-color-palettes-with-hsv/