Colorion 調色盤產生器，按空白鍵換一組五色

Colorion Color Palette Generator 是一款線上調色盤產生器：按空白鍵換一組五色，點色塊複製單色，按 C 鍵複製整組 HEX 色碼。適合還沒決定配色、想先挑幾組方向的時候使用。

找到喜歡的組合後，先把色碼貼到記事本或設計檔裡保存。本次操作時，相同網址重新整理後就換了另一組顏色；加入書籤可以留住工具入口，不能代替保存當前配色。以下從產生、複製到套用示範一次，本次流程沒有遇到登入或付款要求。

用空白鍵換一組五色色票

開啟 Colorion 調色盤產生器，桌面版會顯示五張色卡，每張下方都有一個以 # 開頭的 HEX 色碼。不用先輸入照片或品牌資料，就能查看一組配色。

想換方向時，點一下頁面空白處，再按空白鍵。五個色碼會一起換成另一次抽選的結果。它是從內建色票清單中抽出一組，因此可能遇到重複組合；同組再出現並不一定表示按鍵失效。

先挑接近作品氣氛的組合就好，不必為了五色色票而硬把五個顏色全部用上。這個產生器沒有指定主色或鎖定單色的控制；如果已經有不能改動的品牌色，繼續按空白鍵未必能得到你要的搭配。

若開啟後只有要求啟用 JavaScript 的文字，先確認瀏覽器允許該網站執行 JavaScript。若色卡已出現，空白鍵卻沒有反應，先讓焦點回到頁面，再試一次；不要在網址列輸入空白字元。

只需要某個顏色時，直接點它的色塊。畫面會短暫顯示包含該色碼的複製提示；接著切到記事本或純文字文件，貼上確認。這次點第二色，實際取得的是 #3ED5C2。

要保留整組配色，可以這樣做：

本次按 C 複製得到以下內容，五個色碼以逗號分隔：

#EB3490,#3ED5C2,#D3217D,#883674,#F4EDEC

你抽到的組合通常不同，驗證時對照自己的畫面即可。如果貼出來還是舊文字，回到 Colorion 重做複製，再貼到空白文件檢查；若瀏覽器持續無法複製，也可以按畫面逐一記下 HEX。複製提示可以協助判斷，實際貼出的內容才是要保存的資料。

沒有實體鍵盤時，往色票下方捲動，可以找到 Generate Palette 與 Copy to Clipboard：前者重新抽一組，後者複製目前五色。只取其中一色，仍可點那個色塊。

本次在 390 px 寬的手機尺寸畫面中，點 Generate Palette 後色碼有改變，再點 Copy to Clipboard 也取得了與畫面一致的五個色碼。這是瀏覽器的手機尺寸測試，並非所有手機型號的實機相容性測試；在自己的手機上，仍要切到記事本貼上確認。

喜歡的組合要在再次產生、重新整理或關閉頁面前保存。可以把五個色碼與用途一起記在設計檔中，例如「春季活動候選一」，之後再補上哪個顏色用於背景、文字或強調。也可以另外截圖作視覺參考，但保留文字色碼會比較方便精確套用。

設計工具若有 HEX 或自訂色彩欄位，填入對應的一個色碼即可；若欄位本身已顯示 #，依該工具要求輸入後面的六位字元。不要把逗號分隔的五色清單一起塞進單一顏色欄位。

寫網頁時，HEX 是 CSS 可使用的色彩格式。例如下面的小範例，把剛才取得的 #3ED5C2 當背景，另外搭配深色文字。這裡的文字色可以自己指定，不必受限於抽出的五色。

<div class="palette-card">配色試作</div>
<style>
.palette-card {
  background-color: #3ED5C2;
  color: #111111;
  padding: 1rem;
}
</style>

想先查看效果，可以把這段存成純文字的 color-demo.html，用瀏覽器開啟，會看到帶有青綠色背景的「配色試作」。我在本次瀏覽器測試中確認背景為 rgb(62, 213, 194)，與 #3ED5C2 一致。這個檔案只供局部試作，刪除它即可清除範例，不必先修改正式網站。

若把整組逗號清單填進 background-color 而沒有變色，改成單一 HEX 再試；若 HTML 範例只顯示原始文字，確認儲存的副檔名是 .html，而不是 .html.txt。套進既有網頁時，還要確認 CSS 選擇器有對應到要改色的元素。

色票能提供配色起點，放進自己的版面後，仍要查看文字、背景與按鈕是否清楚。如果想先把色碼放進網站或手機介面的範例裡比較，可以接著看 PaletteMaker 配色預覽與匯出教學，其中也有文字與背景對比的檢查例子。選定用途後再保存這組色碼，後續改稿就有明確依據。