Coolors 配色網站教學：鎖色、對比與匯出

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

Coolors 是目前最多人使用的免費線上配色工具，按一下空白鍵就能產生一組五色調色盤，操作直覺且免費版功能已經相當完整。

在這裡把主色挑定之後，要把它展開成工程端能直接用的 50 到 950 色階與 CSS、Tailwind 設定檔，可以接著用 Kigen 免費配色產生器，一個色進、一組檔案出。

不管你是正在找網站配色的前端工程師、需要建立品牌色彩系統的設計師，還是只是想快速找到好看的顏色搭配，Coolors 都能幫你省下大量試錯的時間。截至 2026 年 5 月，Coolors 已累積超過 800 萬名使用者，免費版不需註冊就能開始產生調色盤，Pro 版年繳每月 3 美元、月繳每月 5 美元，解鎖更多進階功能。

市面上也有不少類似的調色盤產生器，像是 Tailwind Ink 的 AI 驅動擴展功能，或是 PaletteMaker 的即時範例預覽，各有各的強項。但 Coolors 勝在整體體驗最流暢、功能最齊全，這篇會帶你從基本操作到進階技巧，完整搞懂它能為你的設計工作帶來什麼幫助。

義大利獨立開發者維護十多年，把配色這件事交給演算法決定

Coolors 是一個線上配色工具，由義大利獨立開發者 Fabrizio Bianchi 建立並持續維護。它的核心功能是根據色彩和諧原則，自動產生互相搭配的調色盤。每次產生五個色塊，這些顏色經過演算法運算，確保放在一起時視覺上是舒服且有層次感的。

Coolors 不只是單純的配色產生器。它還整合了圖片取色（Image Picker）、WCAG 對比度檢查器、色盲模擬、漸變色產生、AI 配色助手（Color Bot）等功能，幾乎涵蓋了配色工作流程中會用到的大部分需求。如果你平常會用 CSS Gradient 來做漸變背景，或是用 Cool Backgrounds 來產生背景圖案，Coolors 能幫你先把顏色選好，再銜接到這些工具。

Coolors 核心功能介紹

一鍵產生調色盤

打開 Coolors 官網，點選首頁的「Start the generator」，系統會隨機產生五個色塊。按空白鍵就能不斷切換新的配色組合，直到看到喜歡的方向為止。整個過程不需要註冊帳號，開瀏覽器就能開始。

色塊操作：鎖定、微調、新增、刪除

找到喜歡的顏色後，點色塊下方的鎖頭圖示就能把它鎖定。按空白鍵切換時，被鎖定的色塊不會改變，系統會根據已鎖定的顏色來搭配其餘色塊。你也可以點擊色塊展開色相環和滑桿，精準微調到理想的顏色。需要更多顏色時，把滑鼠移到兩個色塊之間會出現「+」號，點下去就能插入一個運算出來的中間色。不想要的色塊也能直接移除。

漸變色模式

點選右上角選單中的「View as Gradient」，Coolors 會把目前的調色盤轉換成漸變色預覽。你可以調整漸變方向和色段比例，還能一鍵複製對應的 CSS 程式碼，或直接下載成圖片檔案。這對於需要做網站背景、Banner 或 Cover 圖的設計師來說非常實用。

多種色碼格式

每個色塊預設顯示 HEX 色碼，點擊後可以切換顯示 RGB、HSL 等格式。如果你在搭配 CSS 背景樣式 使用，或是需要在 Logo 設計工具 中填入特定色碼，不用再額外開色碼轉換器。

AI 配色助手 Color Bot

Coolors 近期新增了 AI 功能。Pro 使用者可以透過 Color Bot 用自然語言取得配色建議，例如輸入「給我一組適合咖啡品牌的暖色調配色」，AI 會根據大量專業配色組合的訓練資料來產生結果。Pro 方案每月提供 3000 點 AI 額度，用完可以加購或等下個月重置。

不用註冊就能匯出，從空白鍵隨機配色到落地一套流程

以下是完整的操作流程，從開啟網站到匯出配色，全程不需要註冊。

• 開啟產生器：前往 Coolors 官網，點選首頁中間的「Start the generator」按鈕。
• 瀏覽配色：按鍵盤空白鍵隨機切換整組配色。看到喜歡的顏色就鎖定它（點選色塊下方的鎖頭），系統會保留鎖定的顏色，只替換其他色塊。
• 微調色塊：點擊任意色塊，展開色相環和亮度、飽和度滑桿，精準調整到理想的顏色。
• 擴充色數：把滑鼠移到兩個色塊之間的間隔處，點選出現的「+」號，自動插入根據前後色碼運算出來的中間色。
• 儲存或匯出：點選右下角的「Save」儲存（需註冊，免費版最多存 10 組），或直接複製 URL 分享給其他人。

