色彩工具
Color Palette 色票產生器
依據主色自動產生完整色階，支援多種配色方案。
一鍵複製 HEX/RGB/HSL，匯出 CSS Variables 與 Tailwind 色票。
主色選擇
HEX
RGB
HSL
配色方案
匯出
色票 Palette
5 色
·
單色
:root {\n --primary-50: #fff1f2;\n --primary-100: #ffe4e6;\n ...}
功能特色
多種配色方案
10 階色票 (50-900)
HEX/RGB/HSL 即時顯示
一鍵複製色值
CSS Variables 產生
Tailwind 色階
隨機配色
鎖定顏色功能
匯出 PNG/SVG/JSON
復原 / 重做
純前端離線執行
色彩理論簡介
色彩配色是設計中至關重要的一環。了解不同的配色方案可以幫助您建立和諧、專業的視覺作品。
單色
同一色相不同明度，最安全的配色
類似色
色相環相鄰顏色，和諧自然
互補色
色相環相對顏色，對比強烈
三角色
色相環 120° 分布，活潑豐富
四色
兩組互補色，豐富且平衡
方形
色相環 90° 間隔，均衡多元
使用說明
- 使用 Color Picker 或輸入 HEX / RGB / HSL 選擇主色。
- 切換 配色方案（單色、類似、互補、三角等）查看不同配色效果。
- 每個色票顯示 HEX / RGB / HSL，點擊即可複製。
- 點擊色票上的 鎖定圖示 可鎖定該顏色，重新 Random 時保留。
- 切換到 CSS Variables 或 Tailwind 色票 標籤，複製產生的程式碼。
- 使用 匯出 按鈕下載 PNG、SVG 或 JSON 格式。
常見問題
什麼是色階 50-900？
這是參照 Tailwind CSS 的色階命名方式。50 是最淺色（接近白色），900 是最深色（接近黑色），500 為基準主色。這樣的命名讓顏色在不同明度下保持一致色相，方便設計系統使用。
Monochromatic 和 Analogous 有什麼不同？
Monochrome（單色） 是同一色相下不同明度的變化，整體統一和諧。Analogous（類似色） 是使用色相環上相鄰的 2-3 個色相，產生自然柔和的漸變效果，常用於按鈕 hover 和背景層次。
如何將色票匯入 Tailwind 專案？
切換到 Tailwind 色票 標籤，複製產生的 CSS Variables，或直接將色值複製到您的
tailwind.config.js 中的 theme.extend.colors 區塊。這個工具是免費的嗎？
是的，完全免費，無需註冊。所有處理都在您的瀏覽器中本地執行，不會傳送任何資料到伺服器。
瀏覽器相容性
Chrome 10+
Firefox 3.5+
Safari 3+
Edge 12+
Opera 10+
iOS Safari 3+
Android 4.4+
IE 9+
隱私說明
此工具完全在您的瀏覽器中執行。您建立的任何顏色、色票都不會傳送到任何伺服器。我們不會對這個工具使用 Cookie 或追蹤功能。