HEX 調色板生成器
輸入一個主色，自動生成完整配色方案（主色階、和諧色、語義色和可複製 CSS 變量），幫助你更快統一品牌視覺。
基礎顏色 (HEX)
支持 #RGB 或 #RRGGBB，例如 #0EA5E9
快速預設
配色總覽
主色 + 色彩關係，快速搭建一致的視覺系統。
基礎顏色 (HEX)
#2563EB
色相: 221飽和度: 83%亮度: 53%
和諧色
鄰近色 A
#45C7E4
鄰近色 B
#6345E4
補色
#E6AB2A
三角色 A
#E2386D
三角色 B
#6DE238
主色階（50 - 900）
從淺到深的可用色階，可直接用於按鈕、背景、邊框和強調文本。
50
#F4F6FB
100
#D1DBF1
200
#ABBFEB
300
#82A2E7
400
#5583E8
500
#2563EB
600
#124BC7
700
#0D3794
800
#082462
900
#04112F
語義色（設計 Token）
建議直接用於產品 UI 的角色色，減少每個頁面重新配色的成本。
主要
主要
主按鈕 / 主品牌色
#2563EB次要
次要
輔助品牌色
#6C59D5強調
強調
重點強調 / 高對比元素
#E3AA2D背景
背景
頁面背景
#F7F7F8表面
表面
卡片與容器背景
#E8E9EE文字
文字
正文文字顏色
#1B212CCSS 變數
一鍵複製到樣式文件，快速落地整套主題。
:root {
--color-primary: #2563EB;
--color-secondary: #6C59D5;
--color-accent: #E3AA2D;
--color-background: #F7F7F8;
--color-surface: #E8E9EE;
--color-text: #1B212C;
--color-primary-50: #F4F6FB;
--color-primary-100: #D1DBF1;
--color-primary-200: #ABBFEB;
--color-primary-300: #82A2E7;
--color-primary-400: #5583E8;
--color-primary-500: #2563EB;
--color-primary-600: #124BC7;
--color-primary-700: #0D3794;
--color-primary-800: #082462;
--color-primary-900: #04112F;
}如何從一個 HEX 顏色構建完整的配色系統
此工具可將一個基礎 HEX 顏色實時轉換為結構化調色板。您可以手動輸入 HEX 值、從取色器中選擇，或隨機生成顏色。即時查看完整的調色板概覽，包括和諧色、色調階梯、語義化令牌和可複製的 CSS 變量。
1
步驟 1：輸入或選擇基礎顏色
直接輸入 HEX 顏色代碼、從取色器中選擇顏色，或點擊"隨機顏色"自動生成。
2
步驟 2：查看調色板概覽
查看基礎顏色及自動生成的和諧色，它們將互補並擴展您的設計。
3
步驟 3：探索色調階梯和語義化令牌
查看 50-900 的色調階梯，從淺到深的色階適用於背景、邊框、狀態和文字對比。同時生成實用的 UI 語義化令牌。
4
步驟 4：複製 CSS 變量或令牌
一鍵複製生成的 CSS 變量或語義化角色，直接粘貼到您的樣式表中。
為實際項目打造的結構化調色板
這款 HEX 調色板生成器不僅是簡單的色板。它創建結構化、可立即用於產品界面、設計系統和品牌工作流的調色板。
基於和諧理論的顏色生成
自動生成保持視覺平衡和對比度的互補和諧色。
色調階梯（50-900）
為 UI 層級、狀態、背景和可讀文字對比優化的從淺到深色階。
UI 一致性的語義化令牌
預定義角色幫助在主要操作、成功狀態、警告和中性元素之間保持一致的使用。
可複製的 CSS 變量
一鍵將整個調色板導出為 CSS 變量，可直接在樣式表中使用。
常見問題
它是一個基於單個 HEX 顏色值創建完整調色板的工具，包括色調變化和和諧色。
可以。您可以輸入任何有效的 HEX 顏色、手動選擇或隨機生成顏色。
色調階梯（50-900）為背景、邊框、懸停狀態和可訪問文字對比提供結構化色階。
只需複製變量並粘貼到您的 CSS 文件或設計系統配置中即可。