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

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 首頁會有一些調色盤配色組合,左下角是被點選愛心次數,右下角則是選單可開啟色彩頁面或是下載(將調色盤顏色匯出)。

Colors UI

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

Colors UI

STEP 2

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

Colors UI

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

Colors UI

STEP 3

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

Colors UI

STEP 4

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

Colors UI

STEP 5

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

Colors UI

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

Colors UI

值得一試的三個理由:

  1. Colors UI 收錄超過 1000 個調色盤,每個調色盤由五種顏色組成
  2. 將色彩輸出為 HEX、RGB、HSL 和 HSV 等色彩顯示格式
  3. 以色調 / 陰影產生器或選色氣找到更多相關顏色
分享本文
×