其他
配色產生器
配色產生器是一款只要選一個基準色,就能自動產生互補色、類似色、三角配色等配色方案的免費調色盤產生工具。製作配色方案所需的配色理論交由工具計算,讓您快速找到可用於網頁設計、簡報製作、插畫、品牌識別等場景的漂亮配色組合。
可用 URL 分享、儲存目前的配色。
產生的調色盤
- L 0.27#1E90FF
- L 0.40#FF8D1E
匯出
:root {
--color-1: #1E90FF;
--color-2: #FF8D1E;
}
配色的產生全程在您的瀏覽器中完成,輸入的顏色不會傳送到外部伺服器。
相關工具
QR Code 產生
將網址、Wi-Fi、郵件、簡訊、電話、聯絡人、地理位置、活動、文字轉換為 QR Code 的免費 QR Code 產生器，可自訂尺寸、顏色與 Logo，全程在瀏覽器中完成。
抽籤 / 抽獎
從名單或數值範圍中隨機抽出 1~N 項的免費抽籤、抽獎工具，支援不重複抽選、捲動動畫與歷史紀錄，適合課堂抽人、尾牙抽獎，全程在瀏覽器中完成。
番茄鐘
依 25 分鐘專注、5 分鐘休息循環的免費線上番茄鐘，支援環形進度、提示音、全螢幕與子母畫面（畫中畫）小視窗，免安裝、免註冊，適合學習與工作專注，全程在瀏覽器中完成。
色彩選擇器
從圖片中擷取顏色並取得色碼的免費色彩選擇器，可用放大鏡依像素精準拾取，支援 HEX / RGB / HSL 切換與調色盤匯出。免費、免註冊。
色碼轉換
在 HEX、RGB、HSL、HSV、OKLCH 色碼之間互相轉換的免費工具，支援透明度（RGBA、8 位 HEX）與 CMYK 參考值，一鍵複製任意格式，全程在瀏覽器中完成。
對比度檢查
即時計算前景色與背景色對比度的免費對比度檢查工具，依 WCAG 2.1/2.2 判定 AA、AAA 是否合格，並支援合格色建議、色覺（色盲）模擬與 APCA，全程在瀏覽器中完成。
配色產生器是什麼?
配色產生器是一款只要選一個基準色,就能自動產生互補色、類似色、三角配色等配色方案的免費調色盤產生工具。製作配色方案所需的配色理論交由工具計算,讓您快速找到可用於網頁設計、簡報製作、插畫、品牌識別等場景的漂亮配色組合。
基準色除了可輸入像 #1E90FF 這樣的 HEX,也支援 rgb(30, 144, 255) 或 hsl(210, 100%, 56%),還能透過原生顏色選擇器挑選,或用「隨機」按鈕尋找配色靈感。配色類型支援互補色、類似色（鄰近色）、三角配色、四角配色（矩形配色）、分裂互補色、單色（同色系）、明暗漸層（Shades & Tints）共 7 種。單色與類似色等類型還可調整產生的顏色數量（3～10 色）。
產生的調色盤,除了可一鍵複製各顏色的 HEX,還能以 CSS 變數（:root { --color-1 }）、Tailwind 的 theme.extend.colors、SCSS 變數、JSON 等格式一次匯出。由於可直接貼進程式碼,讓您從決定配色到實作都能順暢銜接。每個色塊也會顯示黑字、白字哪一種較易閱讀（對比度參考),有助於 UI 設計時判斷文字顏色。
所有配色計算都在您的瀏覽器內進行,輸入的顏色不會傳送到外部伺服器。無需註冊帳號、也不必點擊廣告,立即就能使用。
使用方法
- 在輸入框輸入基準色（支援 HEX、RGB、HSL),或用顏色選擇器挑選顏色。想找靈感時也可使用「隨機」按鈕。
- 選擇配色類型（互補色、類似色、三角配色、四角配色、分裂互補色、單色、明暗漸層)。
- 在單色或類似色等可調整顏色數量的類型中,用滑桿設定要產生的顏色數量（3～10 色)。
- 確認產生的調色盤,各顏色的 HEX 值可用卡片上的複製按鈕複製。
- 在「匯出」切換 CSS 變數、Tailwind、SCSS、JSON 等分頁,用「複製」按鈕複製整段程式碼並貼進實作中。
- 按下「複製 URL」,即可取得能重現目前配色的分享 URL,可用於團隊分享或加入書籤。
使用情境
- 想從基準色決定配色的網頁設計師、切版人員,快速建立互補色或類似色的調色盤。
- 想把配色直接寫進程式碼,作為 CSS 變數或 Tailwind 設定的前端工程師。
- 想用三角配色、四角配色等配色方案,整理簡報或投影片配色的商務人士。
- 想以品牌色為起點,用單色或明暗漸層展開不同色調變化的設計師。
- 在插畫或作品創作中,想找到協調一致的配色組合靈感的創作者。
- 想把決定好的配色透過分享 URL 交給團隊,或日後重現同一份調色盤的使用者。
注意事項
- 配色的產生全程在瀏覽器中完成,輸入的顏色不會傳送到外部。
- 基準色可用 HEX、RGB、HSL 各格式輸入。不支援透明度（Alpha)。
- 互補色、三角配色、四角配色、分裂互補色的顏色數量由配色理論決定,因此不會顯示顏色數量滑桿。單色、類似色、明暗漸層則可調整顏色數量。
- 配色是在 HSL 色彩空間中旋轉色相來計算。若以飽和度極低的顏色(接近灰色)作為基準色,色相的差異可能會較難辨識。
- 分享 URL 只包含基準色、配色類型與顏色數量。開啟該 URL 即可以相同設定重現調色盤。