温州做微网站设计,公众号怎么推广和引流,wordpress 搜索摘要,织梦网站建设教程作者 #xff5c; Peter Huber译者 #xff5c; 王强策划 #xff5c; 丁晓昀我不知道你们是什么情况#xff0c;但我自己在过去多年中都因为.NET 色彩#xff08;Colors#xff09;类中可用的色彩数量有限而头痛不已#xff0c;为此我试图用 ColorPickers 获得匹配的色… 作者 Peter Huber译者 王强策划 丁晓昀我不知道你们是什么情况但我自己在过去多年中都因为.NET 色彩Colors类中可用的色彩数量有限而头痛不已为此我试图用 ColorPickers 获得匹配的色彩并努力去理解各种色彩模型。为了让我的生活轻松一些我写了几个小方法可以把任何色彩改成黑白的还有一个方法可以混合色彩。有了这些方法后我得到了匹配度很高的色彩有点像 GradientBrush 中的渐变效果。然后我给自己找了个麻烦就是写这篇文章来帮助其他人使用我的方法。为了解释这些方法的原理我别无选择只能详细调查背后到底发生了什么。所以这篇文章主要是关于色彩、色彩模型、色调、亮度之类的东西但解释它们时用的是让软件开发者不需要数学或物理专业背景就能理解的简单术语。如果你已经对色彩有了扎实的了解你可以直接跳到“精确生成你自己的色彩”这一章那里有实际的代码。色彩空间 HSB色调、饱和度和亮度我们可能都知道电脑屏幕上的色彩是由像素生成的每个像素由 3 个点组成分别发出红、绿、蓝三色光所以它们被叫做 R、G、B 像素点。然而这里已经有了第一个误解因为在实际情况下 G 不是 Colors.Green而是 Colors.Lime黄绿。人眼对色彩有三种不同的感受器所以人们选择了 R、G 和 B 的色彩色调来与这些感受器很好地匹配起来这里匹配的是黄绿而不是“正常”的绿色。有了 RGB 像素显示器可以生成人眼可以感受到的大多数色彩——当然只是大多数。与太阳等光源相比这些色彩的“强度”亮度相当有限。每种色彩都是由 3 个点各自发出的光的多少来定义的。一个点的数值可以介于 0不发光和 255或十六进制的 0xFF之间255 意味着全强度发光。为了看到其中一种原色例如红色R 要被设置为 255G 和 B 被设置为 0这样就可以得到最亮的红色。如果我们想要一个暗一些的红色只需降低 R 的值即可。一旦 R 为 0得到的色彩就是黑色的因为没有任何点发射出任何光线。这是一个改变色彩亮度的例子而亮度是每一种色彩都有的三个属性之一。有趣的是亮度的定义不是从 0 到 255而是从 0 到 1 或 0 到 100%。色彩的另一个属性被称为色调。色调为黄色、橙色、红色等色彩分配了不同的数字。当 3 个点中的一个是 255一个是 0而“中间”第三个为任何数值时我们可以生成最纯粹的色调。例如R 225, G 255, B 0 结合了红色和绿色其结果是奇怪的是其结果是黄色原因是当两盏灯照在同一个地方时这个地方会变亮而不是变暗。如果我们把 R、G 和 B 混合在一起都以最大亮度发光我们就会得到白色的光。这与绘画的色彩正好相反。如果我们把许多绘画的色彩混合在一起就会得到一些深灰色的东西很难看。R:FF G:FF B:00 黄色R:00 G:FF B:FF 青色R:FF G:00 B:FF 品红顺便说一下这些是显示器可以生成的最亮的色彩因为它们使用了 2 个全亮的点而红、绿、蓝色只使用了 1 个点。对于其他所有色调亮度第二强的点发出的亮度低于 255。正是这个既不是 255 也不是 0 的“中间”点定义了色调。将这个中间点的亮度从 0 缓慢递增到 255我们可以得到比如说在红色FF0000和黄色FFF00之间的所有色调。总共有 6 种这样的转换255 红色和一些绿色红到黄255 红色和一些蓝色红到紫255 绿色和一些红色绿到黄255 绿色和一些蓝色绿到蓝绿255 蓝色和一些绿色蓝到蓝绿255 蓝色和一些红色蓝到紫当我们逐渐改变 R、G 或 B 时会得到类似彩虹的东西。左边和右边边界的色彩是红色。由于这个原因彩虹常常被画成一个圆形。色调是以度数来定义的红色为 0 和 360 度。第三个色彩属性被称为饱和度。到目前为止我们只处理了完全饱和的色彩即最暗的点亮度是 0。如果我们想让一个完全饱和的色彩更亮使其最终接近白色我们需要降低饱和度按比例增加所有三个点的亮度使其接近 255。要把饱和度从 100% 降低到 50%我们必须把现在的值与 255 之间的差值减半。举例现值R 255, G 128, B 0将饱和度从 1 降低到 0.5新的 R 值 255 0.5 * (255-255) 255新的 G 值 128 0.5 * (255-128) 192或 191取决于四舍五入的情况新的 B 值 0 0.5 * (255-0) 128或 127取决于四舍五入的情况将饱和度从 1 降低到 0 白色。新的 R 值 255 1 * (255-255) 255新的 G 值 128 1 * (255-128) 255新的 B 值 0 1 * (255-0) 255红色从 100% 的饱和度降到 0%现在我们可以再画一次彩虹加入一些饱和度和亮度的变化。X 轴增加了从 0 到 360 的色调。在中间的是以 100% 的饱和度和 100% 的亮度显示的每个色调。在上半部分亮度保持在 100%饱和度降低到 0%这就形成了白色。在下半部分饱和度保持 100%亮度减少到 0%这就形成了黑色。注意黄色、青色和品红在变成白色或黑色之前比其他色调能保持更长时间。它们是最强的色彩因为有 2 个点在全亮度闪耀。一个接近 0% 饱和度和 100% 亮度的色调看起来是白色的。白色的值是 FFFFF色调和饱和度是未定义的。一个饱和度为 100%、亮度接近 0% 的色调看起来是黑色的。黑色的值是 0000色调和饱和度都没有定义。一个所有 3 个点都以相同强度发光的色彩看起来是灰色的。一个可能的值是 808080。注意对于灰色即 R、G 和 B 有相同的值色调和饱和度都没有定义只有亮度有意义的值。我们也可以说黑色、灰色和白色都不是色彩。黑色 0000 的亮度为 0白色 FFFFF 的亮度为 1。仅靠亮度来控制白色、灰色和黑色的外观有一个奇怪的后果我们可以在下一张图中看到。我们现在已经涵盖了显示器可以显示的所有色彩了吗实际上我们只展示了所有可能的 R、G 和 B 组合中的不到 1%也就是说只有那些一个点是 255100% 亮度或一个点是 0100% 饱和度的组合。比方说我们首先将 FF8000一种橙红色的饱和度改为 50%得到 FFC080。当我们再把亮度改为 50% 时得到 806040。现在的色调仍然是橙红色但色彩更接近于深灰色。下面是一张包含所有可能的饱和度和亮度组合的红色图片。我想这是本文中最令人困惑的图片。基本上我想把 Y 轴从上到下上的色彩从红色变成黑色意味着亮度从 1 到 0而 X 轴从左到右上的色彩从红色变成白色意味着饱和度从 1 到 0我本来以为白色和黑色也会混合右下角会变成灰色但情况并非如此。只要 R、G、B 有相同的值色调和饱和度就失去了意义。只有亮度对白色、灰色和黑色右边界的色彩有影响。更糟糕的是整个下边界只有黑色因为一旦亮度为 0色调和饱和度又变得毫无意义了。如果你也感到困惑我们就是一伙儿的了。但这就是 HSB 色彩方案的工作方式。当你只操作 RGB 值时很难说出结果会是什么样子还记得 R 和 G 混合的结果是黄色吗。在 HSB 色彩空间中操作色彩时只要你只改变饱和度和亮度黄色就一直是黄色直到亮度变成 1白色或 0黑色这时色调和饱和度就会消失。HSL 色彩空间还有一个色彩空间叫做 HSL——色调Hue、饱和度Saturation和亮度Luminosity。它的色调与 HSB 相同但饱和度不朝向白色而是朝向灰色光亮度则从 0 黑色0.5 灰色到 1 白色。HSL 在从黑白电视到彩色电视的过渡过程中非常有用。黑白电视只显示 L 值而彩色电视则使用 HSL。取色器在过去我总是很难理解取色器是如何工作的不知道为什么它们有时会失败。现在了解了色调、饱和度和亮度以及它们与 RGB 色彩的关系后取色器也就更容易理解了。PowerPoint 2010 取色器PowerPoint 使用 HSL 色彩空间。在色彩选择区它们水平显示所有的色调垂直显示饱和度。在 HSL 色彩空间中饱和度为 0 是灰色的因此完整的下边界是灰色的。右边是一个滚动条可以改变亮度0 表示黑色128 表示灰色255 表示白色它不使用 0-100%而是 0-255。在 0 和 255 时色调和饱和度失去了意义。最纯粹的色彩是在亮度 128。例如在 HSL 中选择一个蓝色然后将亮度降低到 0并切换到 RGB 显示正确显示为 0,0,0。把 R 增加一点然后再设置为 0再切换回 HSV现在显示的是色调和饱和度为 0当然这应该是未定义的。色调为 0 意味着红色但黑色没有色调。色彩区域的指针仍然显示最初选择的蓝色而不是色调为 0 的红色。这不仅让我感到困惑而且当我不断地鼓捣黑色、灰色和白色并在 RGB 和 HSL 视图之间切换时我的 PowerPoint 终于崩溃了。Paint.net 4.2 取色器事实证明paint.net 的取色器用起来更容易。他们使用的是 HSV 色彩模型这与 HSB 色彩模型相同他们只是把亮度这个词改为体积volume。我很欣赏的一点是他们在同一个窗口中显示 RGB 值和 HSV 值这使我更容易理解改变一个 HSV 值是如何影响 RGB 值的。它在色彩圈的边界上显示所有可用的色调中间是白色意味着 0% 的饱和度。要使色彩变深必须改变体积亮度参数的滑块。当然它的黑色、灰色和白色的色调也为零但至少在我鼓捣这些数值时它没有崩溃。WinUI 取色器可悲的事实是WPF 没有取色器。这很像微软多年前放弃了 WPF试图强迫我们改为写 UWP 应用程序的情况。许多开发者会说“不谢谢你”并留在了 WPF。所以现在微软正在引入 XAML允许 WPF 项目使用“较新”的控件取色器就是一个例子——可这些控件从一开始就应该包含在 WPF 中才对。我还没有在项目中用过 WinUI 取色器但我在 XAML 控件库中运行它是这样的它的工作原理有点像 PowerPoint 中的取色器但使用 HSVHSB代替这意味着色彩区域的下部是白色的而不是灰色的。下方的滚动条改变 V 值亮度。当设置为黑色时色调和饱和度保持其最新值即使后来在色彩区域选择了不同的色彩也一样。当值亮度增加时色彩区的圆圈就会跳回原来的色调。这样很奇怪但至少没有崩溃。Web 取色器下面是一个基于互联网的取色器的例子在 HTML 5 的 input 标签中定义input typecolorHTML 只定义了 input 标签的功能取色器的实际外观取决于浏览器。下面是 Chrome 浏览器的截图。它使用一个彩虹滚动条来选择色调。上面的矩形在所有可能的饱和度和亮度组合中显示该色调。关于如何计算数值的详细解释请看前面关于 HSB 的解释它的情况几乎是一样的只是白角和红角换了位置。得到的值可以显示为 RGB整数或十六进制和 HSL。.NET 的色彩类色彩Colors类提供了一些标准色彩。它们是由委员会将一些不同的色彩方案混合起来选择出来的有时结果很奇怪。例如Colors.Gray 比 Colors.DarkGray 要深一些。很奇怪对吗或者 2 个不同的名字代表的其实是同一种色彩比如 Aqua00FFFF和 Cyan00FFFF或者 FuchsiaFF00FF和 MagentaFF00FF。不幸的是Colors 帮助页面是按字母顺序显示色彩的如果你知道名字就很容易找到它们但要分辨出哪些色彩彼此相近或相配却非常困难。所以我花了一些时间按色调垂直排序然后按亮度和饱和度水平排序。这里的结果列出了与 Colors 帮助页面中完全相同的色彩精确生成定制色彩让色彩变亮或变暗降低饱和度和 / 或亮度当我设计一个新的应用程序并决定要使用的色彩方案时我通常不能使用色彩类提供的调色板。通常情况下我需要带有阴影的相同色调不同的饱和度和亮度。要做到这一点只需几行代码就能搞定了。下面是降低任何色彩的饱和度使之更亮或降低亮度使之更暗的方法。/// summary
/// Makes the color lighter if factor0 and darker if factor0. 1 returns white, -1 returns
/// black.
/// /summary
public static Color GetBrighterOrDarker(this Color color, double factor) {if (factor-1) throw new Exception($Factor {factor} must be greater equal -1.);if (factor1) throw new Exception($Factor {factor} must be smaller equal 1.);if (factor0) return color;if (factor0) {//make color darker, changer brightnessfactor 1;return Color.FromArgb(color.A, (byte)(color.R*factor), (byte)(color.G*factor), (byte)(color.B*factor));} else {//make color lighter, change saturationreturn Color.FromArgb(color.A,(byte)(color.R (255-color.R)*factor),(byte)(color.G (255-color.G)*factor),(byte)(color.B (255-color.B)*factor));}
}令人惊讶的是只用几行代码就可以改变饱和度和亮度。有点困难的是如何正确计算饱和度而这个方法就很方便。红、绿、蓝系数为 -1 到 1为了得到更亮的色彩不要使用绿色因为绿色不是 100% 的饱和度——而要使用黄色、品红和青色。请注意先应用 0.5 的系数然后再应用 -0.5 的系数是不会得到原来色彩的。第一次调用改变的是饱和度第二次调用改变的是亮度。我喜欢使用这种方法的原因是我可以用小幅度而可控的步骤增加、减少变化并在 GUI 中看到结果。我可以很容易地创建阴影和高光它们应该有相同的色调但饱和度和亮度则不同。混合色调通常情况下一个用户界面不应该使用太多的色调有几个色调并从中混合一些色调可能就够了。下面两种方法可以达到这个目的第一种是将两种色彩一半一半地混合第二种是让一种色彩多于另一种色彩。/// summary
/// Mixes 2 colors equally
/// /summary
public static Color Mix(this Color color1, Color color2) {return Mix(color1, 0.5, color2);
}
/// summary
/// Mixes factor*color1 with (1-factor)*color2.
/// /summary
public static Color Mix(this Color color1, double factor, Color color2) {if (factor0) throw new Exception($Factor {factor} must be greater equal 0.);if (factor1) throw new Exception($Factor {factor} must be smaller equal 1.);if (factor0) return color2;if (factor1) return color1;var factor1 1 - factor;return Color.FromArgb((byte)((color1.A * factor color2.A * factor1)),(byte)((color1.R * factor color2.R * factor1)),(byte)((color1.G * factor color2.G * factor1)),(byte)((color1.B * factor color2.B * factor1)));
}这就是生成良好匹配的色彩所需要的一切操作。第一张图片显示了每种“主”色如何与其他“主”色进行不同程度的混合同样是红、绿和蓝然而如果你用黄色、品色和青色来代替可能会更好。在这里我真的觉得这些色彩比混合红、绿、蓝更漂亮。当然它们可能太纯粹了。GUI 经常使用灰暗的色调使用 GetBrighterOrDarker() 可以很容易地在混合后做出灰暗的色调。获取 RGB 色彩的色调、饱和度和亮度我还做了一些写这篇文章时所需要的方法可能也很有用。第一个方法是计算一个 RGB 色彩的色调、饱和度和亮度。/// summary
/// Returns the hue, saturation and brightness of color
/// /summary
public static (int Hue, double Saturation, double Brightness)GetHSB(this Color color) {int max Math.Max(color.R, Math.Max(color.G, color.B));int min Math.Min(color.R, Math.Min(color.G, color.B));int hue 0;//for black, gray or white, hue could be actually any number, but usually 0 is //assign, which means redif (max-min!0) {//not black, gray or whiteint maxMinDif max-min;if (maxcolor.R) {#pragma warning disable IDE0045 // Convert to conditional expressionif (color.Gcolor.B) {#pragma warning restore IDE0045hue 60 * (color.G-color.B)/maxMinDif;} else {hue 60 * (color.G-color.B)/maxMinDif 360;}} else if (maxcolor.G) {hue 60 * (color.B-color.R)/maxMinDif 120;} else if(max color.B) {hue 60 * (color.R-color.G)/maxMinDif 240;}}double saturation (max 0) ? 0.0 : (1.0-((double)min/(double)max));return (hue, saturation, (double)max/0xFF);
}我从“CodeProject在.NET 中操纵色彩第 1 部分”中复制了这段代码其实它赢得了“2007 年 5 月最佳 C# 文章”并对其做了点微小的“改进”。例如我觉得整数 0 到 360 足以列举所有的色调。原代码使用浮点数所以你可以有无限多的色调。这可能会让计算不那么容易受到四舍五入错误的影响但我想人们看不出这有什么不同。将任何色彩的饱和度和亮度提高到 100%在我选择匹配色彩的方法中最好从饱和度和亮度为 100% 的纯色开始然后再进行混合使其变得更深或更亮。下面的方法接收任何 RGB 色彩并返回一个具有相同色调的 RGB 色彩但饱和度和亮度为 100%。/// summary
/// Returns a color with the same hue, but brightness and saturation increased to 100%.
/// /summary
public static Color ToFullColor(this Color color) {//step 1: increase brightness to 100%var max Math.Max(color.R, Math.Max(color.G, color.B));var min Math.Min(color.R, Math.Min(color.G, color.B));if (maxmin) {//for black, gray or white return whitereturn Color.FromArgb(color.A, 0xFF, 0xFF, 0xFF);}double rBright (double)color.R * 255 / max;double gBright (double)color.G * 255 / max;double bBright (double)color.B * 255 / max;//step2: increase saturation to 100%//lower smallest R, G, B component to zero and adjust second smallest color accordingly//p (smallest R, G, B component) / 255//(255-FullColor.SecondComponent) * p FullColor.SecondComponent color.SecondComponent//FullColor.SecondComponent (color.SecondComponent-255p)/(1-p)if (color.Rmax) {if (color.Gmin) {double p gBright / 255;return Color.FromArgb(color.A, 0xFF, 0, (byte)((bBright-gBright)/(1-p)));} else {double p bBright / 255;return Color.FromArgb(color.A, 0xFF, (byte)((gBright-bBright)/(1-p)), 0);}} else if (color.Gmax) {if (color.Rmin) {double p rBright / 255;return Color.FromArgb(color.A, 0, 0xFF, (byte)((bBright-rBright)/(1-p)));} else {double p bBright / 255;return Color.FromArgb(color.A, (byte)((rBright-bBright)/(1-p)), 0xFF, 0);}} else {if (color.Rmin) {double p rBright / 255;return Color.FromArgb(color.A, 0, (byte)((gBright-rBright)/(1-p)), 0xFF);} else {double p bBright / 255;return Color.FromArgb(color.A, (byte)((rBright-bBright)/(1-p)), 0, 0xFF);}}
}这个方法是我自己写的。这里的数学要求比较高我希望我的计算是正确的。你可以使用任何取色器来轻松验证它。如果你发现任何不一致的地方请告诉我。作者简介Peter Huber 是 50 年前在 HP35 上开始学习编程的。然后他从 PL1、Assembler、Pascal、Modula、Java 转到 C#并且喜欢上 C# 语言已经有 15 年了。他已经在新加坡退休他的大部分时间都花在编写单用户 WPF 应用程序上。原文链接https://www.infoq.com/articles/colors-dotnet-guide/
