color scheme - Lauviah0622/Lavi-Note GitHub Wiki

如何定義網頁的 color-scheme，但這裡的說法比較偏向單色系上的變化。

  1. 先使用 HSL 系統定義出 brand-color。

注意 brand-color 在亮度上要比較適中（大概 40 ~ 60 之間），這樣才能夠提供後續調整空間。

在彩度部份，自己覺得高和低都可以，但是除了灰色調以外，如果彩度沒有那麼高的話，後續要做變化就必須從色相下手，從補色或鄰近色做變化。

#brand-color hsl(136°, 69%, 43%)
  1. 定義出 brand-color 要做哪些變化，延伸出 theme-color，像是 light, dark, dim 等等。

在這部份一個顏色就代表著一個系統。在不同系統的其他顏色上，通常 hue 不會變，或者只會做微調，用這樣的方式來避免品牌調性跑掉。

而在 saturation 還有 lightness 部份，則可以與最初的 brand-color 做比例的調整，例如：

但調整後的 Theme-color 還是同樣要注意前面的 brand-color 的問題，要留一些調整空間。這樣後續延伸出 element-color 才能夠和背景元素（plain text, background）做出區別

#brand-color hsl(136°, 69%, 43%)

#brand-color-dark hsl(136°, 69% / 1.5, 43% / 1.5)
  1. 定義出界面需要哪些顏色（element-color），例如：
    • Text
      • plain text
      • high light，像是 warning, danger, safe 之類
    • Block
      • Background，可以先定義出一個 background，再延伸出兩三種因應不同區塊的需要
      • shadow

這些顏色的變化同樣在 hue 部份和上一個步驟一樣，不會做太多的調整。 但在 saturation 還有 lightness 不會基於原本的 brand-color 等比例調整，而是會直接設定需要的彩度還有亮度。

在設定大範圍的界面元件的顏色時：像是大面積的 background、 還有大部分文字 的plain text，（這些自己先稱為 Background element，總之是在注意力分配上，不需要分配過多關注的元素）可以適當的加上一些彩度，大概 5 ~ 20% 左右，能夠有比較活潑不死板的效果，但不要太高，會過度顯眼而降低與需要突顯的元素的對比。

hight light 就可以彩度高一點沒關係。

當然這部份也是可以做色相變化來突顯元素的。

#brand-color hsl(136°, 69%, 43%)

#brand-color-dark hsl(136°, 69% / 2, 43% / 2)

// 需要
#color-background
#color-text
  1. 從 theme-color ，來制定出不同 theme 的 element-color
#brand-color hsl(136°, 69%, 43%)

#brand-color-dark hsl(136°, 69% / 1.5, 43% / 1.5)

// theme-color 和 element-color 組合出各個 theme 的 element color

// Lightmode 的背景色較淺色，文字較深
#light-color-background hsl(136°, 35%, 94%)
#light-color-text hsl(140°, 68%, 12%)


// Darkmode 的背景色較深色，文字較淺
#dark-color-background hsl(136°, 22%, 22%) 
#dark-color-text hsl(140°, 18%, 95%)

有一些經驗談

如果是元素要做 primary 的 hight light，像是strong 的文字，或者是 subButton 的 out stroke 又或者是 Main button 的 fill ，可以從 brand color 做延伸。