配色方案生成器

🎨 Color Scheme Generator

互補色
類似色
三元色
四元色
分裂互補
單色

🌈 HSL 色環視覺化

當前配色方案

📐 計算公式 / 原理
互補 +180°;類似 ±30°;三角 +120° / +240°;分裂互補 +150° / +210°(HSV 色相環)
基於 HSV 色相環的調和關係:在固定飽和度與明度下按色相角度偏移取色,得到互補、類似、三角等協調配色,即時預覽並可匯出色值,用於網頁與品牌視覺的快速定調。

提示

色環上的圓點代表當前配色方案中的顏色位置。點選色環可更改基礎色色相。

📋 Material Design 風格預設

📚 深度解析:配色方案生成器

💡 常見使用場景

  • 挑選品牌色板。
  • 對照 Material/Tailwind 預設。
  • 給原型快速上色。
瀏覽暖橙調色盤
<p><strong>輸入:</strong>選暖橙預設。</p><p><strong>處理:</strong>列出明度梯度色。</p><p><strong>輸出:</strong>色塊與 HEX,可逐個複製。</p>

❓ 常見問題(FAQ)

能存自己的色板嗎?
可臨時編輯複製;持久化請儲存到設計系統或匯出。結果以瀏覽器即時計算為準,純前端本地處理、資料不上傳;生成的樣式與程式碼僅作快速產出參考,正式專案請以設計系統、規範與瀏覽器實測為準。
兩種色對比度不夠會提示嗎?
會按 WCAG 算出對比度值與等級,未達標會標紅提醒,便於及時換色或調深。
會儲存或上傳我的內容嗎?
結果以瀏覽器即時計算為準,純前端本地處理、資料不上傳;生成的樣式與程式碼僅作快速產出參考,正式專案請以設計系統、規範與瀏覽器實測為準。
⚠️ 使用說明與注意事項
已複製
📖關於「配色方案生成器」 ▼

📝工具簡介

配色方案生成器。設計創意工具,視覺化操作,一鍵生成 CSS 程式碼。

✨功能特點

🎯使用場景