动态改变图像颜色

我正在开发一个应用程序，它将多个视图显示为表格（例如客户、产品等）。每行的最后一列包含按钮，用户可以使用这些按钮对特定行执行某些操作。简化示例：

<td class="actions">
  <a href="projects/some-project/edit">
    <img src="images/edit-project.png" alt="Edit project" />
  </a>
  <a href="projects/some-project/do-something">
    <img src="images/someaction.png" alt="Do something else with the project" />
  </a>
</td>

图像是透明的 png。每个表的按钮数量可能有所不同，现在总共大约有 30 个。

我被要求对应用程序 css 样式进行更改，因此不同的表格现在可以有不同的颜色，例如客户表格现在有一些绿色色调，项目表格是蓝色等等。此外，“奇数”表行的颜色与“偶数”表行的颜色略有不同。如果选择了行，它们也会改变颜色。

问题在于设计规定按钮必须随行一起改变颜色。这需要制作大量的按钮-颜色组合，并且将来还会添加更多按钮。

我认为比分配设计师制作数百个不同颜色的按钮版本更好的方法是根据表类动态制作它。我的问题是 - 最有效的方法是什么？该应用程序使用 php 作为服务器端语言，并在客户端使用 javascript 和 jQuery。图像的问题是它们不是单色的，而是使用多种颜色，所以我必须根据 css 类来操作它们的 HSL。

如果使用 php 是更好的方法，我可能会使用图像魔术师。问题是获取与所提供的颜色非常接近的图像的最佳方法是什么。

我将使用 jQuery 来实现这一点，并设置 png 后面的颜色或与表的 css 类相关的 png 的颜色。

不要使用太多像 Imagemagick 这样的 php，因为它会显着减慢页面的渲染速度。

看一眼Pixastic（颜色调整）
https://github.com/jseidelin/pixastic http://www.pixastic.com/lib/docs/actions/coloradjust/

or 画笔JS（色调）
https://github.com/mezzoblue/PaintbrushJS
http://mezzoblue.github.com/PaintbrushJS/demo/

or CamanJS（着色）
http://camanjs.com/
http://camanjs.com/guides/#BuiltIn
https://github.com/meltingice/CamanJS/

or 复古JS
http://rendro.github.io/vintageJS/
https://github.com/rendro/vintageJS