前景色(前景色和背景色的区别)

写在前面的话

我会将过去几年学到的 Canvas 制图理论、实践进行浓缩、并编辑成册。希望通过体系化的内容组织助你快速入门、深入理解 Canvas。当然，因篇幅有限，本课程可能无法做到面面俱到，但是有了核心知识的积累，不论是继续阅读 Canvas 系列书籍，还是进一步扩展 Canvas 的学习领域、如 3D 制图等，都能做到左右逢源。

本 Canvas 系列课程已经编辑成册并陆续更新，下面是已更新章节传送门：

《Canvas 自动化制图必知必会-导读篇》

《Canvas 上下文详解》

《一文读懂 Canvas 中的 scale 与 translate》

《一文读懂 Canvas 中 rotate 与 skew 操作》

《Canvas矩阵镜像那些你不得不知的数学原理》

背景色千差万别，如果希望在复杂的背景色下显示清晰可辨的前景色（例如显示文字），那如何选择这样的前景色才能确保适用于所有的背景呢？

把白色与黑色之间按对数关系分成若干级，称为“灰度等级”。范围一般从0到255，白色为255，黑色为0，故黑白图片也称灰度图像，在医学、图像识别领域有很广泛的用途。

红绿蓝三色是非常不直观的颜色表示的方法，如果不经过训练，人类几乎没有办法直接通过 RGB 的值来猜出大概的颜色来。而 HSB 是用来解决人眼感知问题的，它将颜色用色相、饱和度、明度来表示。

可是，即便是 HSB 也不能完美解决人眼的感知问题。看下图，黄色和蓝色的饱和度和明度一样，只是色相不同，你觉得哪一个颜色更亮，哪一个更暗？

相信大家都会觉得黄色更亮，蓝色总给人一种阴暗的感觉。所以，在饱和度和明度之外，一定还有一种人眼对亮度的感觉是与色相相关的。我们将不同色相的颜色排成一圈，观察下哪些颜色更亮，哪些更暗：

我们将上面的不同颜色直接转成灰度图像，这是最能反映人眼感知的灰度图像，它将是这样的：

也就是说，不同的颜色值总能找到一个人眼感知的灰度值，这是著名的心理学公式：

灰度 = 红×0.299 + 绿×0.587 + 蓝×0.114

一个图像的每一个像素经过上面的公式计算得到的新的图像，即是人眼感知亮度的灰度图。

于是，当我们期望计算一个能在背景色上清晰显示的前景色时，我们可将背景颜色转换为灰度颜色，然后根据灰度程度，选取黑色或白色作为前景色。

当然，如果你喜欢，可以将一段黑色或接近于黑色的灰度色作为浅色背景的前景；将一段白色或颉俊宇白色的灰度色作为深色背景的前景。

为了实现这个效果，我们先写一个灰度/亮度的计算函数：

1234567

/// <summary>/// 获取一个颜色的人眼感知亮度，并以 0~1 之间的小数表示。/// </summary>private static double GetGrayLevel(Color color){ return (0.299 * color.R + 0.587 * color.G + 0.114 * color.B) / 255;}

然后写一个根据感知亮度计算反色的方法：

1

private static Color GetReverForegroundColor(double grayLevel) => grayLevel > 0.5 ? Colors.Black : Colors.White;

于是，当我们希望计算某个背景色上一定能清晰显示的前景色时，只需要调用 GetReverForegroundColor 即可。

https://baike.baidu.com/item/%E7%81%B0%E5%BA%A6%E5%80%BC/10259111

https://blog.walterlv.com/post/get-gray-reverd-color.html

https://en.wikipedia.org/wiki/Luma_(video)