顏色選擇器

從一個顏色做出一整套配色

這裡每一種配色都是「旋轉色相、固定飽和度與亮度」的結果，這就是為什麼它們看起來像是一組，而不是 五個互不相干的顏色。

• 互補色——色輪上的正對面，180°。兩個色相之間對比最強；力道很足，也很容易用過頭。
• 鄰近色——±30°。彼此相鄰，所以整體感覺平靜、對比低，需要另外找東西來製造重點。
• 三角配色——彼此相隔 120°。平衡而鮮明；通常最好讓其中一個為主，另外兩個當點綴。
• 分裂互補色——互補色左右兩側的那兩個顏色。保留了互補配色大部分的張力，但少了那種刺眼的 跳動感。
• 四角配色——兩組互補色。這是你還能勉強兜在一起的最多顏色，也是最難平衡的。

深淺階

這組色階固定色相與飽和度，把亮度從 95% 一路降到 5%。設計系統就是這樣從單一品牌色產生出一整組 色階的，而在 HSL 裡這只是改一個數字，在十六進位裡則要改三個。

有一個但書：這樣做出來的色階在亮度數值上是均勻的，在視覺明亮度上並不是。黃色看起來會像是 跳了一階，藍色則像是幾乎沒動。如果你要的是視覺上均勻的色階，那應該用 OKLCH 而不是 HSL。

從螢幕取色

滴管可以讀取螢幕上任何一個像素，包括瀏覽器以外的地方。它需要 EyeDropper API，那是 Chromium 系瀏覽器才有的——Chrome、Edge、Opera、Arc、Brave。在其他瀏覽器上這個按鈕就不會出現，因為它只是 便利功能，不是這個工具本身。

沒有任何上傳

所有事情都在這個頁面裡完成，包括滴管——它讀到的那個像素不會離開你的機器。