找我們做網站
↑
Resources · 配色工具

Google Art Palette 教學:用名畫找網頁配色的 Google 配色工具

配色工具發布 2020.04.27更新 2026.10.02閱讀約 5 分鐘
Google Art Palette 教學:用名畫找網頁配色的 Google 配色工具

重點整理
Google Art Palette 是 Google Arts & Culture 的配色實驗網站,2026 年 10 月仍可免費使用、不必登入。畫面上方是一組五個顏色,下方會列出用色相近的藝術作品;可以按「SURPRISE ME」隨機換一組、把滑鼠移到色塊上改色並看到色碼,或用「FROM AN IMAGE」從自己的圖片取色。

想替網站或簡報找配色,卻不知道從哪裡下手時,參考經典藝術品是很快的方法:梵谷的《星夜》一看就讓人想到深藍、黑與黃。Google Art Palette 用電腦分析大量館藏作品,把每件作品歸納成五個代表色,反過來也能用你挑的顏色找出相近的作品。這篇說明怎麼用它找配色、複製色碼,以及使用時要注意的地方。

Google Art Palette 首頁的前導動畫,藝術作品逐漸轉換成五個圓形代表色

Google Art Palette 是什麼?

Google Art Palette 是 Google Arts & Culture「Experiments」系列的其中一個實驗,網址是 artsexperiments.withgoogle.com/artpalette。它不是一般的配色產生器,而是「用顏色找藝術品」:每件作品下方都會標出它的五個代表色,點進作品還能看到收藏館與作品資訊。對做網頁設計的人來說,它的用處是提供一組有實際作品可以參考的配色。

步驟一:進入網站,看完或略過前導動畫

打開網站後會先播放一段前導動畫,說明它分析了大量藝術作品。想直接開始,按畫面下方的「SKIP INTRO」即可。

Google Art Palette 前導動畫畫面,下方有 SKIP INTRO 略過按鈕
Google Art Palette 前導動畫畫面,下方有 SKIP INTRO 略過按鈕

步驟二:看懂主畫面:上方五色、下方作品

進入主畫面後,最上方是一整排五個色塊,下方是以這五個顏色為主色的藝術作品,每件作品下面也會用五個小圓點標出它自己的代表色。看到喜歡的作品,可以按作品下方的「SEARCH PALETTE」改用那件作品的配色繼續搜尋。

Google Art Palette 主畫面,上方是五個主色色塊,下方是用色相近的藝術作品
Google Art Palette 主畫面,上方是五個主色色塊,下方是用色相近的藝術作品

步驟三:隨機換一組配色

沒有方向時可以讓網站隨機出題。2026 年 10 月的介面是在色塊下方按「SURPRISE ME」,就會換成一組新的五色與對應作品。下面兩張是較早期的介面,當時是用捲動時出現的圓形按鈕隨機跳色,操作概念相同。

Google Art Palette 舊版介面,捲動時出現的圓形隨機跳色按鈕
Google Art Palette 舊版介面,捲動時出現的圓形隨機跳色按鈕
Google Art Palette 舊版介面,隨機跳色後換成另一組五色與作品
Google Art Palette 舊版介面,隨機跳色後換成另一組五色與作品

步驟四:查看並複製色碼

把滑鼠移到上方任一個色塊,就會顯示這個顏色的色碼(例如 #02010f),選取後即可複製,貼到 Photoshop、Figma 或 WordPress 佈景主題的顏色設定裡。

滑鼠移到 Google Art Palette 色塊上,左下角顯示該顏色的色碼
滑鼠移到 Google Art Palette 色塊上,左下角顯示該顏色的色碼

步驟五:用選色器自己調整顏色

對某個顏色不滿意,就直接改它。滑鼠移到色塊上會出現選色器,上方的彩虹條選色相、下方方塊調整明暗與飽和度,放開後 Google 會依新的五色重新找出相近的作品。舊版介面另有垃圾桶與加號,可以刪減或增加顏色(最多五色)。

Google Art Palette 舊版介面,色塊右下角的垃圾桶與加號,可刪減或增加顏色
Google Art Palette 舊版介面,色塊右下角的垃圾桶與加號,可刪減或增加顏色
Google Art Palette 的選色器,調整顏色後重新計算出相符的藝術作品
Google Art Palette 的選色器,調整顏色後重新計算出相符的藝術作品

步驟六:從自己的圖片取色

色塊下方的「FROM AN IMAGE」可以改用一張圖片當起點,讓網站分析出五個代表色,再找出用色相近的作品。例如拿品牌的產品照或 Logo 取色,再看看藝術家怎麼搭配這組顏色。

用 Google Art Palette 配色要注意什麼?

  • 五色不等於可以直接用的網站配色:作品的代表色常常彼此很接近,套到網站上還要決定哪個是背景、哪個是按鈕,並檢查文字與背景的對比是否足夠閱讀。
  • 顏色可以參考,作品圖不能隨便用:網站只是讓你參考配色,作品圖片的使用權屬於各收藏館,要放到自己網站前請看作品頁的授權說明。
  • 想看顏色實際套在網頁上的樣子:可以搭配 網站配色工具推薦 裡介紹的工具,把挑好的色碼放進範例版面試看。

常見問題

Google Art Palette 現在還能用嗎?

可以,2026 年 10 月實際打開網站仍正常運作,不需要登入 Google 帳號。

Google Art Palette 要怎麼複製色碼?

把滑鼠移到上方的色塊上,就會出現該色的色碼,選取後複製即可。

Google Art Palette 和一般配色網站有什麼不同?

一般配色網站直接給你色票,Google Art Palette 則是用顏色找藝術作品,讓你看到這組顏色在真實作品裡怎麼搭配。如果想從藝術史脈絡找顏色,也可以參考 Color Leap。

結語

Google Art Palette 不是正規的配色產生器,但它把「找靈感」這一步變得很直覺:先隨機看幾組,遇到喜歡的作品就順著它的配色往下找,再把色碼帶回自己的設計稿調整。下次卡在配色時,不妨先花五分鐘逛一逛。

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。