實際操作時，建議先按個十幾次空白鍵找到喜歡的大方向色系，然後鎖定一兩個顏色再繼續微調。這種逐步收斂的方式比一開始就設定條件來得有效率，因為很多好的配色靈感是意外的發現。如果你同時也在用像 DesignCap 這類線上設計工具，可以先在 Coolors 產好配色再拿色碼過去套用。

Coolors 進階功能：色盲模擬、圖片取色與對比度檢查

除了基本的調色盤產生，Coolors 還內建了幾個對專業設計師來說非常實用的進階功能。

色盲模擬器

Coolors 可以模擬不同類型的色覺缺陷，包括紅色盲（Protanopia）、綠色盲（Deuteranopia）、藍色盲（Tritanopia）等，讓你預覽配色在色盲使用者眼中的樣貌。如果你的設計需要面向大眾，例如網站介面或 App UI，這個功能能幫你確保色彩資訊不會因為色覺問題而無法傳達。根據醫學統計，全球大約有 8% 的男性和 0.5% 的女性有某種程度的色覺缺陷，這不是可以忽略的數字。

圖片取色 Image Picker

上傳一張圖片後，Coolors 會自動提取主要色彩並組合成調色盤。這在處理品牌配色、從參考圖取色、或讓網站配色跟某張素材圖協調時特別好用。免費版可以使用這個功能，Pro 版則提供更完整的選項。如果你搭配 ImageMatting 這類去背工具先把圖片處理乾淨，取色的效果通常會更精準。

WCAG 對比度檢查器

Coolors 內建對比度檢查器，選兩個顏色就能看這個組合是否符合 WCAG AA 或 AAA 標準。AA 等級要求一般文字的對比度至少 4.5:1，大型文字至少 3:1。這對於做 圖片編輯 或 色彩優化 的設計師來說，是一個能直接提升作品無障礙品質的工具。

Palette Visualizer 調色盤視覺化

這是 Coolors 較新的功能，可以把你產生的調色盤直接套用到真實的 UI 設計範例上預覽，包含 Mobile/Web UI、Branding、Typography 等不同版面類型。免費版有基本版面可看，Pro 版則解鎖所有版面配置。

Coolors 免費版與 Pro 版功能比較

截至 2026 年 5 月，Coolors 提供免費版和 Pro 版兩種方案。免費版沒有使用期限，可以無限期使用核心功能。Pro 版年繳方案每月 3 美元（年繳 36 美元）、月繳方案每月 5 美元，由 Paddle 處理付款，隨時可以取消。

免費版的調色盤產生、趨勢瀏覽、漸變色預覽等核心功能都沒有限制，對於偶爾需要找配色靈感的使用者完全夠用。但如果你是每天都會用到配色工具的專業工作者，Pro 版的無限儲存、AI 配色、Adobe 外掛整合確實能提升不少效率。就像 Freepik 或 FreeImages 這類免費圖片資源平台一樣，免費版已經能做很多事了，付費版則是讓你的工作流程更完整。

Coolors 趨勢調色盤：從熱門配色汲取靈感

有時候你知道要配色，但腦中一片空白，不知道從什麼色系開始。Coolors 的趨勢調色盤功能就是為了這種情況設計的。點選「Explore trending palettes」，你會看到大量由全球設計師分享的配色方案，按照熱門程度排列。

你可以直接把喜歡的配色整組套用到自己的專案中，也可以把它當作起點，進入產生器後鎖定喜歡的顏色再做微調。在搜尋欄輸入關鍵字，例如「pastel」（粉彩色）、「earth tones」（大地色）、「neon」（霓虹色），系統會幫你篩選出相關的調色盤。如果你正在做一個需要搭配 多邊形背景 或 Blob 圖形 的設計案，先在趨勢調色盤裡找到喜歡的色系方向，後續的視覺元素搭配會更順利。就算是做 3D 書本模型的視覺效果，配色對了整體質感就會提升一大截。

配色基礎理論：讓調色盤更有質感

雖然 Coolors 的演算法可以幫你自動產生和諧的配色，但了解一些基本的色彩理論，能讓你更精準地引導工具產生想要的結果。

色環與配色關係

