網站與應用程式
選擇品牌色、背景色和點綴色，然後直接將它們貼入 CSS 變數、Tailwind 或 Android 主題中。
色彩方案生成器 — 建立相配的色彩方案，並將其匯出為程式碼。
選擇一個底色和配色方案，即可獲得由 3 至 8 種顏色組成的均衡色盤。鎖定您喜愛的顏色，檢查每種顏色上白色與黑色文字的可讀性，然後將色碼複製為 CSS 變數、Tailwind、Android colors.xml 或 Jetpack Compose 格式。所有操作皆在瀏覽器中執行，而儲存的色盤會保留在您的裝置上。
建立色盤
可在您的瀏覽器中執行
您的調色盤
選定您喜歡的顏色，然後按下「產生」以變更其餘顏色。點擊十六進位碼即可複製。點擊調色盤並按下空格鍵即可產生。
匯出為程式碼
已儲存的調色盤
目前尚未儲存任何調色盤。請按下「儲存調色盤」以將其儲存至此裝置。
指南
色彩方案指南：配色方案、對比度及匯出至程式碼
了解配色方案的運作原理、檢查文字對比度，並將您的配色方案應用到實際專案中。
什麼是配色方案生成器？
配色方案是指一組能相互搭配得當的顏色。設計師會根據色輪來構建這些配色方案：先選定一個起始色，再從該色出發，以固定角度選擇其他色調，使整體效果顯得協調平衡，而非隨機雜亂。
這個生成器能幫您完成這項工作。選擇一個底色和配色方案，鎖定您喜歡的顏色，並將結果匯出為 CSS、Tailwind、Android XML 或 Jetpack Compose 程式碼。 每個色卡都會顯示其 RGB 和 HSL 數值，以及白色和黑色文字在該色卡上的可讀性。十六進位數值（Hex）以 16 為基數：二進位轉十進位轉換器會顯示這些數值與普通數字之間的對應關係。
人們為何要製作色彩組合
簡報、海報及文件
為簡報、社群貼文或印刷設計，輕鬆取得一套協調的配色方案，無需費心猜測。
圖表與儀表板
為資料系列設定既鮮明又協調的顏色，並檢查對比度，以確保標籤清晰可讀。
色彩搭配解析
| 方案 | 它是如何建構的 | 體驗與使用 |
|---|---|---|
| 類似的 | 相鄰色相，相差 30° | 沉穩而自然。適合用作背景及柔和的用戶介面。 |
| 單色 | 同一色相，不同的明度 | 簡潔且統一。適合極簡風格的設計。 |
| 互補的 | 兩種互為對立的色調，相差 180° | 對比度高。適合用作鮮明的點綴色。 |
| 分裂互補 | 某種色相加上其對立色兩側的色相 | 與互補色相比，對比色所產生的張力較小。 |
| 三元 | 三種色調，相隔 120° | 生動且均衡。需要一種主色調。 |
| 四元（正方形） | 四種色調，相隔 90° | 豐富且多樣。最適合搭配一種主色調。 |
如何使用色彩調色盤生成器
- 請使用顏色方塊選擇底色，或輸入十六進位色碼。選擇配色方案及所需的顏色數量。
- 按下「產生」按鈕，嘗試新的隨機底色。若要保留某種顏色，請按下該顏色下方的「鎖定」按鈕。
- 請查閱每塊色卡上的對比度說明。凡文字置於色彩之上之處，應力求達到 4.5:1 或更高的對比度。
- 點擊六進位碼即可複製，或開啟「匯出為程式碼」，並選擇 CSS、Tailwind、Android 或 Compose。
- 按下「儲存調色盤」以將其保留在此裝置上，按下「複製連結」以分享該調色盤，或按下「下載 PNG」以取得圖片。
色彩對比與無障礙設計
對比度
一個介於 1:1（完全相同）至 21:1（黑底白）之間的數值，用以比較兩種顏色的亮度。
WCAG AA
一般文字的對比度至少為 4.5:1，大號文字（約 24 像素，或 19 像素的粗體）則為 3:1。這是法律上與實務上通常的目標值。
WCAG AAA
一般文字的字距比例至少為 7:1。這是一項更嚴格的標準，對視力較差的人士有所幫助。
不要僅憑顏色來判斷
大約每十二名男性中就有一人患有某種形式的色覺缺陷。請將顏色與標籤、圖示或圖案搭配使用，以免造成意義上的誤解。
匯出格式的樣貌
CSS： --color-1: #1f3a5f;
SCSS： $color-1: #1f3a5f;
Tailwind： 'palette-1': '#1f3a5f',
Android： #1F3A5F
Compose： val Palette1 = Color(0xFF1F3A5F)
JSON： ["#1f3a5f", "#ff5733"]
在 Android Studio 中，將 XML 貼上至 res/values/colors.xml，或將 Compose 程式碼行新增至您的 Color.kt 檔案中。Compose 的值包含表示完全不透明度的 alpha 前綴 FF。
打造實用色盤的小訣竅
- 使用一種主色、一至兩種輔助色，以及一種中性色。若每種顏色的比例相同，通常會顯得雜亂。
- 在確定配色方案之前，請先在每種背景色上檢查文字的對比度。
- 確定您的品牌主色調，並以此為基礎進行延伸，以探索各種可能性。
- 請在真實螢幕上，以實際顯示的尺寸檢視色盤，而不要僅將其視為色塊。
- 也請在深色模式下進行測試：在白色背景上效果良好的顏色，在接近黑色的背景上可能就不合適了。
限制與隱私權
隱私權
配色盤是在您的瀏覽器中生成的。已儲存的配色盤會保存在您裝置上瀏覽器的本地儲存空間中，絕不會被上傳。
限制事項
顏色以 sRGB 色彩空間呈現，實際顯示效果會因螢幕而異。配色方案是根據色彩理論提出的建議，不能取代實際使用者測試。本工具僅檢查對比度，不檢查其他與色盲友善相關的方面。
常見問題
色彩調色盤生成器 常見問題
色彩方案生成器是如何運作的？
選擇一個基礎色和一套配色方案，此工具便會利用色輪將基礎色轉化為一組相配的顏色。按下「產生」按鈕可獲得新的隨機基礎色，或鎖定您喜歡的顏色並產生其餘顏色。
這些配色方案之間有什麼區別？
「類比配色」運用相鄰色調，營造出寧靜的視覺效果；「互補配色」則將相對的色調搭配，形成對比。「分裂互補配色」與「三原色配色」各使用三種均勻分布的色調，「四原色配色」使用四種色調，而「單色配色」則維持單一色調，並透過明度的變化來呈現差異。
如何在變更其他顏色時保留某個顏色？
在任何色樣下方按下「鎖定」。當您按下「產生」、變更底色或變更配色方案時，已鎖定的顏色將保持不變。透過「編輯」按鈕編輯色樣時，也會將該色樣鎖定。
這些對比數值代表什麼意思？
每個色塊均顯示該顏色上白色文字與黑色文字的對比度。WCAG 規定，一般文字（AA 級）的對比度至少須達 4.5:1，較嚴格的 AAA 級則需達 7:1，而大字體文字則需達 3:1。
有哪些可用的匯出格式？
HEX 色碼清單、CSS 變數、SCSS 變數、JSON 陣列、Tailwind 設定檔、Android 的 colors.xml 檔案以及 Jetpack Compose 的色彩值，讓您能直接將這組配色方案貼入專案中。
我可以分享或儲存我的配色方案嗎？
是的。「複製連結」會產生一個網址，點擊後可重新開啟相同的配色方案；「下載 PNG」會儲存配色方案的圖片；而「儲存配色方案」則可在本瀏覽器中儲存最多 12 組配色方案。
為什麼我的顏色在另一台螢幕上看起來不一樣？
不同螢幕在亮度、色彩準確度及色彩設定檔方面各有差異。十六進位碼雖能以數字形式描述顏色，但實際顯示效果仍取決於螢幕本身。請在目標受眾將使用的裝置上，確認重要顏色的顯示效果。
一個調色盤應該有多少種顏色？
許多設計採用五種顏色便能達到良好效果：一種主色、一至兩種輔助色、一種淺色背景色以及一種深色文字色。此工具讓您可從 3 到 8 種顏色中進行選擇。
這個產生器是免費的嗎？我的資料會被儲存下來嗎？
此服務完全免費。配色盤是在您的瀏覽器中生成的。已儲存的配色盤會保存在您裝置的本地儲存空間中，絕不會被上傳。
我可以建立連結到一個調色盤嗎？
是的。請在頁面網址中加入 ?colors=1f3a5f-ff5733-00aa88，並以連字號分隔 2 至 8 組十六進位碼，且不包含 # 符號。
來自使用此工具的使用者
評論
正在載入評論……
繼續前進
工具箱裡還有更多工具
首頁還提供了數十種無需 API 金鑰即可使用的免費工具。