配色方案產生器配色方案產生器
zh-TW

AppHelp

配色方案產生器

選擇基礎色，產生五個相關色塊，複製 HEX 色碼或 CSS 自訂屬性。

CSS 變數
--color-1: #13C6C9;
--color-2: #1599E0;
--color-3: #2463EB;
--color-4: #3E3BED;
--color-5: #8952EF;

常見任務

  • 配色方案產生器

快速答案

選擇基礎色，產生五個相關色塊，複製 HEX 色碼或 CSS 自訂屬性。

使用步驟

  1. 1. 選擇基礎色用色彩選擇器設定起始顏色。
  2. 2. 比較配色模式在類似色、互補色和三角色之間切換。
  3. 3. 複製配色點擊色塊複製 HEX，或複製五個 CSS 變數。

範例

CSS 自訂屬性

輸入
基礎色 #2563EB，類似色模式
輸出
產生 --color-1 至 --color-5 五條宣告。

注意事項

  • 產生結果是配色建議，不會自動檢查對比度或無障礙合規性。
  • 色相、飽和度和亮度會經過調整，因此基礎色不一定原樣保留。

功能特點

  • 類似色、互補色與三角色模式
  • 五個 HEX 色塊
  • 複製樣式表所需的 CSS 變數

相關工具

色彩轉換與對比度CSS 漸層產生器

常見問題

需要註冊或上傳資料嗎？
無須註冊，工具在瀏覽器本機完成處理。