【筆記：色彩設計】我的 Logo 的選色
這次製作自己的 Logo 時，關於色彩的選擇查了一點資料、考量了一些點，也做個紀錄吧。
好用的配色工具：Coolors
- Coolors - The super fast color palettes generator!
- 按下 空白，會自動改變每一格、產生一組配色
- 也可以自行選擇顏色
- 想保留、不想改變的顏色，可以點擊［Toggle Lock］鎖起來；
之後會基於已鎖住的部分去產生適合的配色 - 拖曳［Drag］移動位置
- 上方工具列的［Adjust palette］，可以對目前調色盤上的所有顏色調整，
可以調整整體的飽和度、明度、色溫
Windows 上好用的取色工具：GetPixelColor
- GetPixelColor The pixel query function for all Windows OS
- 就像滴管的功能，可以取得螢幕上任何一個像素點的顏色
色彩模型：RGB 與 HSL
其實還有很多其他種，不過我比較常用的只有這兩種、就只講這兩種吧。
RGB
- 三個 0 ~ 255 的數字，分別代表紅、綠、藍三原色，組合出一個顏色
- 程式最廣泛支持的，基本上其他大部分色彩模型選出的顏色也都能轉換為 RGB 色碼、放進程式使用
- 常見的色碼是六碼十六進位的字元，比如
0080FF；
也常在前面加上一個#辨識。 - 有時會見到變體：RGBA 與 RGBO，多了一個數值為「透明度」；
前者的透明度數值是 0 ~ 1 的小數，後者則同樣是 0 ~ 255 的十六進位數。
HSL
- 三個數值分別代表「色相」、「飽和度」、「亮度」
- 色相：0 ~ 359，是色相環上的角度。
- 飽和度：0 ~ 100，感覺像是多少比例的該顏色顏料、混合剩下比例的灰色顏料。
- 比如飽和度為 60，像是 60% 選取的顏色、與 40% 灰色顏料混合而成。
- 亮度：0 ~ 100，0 是全黑、100 是全白，50 就是不改變。
我這次的 Logo 選色
- 原本就想好 C 字樣要選藍色、星星要選對比的黃色，所以就從最簡單的
#0000FF與FFFF00調起。 - 太鮮豔了，想偏莫蘭迪色系、柔和一些，問了 ChatGPT、得到建議要降低「飽和度」。
- 但是用在網站的 favicon 要注意：icon 邊界上的顏色，在分頁欄的背景上，顏色辨識度要夠高
- Chrome 分頁欄背景的色碼：
- 明亮模式 目前分頁：
#FFFFFF - 明亮模式 其他分頁：
#DDE3E9 - 暗黑模式 目前分頁：
#3C3C3B - 暗黑模式 其他分頁：
#2B2B2B
- 明亮模式 目前分頁：
- 可以放到 Coolors 比較一下。
- Chrome 分頁欄背景的色碼：
- 飽和度調低、再微調一下亮度，確保顏色辨識度夠高。
- 最後決定選用
#5454D4與#F4E32A，看起來還不錯～