🛠️ 瀏覽器工具

互動式色輪

使用我們的互動式色輪創造令人驚嘆的色彩和諧。生成互補色、三色組、類比色及其他配色方案。可匯出為 CSS、SCSS、Tailwind、PNG、PDF 或 JSON。

色彩和諧

#8040bf
#80bf40

相關工具

如何創建色彩和諧

1

選擇和諧類型

使用下拉選單從互補色、單色、類比色、三色組、四色組或分離互補色配色方案中選擇。

2

在色輪上調整顏色

在色輪上點擊並拖曳以選擇您的基本顏色。和諧顏色將根據您的選擇自動更新。

3

微調亮度

使用外部亮度環調整調色盤的亮度,同時保持和諧關係。

4

複製或匯出

點擊色塊複製單個顏色,或使用「匯出」按鈕以不同格式下載您的調色盤。

主要功能

互動式色輪

在視覺色輪上拖曳和調整顏色,並使用獨立的亮度控制環進行精確的顏色選擇。

6種色彩和諧類型

自動生成互補色、單色、類比色、三色組、四色組和分離互補色配色方案。

多種顏色格式

以 HEX、RGB、HSL 和 CMYK 格式查看和複製顏色,一鍵複製到剪貼簿。

匯出與程式碼生成

將調色盤匯出為 PNG 圖像、PDF 文件、JSON 資料、CSS 變數、SCSS 變數或 Tailwind CSS 配置。

什麼是色輪和色彩和諧?

色輪是根據色彩的關係排列的視覺化色彩表示。色彩和諧是指顏色之間令人愉悅的排列,使它們能夠很好地搭配。我們的互動工具透過運用傳統色彩理論原則,如互補色(對立)、三色組(三個等距)和類比色(鄰近)配色方案,幫助您創造數學上平衡的色彩組合。

為什麼使用我們的色輪工具?

1

專業色彩理論

基於藝術家和設計師數百年來用於創建視覺吸引力組合的傳統色彩理論原則。

2

對開發人員友好的匯出

生成 CSS 變數、SCSS 變數和 Tailwind CSS 配置文件,可直接用於您的網頁專案。

3

多種匯出格式

將您的調色盤匯出為圖像 (PNG)、文件 (PDF) 或資料 (JSON),以便在不同的設計工具和平台中使用。

4

即時視覺回饋

透過連接線視覺化和諧關係,並透過即時視覺回饋互動式調整顏色。

常見問題

提供哪些色彩和諧類型?

該工具提供6種和諧類型:互補色(2種對立色)、單色(一種顏色的變化)、類比色(3種鄰近色)、三色組(3種等距色)、四色組(4種等距色)和分離互補色(1種顏色 + 2種鄰近其互補色的顏色)。

如何調整顏色的亮度?

使用色輪周圍的外部亮度環。在此環上點擊並拖曳以調整和諧中所有顏色的亮度/暗度,同時保持它們的色相和飽和度關係。

我可以複製單個顏色嗎?

是的,點擊任何色塊即可將其值複製到剪貼簿。您可以使用格式選擇按鈕在 HEX、RGB、HSL 和 CMYK 格式之間切換。

支援哪些匯出格式?

您可以匯出為 PNG 圖像、PDF 文件、JSON 資料、CSS 變數、SCSS 變數和 Tailwind CSS 配置檔。每種格式都針對不同的使用場景進行了優化。

如何使用生成的 CSS 變數?

從匯出模態框中複製 CSS 變數並將其貼上到您的樣式表中。然後您可以像這樣使用它們:background-color: var(--color-1); 或 color: var(--color-2);

我可以單獨拖曳和諧色嗎?

是的,您可以拖曳任何和諧色點來調整整個調色盤。主色將自動重新計算,以保持所選和諧類型的數學關係。