顏色選擇與調色板

選擇基礎顏色,生成深淺色和搭配色板,獲取網頁與設計使用的顏色值。

免費瀏覽器

基於 HSL 的明暗色、互補色和鄰近色在本地生成。

生成的調色板
亮色 80
#c7d7fa
亮色 60
#86a9f4
基礎色
#2463eb
暗色 40
#0f3c9f
暗色 20
#0a2767
互補色
#ebac24
鄰近色 -30
#24c6eb
鄰近色 +30
#4824eb

關於顏色選擇與調色板

圍繞選定主色生成色板。預覽相關顏色並複製色值,適合規劃界面背景、強調色和小型主題。

如何使用顏色選擇與調色板

  1. 選擇基礎顏色。
  2. 選擇配色關係並查看色塊。
  3. 複製準備使用的色值。

輸入與輸出示例

輸入與設置
主色:#2563eb
方案:互補色
預期輸出
主色及其互補配色色塊。

適用場景

  • 圍繞品牌主色探索主題。
  • 為 CSS 設計變量準備色值。

使用前需要了解的限制

配色協調不代表文字對比度符合無障礙要求。請單獨檢查各前景與背景組合。

數據處理與費用

核心操作在瀏覽器中完成,工具輸入不會上傳處理。網站仍可能使用會話 Cookie,並按隱私政策收集運行或使用數據。

在瀏覽器中免費使用,無需登錄。

常見問題

不會。調色板生成完全在瀏覽器本地完成,不會把顏色值發送到服務器。

工具會把基礎色轉換為 HSL,再通過調整亮度和色相生成明色、暗色、互補色和鄰近色。

可以。每個色塊都提供可複製的 HEX 值,可用於 CSS 變量、設計 token 或組件樣式。

相關工具