色環（Color Wheel）是所有配色理論的基礎。把紅、橙、黃、綠、藍、紫六個主要顏色排成一個圓形，就能看出不同顏色之間的關係。最常用的幾種配色關係包括：

• 互補色（Complementary）：色環上正對面的兩個顏色，對比強烈、視覺衝擊大。適合需要吸引注意力的場景，例如 CTA 按鈕或強調元素。
• 類似色（Analogous）：色環上相鄰的顏色，搭配起來和諧統一。適合需要營造一致性氛圍的場景，例如品牌網站整體色調。
• 三角色（Triadic）：色環上等距的三個顏色，色彩豐富但不混亂。適合需要多種顏色又不失整體感的場景。
• 分裂互補色（Split-Complementary）：先選一個主色，再取其互補色兩側的顏色。比純互補色柔和，但保留對比張力。

60-30-10 配色法則

這是室內設計和品牌設計領域廣泛使用的配色比例原則。在你的整體配色中，主色佔約 60% 的面積，輔助色佔 30%，點綴色佔 10%。套用到網頁設計的話，主色是背景或大面積色塊，輔助色用於標題和按鈕，點綴色用在小圖示、連結、Hover 效果等細節。你可以用 Alwane 這個網站色碼分析工具去看看別人的網站是怎麼運用這個法則的。

暖色調 vs 冷色調

暖色調（紅、橙、黃）通常帶來活力、溫暖、親切的感覺，適合餐飲、生活風格相關的品牌。冷色調（藍、綠、紫）則營造出專業、可靠、冷靜的形象，適合科技、金融、醫療等領域。當然這不是絕對的規則，很多品牌會刻意打破慣例來建立差異化。在做 品牌 Logo 設計 或整理 Logo 素材 的時候，先確定好色彩方向，後續的設計工作會更聚焦。

Coolors 實際應用場景

網站設計的配色規劃

做網站時，配色是整體視覺的基石。通常會先在 Coolors 產生一組主色調，然後根據 60-30-10 法則把顏色分配到不同區域。主色用在 Header、Footer 和大面積背景；輔助色用在按鈕、標題和卡片元件；點綴色用在 Hover 效果、小圖示和提醒標籤。如果你在找WordPress 佈景主題，也可以先產好配色再去找搭配的主題，比反過來做更有方向感。

品牌識別的色彩系統

建立品牌識別時，色彩選擇比很多人想像的更重要。一個完整的品牌色彩系統不只是選一個主色，還需要一整套輔助色、強調色、中性色，以及它們在不同場景中的搭配規範。Coolors 可以幫你快速產生這套系統的基礎，產生的調色盤可以匯出成色彩規範文件，方便跟 網站模型的視覺素材 或 裝置 Mockup 搭配使用。如果需要去背素材來搭配品牌配色，CleanPNG 有大量免費去背圖片可以使用。

社群媒體素材的一致性

經營 Instagram、Facebook 等社群平台時，視覺一致性是建立品牌辨識度的關鍵。你可以用 Coolors 產生一組固定的品牌色，然後所有貼文的素材都圍繞這組配色來製作。這樣一來，就算內容不同，整個版面看起來還是統一的。有些設計團隊甚至會把 Coolors 產生的配色直接做成設計工具的色票盤，方便所有成員取用。

Coolors 與其他配色工具比較

市面上有不少配色工具，各有各的強項。以下是 Coolors 和幾個常見替代方案的比較。

Coolors 在「易用性」和「功能完整度」之間取得了很好的平衡。它不像 Adobe Color 那樣需要登入帳號才能使用完整功能，也不像某些工具只有基本的產生器而缺乏進階選項。如果你只想要一個打開就能用、不花腦筋就能產出好配色的工具，Coolors 會是首選。

如何將 Coolors 配色匯出至設計工具

產生好配色之後，接下來的問題就是怎麼把這些顏色帶到你的工作環境中。Coolors 提供多種匯出方式。

• CSS 格式：直接產生 CSS 變數或色碼，貼到樣式表中就能用。對前端開發者來說是最方便的匯出方式。
• SCSS 格式：如果你用的是 Sass/SCSS 預處理器，Coolors 也能產生對應的變數。
• Tailwind CSS 配置：可以產生 Tailwind 的色彩設定檔，直接貼到 tailwind.config.js 裡面。對於正在用 深色模式 或 自訂捲軸樣式 等前端功能的開發者來說非常方便。
• URL 分享：每個調色盤都有獨立的 URL，複製連結就能分享給同事或客戶。
• PDF 色彩規範：Pro 版可以產出包含所有色碼和色彩資訊的 PDF 文件，還能加上自訂品牌 Logo，方便做為設計規範的一部分。
• SVG 與 ASE 格式：支援匯出 SVG 檔案和 Adobe 的 ASE 色票檔，方便在各種設計軟體中使用。

