【品牌選色攻略】盤點12個高質選色免費工具 4大選色用途品牌都適用! | 文章 – 滙豐機滙

文章召集了 12 個高質選色工具,讓你查看各品牌所用的主色調、動手生成色盤、獲得更多選色靈感,或參考已現成調好的配色板。想利用色彩替品牌「升呢」?線上便輕鬆做到!

設計  ·    ·  7 mins read

品牌色 品牌選色 品牌 免費選色工具 品牌代表色 品牌配色

之前在選色攻略分享過選好品牌命定顏色告別產品色差的各種技巧,已讀過的你會知道 Pantone 是一個權威的選色工具。不過 Pantone 都不是萬能,它可以為你的品牌提供精準的色碼建立 brand guideline,不過如果你想以圖搜色、獲取用色靈感、或更多配色工具,這些功能則要靠其他小工具了。

下文召集了 12 個高質選色工具,讓你查看各品牌所用的主色調、動手生成色盤、獲得更多選色靈感,或參考已現成調好的配色板。想利用色彩替品牌「升呢」?線上便輕鬆做到!

大至建立品牌設計基準、小至網站滾軸的用色,都可用上選色工具

建立屬於你品牌的一套配色可讓內部及設計師應用,協助統一風格;但在一些個別情況也可用上選色工具:

  1. 設計網站,包括 side bars、banner、按鈕、CTA(Call-To-Action)按鈕

  2. 設計營銷材料,例如 social media feeds、廣告設計、宣傳單張、優惠卷

  3. Giveaway 禮品用色

  4. 產品包裝用色

  5. 尋找屬於自己產品類型的色種
    (例如不少電子通訊軟件偏好藍或綠色,它們用的又是哪種藍呢?(並非蕭正楠))

4大選色用途 x 12個高質選色工具

  1. 品牌都在用什麼主色?一按即知!

    • Brandcolors.net ── 一按即知大品牌在用的品牌色碼

      想知道品牌在選用的主色調?到 Brandcolors 輸入公司名字,立即就可獲取所用的主色調色碼:品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 brandcolors
      ▲搜尋 Facebook 的主色
      品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 brandcolor
      ▲一按即顯示品牌色碼
    • Materialui ── 應用程式色板

      網站收錄網絡世界,例如網站及應用程式商用的色調:品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 materialUI
      ▲網站有多種網絡用途的色板供參考,選取「Social」出現了各大創科軟件的主色。


  2. 配色生成工具,一頁搞定!

    • 0to255 ── 自動漸層配色

      0to255 點選任何一個心水顏色,右欄便會自動顯示該色的漸層配色,一按便可以複製色碼:品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 0to255
    • Paletton ── 一個調色策略同時處理幾種配色

      Paletton 不但可以設計色盤,你亦可以同時調配幾個色盤的深淺及色調:品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 paletton品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 paletton
    • Color Haipixel ── 最快捷簡便的配色工具(手動版)

      一進入網站便會出現色板。畫面顏色會隨着滑鼠游走變化,看到心水顏色按一下即可生成第一項配色:品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 color haipixel▲以上色板便是按下 6 下心水色調而成的。

    • Palettable ── 快捷建立色板(自動版)

      類似 Color HaipixelPalettable 都是一按生成色調,不過系統已預定了每次出現的顏色,你只可以按「like」或「dislike」決定要不要讓色調納入色板,按下「dislike」便會自動分配另一但色調。

      雖然用家沒能自由選色,但好處是它非常適合未有配色概念的用家,它所分配的顏色都不是隨機的,只會分配與已「Like」了的色調相配的色調。品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 colorhaipixel
      ▲小編按了「Like」所生成的色板。
    • HELLO ── 一按自動配搭對比色

      HELLO 主頁一按便會自動出現系統已配好的兩款對比色:品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 hello▲小編認為 HELLO 的配色特別適合商用,對比色簡單活潑,以上這對比色非常像日牌 GU 主色。

  3. 需要更多靈感選色?「以圖搜色」或讓圖庫引導選色!

    • Adobe Color ── 以圖庫找配色靈感 + 以圖搜色 + 生成色板自動同步到 Creative Cloud以圖庫找配色靈感

      於站內左欄的 “Explore” tap 會顯示不同主色的圖庫,你可以從中獲取靈感找找心水色調:品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 Adobe Color
      ▲選取圖片一覽所用色調

      品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 Adobe Color
      ▲按圖進入頁面獲取所用的色碼


      以圖搜色品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 Adobe Color▲上傳任何圖片,讓 Adobe Color 偵測色碼品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 Adobe Color
      ▲小編隨便上傳了 Mac iOS 更新的 banner,系統秒速獲取了圖片的所有色碼
      生成色板自動同步到 Creative Cloud品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 Adobe color▲你亦可以於左側功具欄的「Create」tap 自創一套色板,按「save」後色板便會自動同步到 Creative Cloud(需成為 Adobe Creative Cloud 用户,免費),在 Adobe Creative Suite 軟件例如 Photoshop 便可以看到自創色板了。
    • Designspiration ── 以 Designers 圖庫尋找配色靈感

      與 Adobe Color 類似,Designspiration 都提供圖庫讓用家尋找理想的色調。
      它召集了大量攝影師及設計師提供高質圖像:品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 Designinspiration▲網站提攝影師及設計師的作品照品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 designspiration▲你亦可以輸入關鍵字收窄圖種品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 Designspiration▲選中圖片按進後便可看到所採用的色系。不過需要按進每個顏色波波以獲得色碼。

    • Colorlisa ── 召集世界知名藝術家用色

      Colorlisa 收集世界知名畫家的作品配色,包括達文西、莫奈、畢卡索等:品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 colorlisa

  4. 反正不想費心思?預定配色方案

    • Colorion ── 提供 4 萬款配色方案 + 輸入顏色尋找色組配對


      Colorion 預先為你調配好數萬種色板:品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 colorion品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 colorion▲你可以以顏色收窄搜尋範圍。品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 colorion▲選擇「light pink」所出現的相關配色。
    • Nipponcolors ── 250 種日本傳統色系

      這平台或能輕易俘虜哈日族的心,它收錄了 250 種日本傳統色系,這些顏色常用於日本古典文學作品、和服及手工藝,是具代表性的日本色調。品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 nipponcolors▲每一個橫樑都是一組色系,你亦可以自由調配不同顏色。品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 nipponcolors品牌色 品牌選色 品牌 選色工具 品牌代表色 品牌配色 品牌配色 工具 網頁設計 色彩搭配  品牌logo顏色 品牌配色 品牌 設計 粉紅色配色 nipponcolors

      無論你想參考大品牌用色、動手砌好屬於你品牌的配色、尋找色彩靈感、以圖搜色、還是直接套用現成的配色方案,都有以上工具助你落定命定顏色,再沒藉口亂用配色了~!如果你對其他選色攻略、網頁設計、或其他經營品牌的貼士,便要前往商場心理學閱謮更多了。

商場心理學
商場心理學