前景色(前景色和背景色的區別)

寫在前面的話

我會將過去幾年學到的 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)