如果你是 Figma 或 Adobe 工具的使用者，Coolors Pro 提供了對應的外掛（Figma Plugin、Adobe Extension），可以直接在設計軟體裡面存取你的調色盤，不需要手動複製貼上色碼。搭配像是 CSS.GG 這類 圖標庫 一起使用的話，整個設計系統的色彩管理會非常完整。

適合誰？不適合誰？

適合 Coolors 的使用者：

• 需要快速找到配色靈感的網頁設計師和 UI 設計師
• 想把配色直接轉成 CSS 或 Tailwind 格式的前端工程師
• 正在建立品牌色彩系統的行銷人員或接案者
• 沒有設計背景但需要產出好看配色的內容創作者

可能不太適合的使用者：

• 需要極度精細的手動色彩控制（例如 CMYK 印刷校色），這類需求建議用 Adobe Color 或專業排版軟體
• 需要離線使用的場景，Coolors 目前是純網頁工具（有 iOS App，但沒有桌面離線版）
• 需要團隊即時協作編輯調色盤的團隊，免費版不支援協作，Pro 版的協作功能也比不上 Figma 那種即時共編體驗

Coolors 常見問題 FAQ

Coolors 是否完全免費？

Coolors 有免費版和 Pro 版。免費版沒有使用期限，包含調色盤產生、趨勢瀏覽、漸變色模式、色盲模擬、圖片取色等核心功能。主要的限制是：最多儲存 10 組調色盤、1 個專案和 1 個收藏集、最多儲存 5 個顏色。Pro 版年繳每月 3 美元、月繳每月 5 美元，解鎖無限儲存、AI 配色、更多匯出格式、Adobe 和 Figma 外掛等功能。

Coolors 有沒有手機 App？

有的。Coolors 提供了 iOS 版本的 App，可以在 App Store 免費下載，功能和網頁版基本一致。另外也有 Chrome 瀏覽器擴充功能。截至 2026 年 5 月，官方尚未推出 Android 原生 App，不過可以直接透過手機瀏覽器使用網頁版。

Coolors 產生的配色可以商業使用嗎？

可以的。配色方案本身不受版權保護，Coolors 產生的任何調色盤都可以自由用於個人和商業專案。這點跟你在 Compressor.io 壓縮圖片或使用 Bigjpg 放大圖片的道理一樣，工具產出的結果是屬於你的。

Coolors 支援哪些色碼格式？

Coolors 支援 HEX、RGB、HSL、CMYK 等常見的色碼格式。在色塊上點擊就能切換顯示格式，也可以在匯出時選擇需要的格式。如果你正在找 圖片去背工具 來搭配使用，也推薦試試 Adobe 的免費去背功能。

Coolors 有沒有中文介面？

Coolors 目前主要支援英文介面，不過操作非常直覺，核心操作就是按空白鍵切換配色、點色塊鎖定或微調，不需要看懂太多文字說明。即使英文不好也能輕鬆上手。

如何分享 Coolors 調色盤給其他人？

每個調色盤都有獨立的 URL 連結，直接複製瀏覽器網址列的連結就能分享。你也可以把調色盤匯出成圖片或 PDF，貼到簡報或文件中。Pro 使用者還能在 PDF 上加上自訂品牌 Logo。

下一步：三個可以立刻做的事

1. 打開 Coolors 產生你的第一組配色。前往 coolors.co，點「Start the generator」，按幾次空白鍵感受一下操作。不需要註冊，30 秒內就能看到結果。

2. 用 60-30-10 法則把配色分配到你的專案中。從 Coolors 產生的調色盤裡挑出主色、輔助色和點綴色，然後按照 60-30-10 的比例分配到網站或設計稿的不同區域。這個簡單的動作就能讓你的配色有明顯的質感提升。

3. 如果你正在架站，把配色搞定後接著選主機。配色是視覺的基礎，主機是技術的基礎。先到 TechMoon 的虛擬主機推薦 看看適合你的方案。入門的話 Bluehost 是 WordPress 官方推薦的主機供應商，預算充足、追求高效能的話可以考慮 Kinsta 的 Google Cloud 等級 WordPress 主機服務。