应用黑白不透明度后生成颜色

Question

我甚至不知道如何描述我想要的，但是我会试着说明。假设我有三个文本框，我在第一个文本框中输入一些颜色十六进制代码，我想在其上应用黑色图层，并将不透明度设置为50％，并在第二个文本框中获得结果颜色。同样的事情，但是在第三个文本框中使用白色。

让我解释一下：考虑下面的图片：

在Photoshop中，我有一个基础图层，颜色是天蓝色。我在它上面创建了两个图层，一个是黑色，一个是白色，但两个图层的透明度都是50%。现在，我可以使用取色器（I）来简单地选择所需的两种颜色。

我不得不做这件事无数次，所以我想知道能否通过编程来实现。我知道，理想情况下，我应该先尝试一些东西，然后再提供不起作用的代码...但这已经让我感到困惑，我甚至不知道从哪里开始。我看到最接近的是Kuler，所以我认为至少在flash中是可能的，但我还是不知道从哪里开始。

你们能不能指点我正确的方向？理想情况下，如果能在jQuery中实现，那就更好了，但我找了一圈，没有找到类似的东西。我并不要求一个可行的解决方案，只是需要一个正确的方向。

如果你有任何问题，请问我。

对我而言，技术并不重要，解决方案才是 - 我最擅长C#（至少我认为是这样），但我在PHP、Flash方面是初学者。JQuery方面，我大多数东西都很擅长（好吧，谁不是呢？）- 只要能用就行。

_{PHP和Flash，我只是为了熟悉自己而作为一种业余爱好学习了它们。}

非常感谢。

- iamserious

---

现在用C#看这个应该是可行的。只有一个问题，你上面的图片中有一个错误，黑白叠加的结果是相同的十六进制代码。 - Jamiec

@Jamiec - 哦，我的错误，我会纠正的，感谢你发现了它！- 现在已经修复了。 - iamserious

Answer 1

我可以接近您的结果，但不能完全一致，这可能是 .NET 在创建颜色时使用范围为 1..255 的数字来表示 alpha 值的副作用。

但无论如何，我认为这基本上实现了您想要的功能：

public class ColorUtility
{
    private Color color;

    public ColorUtility(Color original)
    {
        this.color = original;
    }

    public Color GetTransformedColor(Color overlay)
    {
        using(var bitmap = new Bitmap(1,1))
        {
            var g = Graphics.FromImage(bitmap);
            using(Brush baseBrush = new SolidBrush(this.color))
            {
                g.FillRectangle(baseBrush,0,0,1,1);
            }

            using(Brush overlayBrush = new SolidBrush(Color.FromArgb(127,overlay)))
            {
                g.FillRectangle(overlayBrush,0,0,1,1);
            }
            return bitmap.GetPixel(0, 0);
        }
    }
}

用法：

 var startColor = ColorTranslator.FromHtml("#359eff");
 var util = new ColorUtility(startColor);
 var blackOverlay = util.GetTransformedColor(Color.Black); // yields #9aceff
 var whiteOverlay = util.GetTransformedColor(Color.White); // yields #1b4f80

接近你想要的结果，但并不完全相同。

编辑：如果您在实用程序中将alpha值更改为128，您将获得

黑色：#9acfff 白色：#1a4f7f

这可能更接近您想要的结果，但仍然不是完全准确的。

- Jamiec

---

嗨，这非常接近我想要的，所以这样就可以了！谢谢！如果可以的话，我会给你更多的分数，再次感谢！ - iamserious

Answer 2

我知道我晚了，只是想展示另一种做法。

有一个与此相关的jQuery颜色插件, 我从未真正使用过这个插件，但有一个函数看起来像它可以实现你想要的.. xColor 正是你要找的插件。如果你去组合部分，你会发现它说它可以实现你想要的功能。

我刚刚尝试了jsfiddle上的样例，但结果与Jamie的惊人答案一致。这会给出与Jamie代码相同的结果颜色。所以我想你可以使用任何一个。

- LocustHorde

---

这也是一个好答案。我已经使用了jamiec的代码。不过会记住这个，谢谢。 - iamserious

很棒的回答。在jQuery插件上找得很好。我开始认为我们的结果是正确的，而Photoshop的颜色选择器工作方式是有问题的。 - Jamiec

@Jamiec，我不太确定，我原以为Photoshop在它所做的事情上是非常准确的，它应该能够精确地捕捉到一种颜色...但是另一方面，C#和jQuery给出相同的结果，这表明我对颜色有些理解上的问题！ - LocustHorde

@Locust - 也许它仅仅是使用合并颜色的算法稍微不同于c#和那个jQuery插件的方式。无论如何，两者都足够接近。 - Jamiec

Answer 3

那么...用你最擅长的技术写下你刚才说的话有什么问题吗？3个带颜色的框，透明度百分比输入和混合颜色输出。（我可以用Flash编写，但我不确定在这个网站上提供整个程序是否合适。）

如果您不知道如何使用不透明度混合颜色，可以参考此链接：

http://www.pegtop.net/delphi/articles/blendmodes/opacity.htm

- moropus

---

嗨，抱歉，这是什么编程语言？你能给我一些关于在Flash中进行颜色处理的链接吗？谢谢。 - iamserious

这是伪代码。据我所知，在低级别上没有工具可以操作闪存中的颜色 - 只能整个位图来处理。 - moropus

@moropus，嗯，这里有一个简单的颜色渐变教程 - 全部使用动作脚本完成。一定要查看该页面上的基本颜色渐变教程。如果您想要添加两个RGB颜色，则必须分别添加通道r、g和b，以避免通道溢出。请参阅此线程：http://www.actionscript.org/forums/showthread.php3?t=242179 - 尤其是最后一个答案。希望能对您有所帮助。 - LocustHorde

@LocustHorde，谢谢你，但这不是我想要的。我想知道自己编写（或复制粘贴）的功能与插件有何区别？我想要内置支持和内置工具 :) 所以我的观点没有改变 - 在Flash中没有用于操作颜色的工具，必须自己编写。 - moropus

哦，我明白你的意思了...这很公平。如果你能在回答中进行一些编辑，我可以取消负评。我应该仔细考虑过。 - LocustHorde