Colors UI 收錄超過 1000 個調色盤，取得配色靈感的好用工具

顏色是一種很神奇的東西，無論是製作網頁、開發應用程式、平面設計或簡報都會用到，好的顏色絕對能加分不少，不過顏色通常差一點點就會差很多，早期我會選擇網頁安全顏色（Web-safe colors），經測試有 216 個顏色能在不同的作業系統、瀏覽器都出現相同的顏色，後來我更傾向使用配色工具或是世界各地設計師提供的調色盤，讓我在需要配色時獲得一些靈感。

本文要介紹「Colors UI」是一個相當值得推薦的配色網站，首頁列出超過 1000 個調色盤，每個調色盤由五種不同顏色組成，以使用者點選的愛心數排列，將滑鼠游標移動到色塊上方就會顯示色碼，取得該顏色的 HEX、RGB、HSL 和 HSV 等色彩顯示格式。

值得一提 Colors UI 可開啟特定顏色「色調 / 陰影產生器」（Tint & Shade Generator），也就是以顏色為基礎，產生 18 個較淺、較深的相關顏色，蠻有趣的功能，對於要微調顏色來說很有幫助。

如果你和我一樣對於顏色沒什麼想法，Colors UI 提供一個尋找顏色的途徑，或許就能在這裡取得下一個專案的顏色組合，這個網站也提供建立調色盤功能，可以將你覺得好看的配色組合分享給全世界，總之我覺得很有趣，對於需要顏色靈感的朋友也能到這裡碰碰運氣。

Colors UI
https://colorsui.com/

使用教學

STEP 1

開啟 Colors UI 首頁會有一些調色盤配色組合，左下角是被點選愛心次數，右下角則是選單可開啟色彩頁面或是下載（將調色盤顏色匯出）。

最簡單的用法是在顏色上面點一下，當游標移動上去會顯示 HEX 色碼，點選色碼就複製到剪貼簿。

STEP 2

點選右下角的選單找到「Download」可將調色盤顏色匯出，包括 HTML、CSS、SCSS、HEX 或 RGB 不同檔案或色彩格式。

如果是點選檢視調色盤的話會在 Colors UI 網站將五個顏色打開，每個顏色會有更大的預覽範圍，點選也能夠進行調整或複製色碼。

STEP 3

前面提到可以對特定顏色開啟「色調 / 陰影產生器」功能，Colors UI 會顯示這個顏色較淺、較深的顏色組合，一共有 18 種，只要點選色塊即可複製 HEX 色碼。

STEP 4

打開 Colors UI 選色器（Color Picker），能取得特定顏色的 HEX、RGB、HSL、HSV 色彩值，下方有減輕、提高亮度、變暗、飽和、去飽和或灰階的顏色色碼，各種延伸搜尋、變化的色彩組合相當多。

STEP 5

除此之外 Colors UI 網站也收錄各種漂亮的純色「Solid Colors」，每個顏色都有名稱，一樣是只要點選就能複製色碼，也能將它放大、全螢幕預覽。

Material Colors 也收錄各種適合開發者使用的顏色，依照顏色類型分門別類，對於要尋找顏色來說真的非常方便啊！其實 Colors UI 好像功能非常多，值得花點時間去探索一下。