大家好，這里是和你聊設(shè)計(jì)的花生~

上次向大家推薦了配色神器 Palettemaker，它最大的特色可以將配色方案自動應(yīng)用到海報(bào)、插畫、圖案等設(shè)計(jì)模板上，讓用戶實(shí)時預(yù)覽配色方案的大致效果。今天再為大家推薦一個我最新發(fā)現(xiàn)的配色工具 「Color-editor」 ，它允許用戶上傳自己的文件，并利用預(yù)設(shè)的配色方案對其進(jìn)行上色。

Color-editor

網(wǎng)址直達(dá)： https://iconscout.com/color-editor

Color-editor 是國外的一個設(shè)計(jì)資源網(wǎng)站 iconscout 開發(fā)的一款色彩編輯工具，可以對 SVG 格式的文件自定義上色。這意味著我們可以將自己的 SVG 文件上傳到網(wǎng)站上，利用網(wǎng)站預(yù)設(shè)的配色方案進(jìn)行一鍵上色，非常適合 UI 圖標(biāo)、UI 插畫等矢量文件的快速配色。下面一起來看看這個神器怎么使用吧~

1. 使用介紹

進(jìn)入網(wǎng)站后，首先點(diǎn)擊上傳本地的 SVG 文件，然后會出現(xiàn)如下界面，網(wǎng)站的調(diào)色功能集中在左側(cè)工具欄，調(diào)色效果會實(shí)時展示在右側(cè)的窗口，點(diǎn)擊面板頂部的左右箭頭可以撤銷&還原炒作，點(diǎn)擊「重置」可以一鍵還原到最初的配色。

Color-editor 一共提供 3 中著色模式，分別為彩色模式，單色模式和灰度模式，適合不同的配色需要。

① 彩色模式（color tone）

進(jìn)入彩色模式后，網(wǎng)站會自動給出 200+種預(yù)設(shè)的配色方案，點(diǎn)擊其中一種就能將配色應(yīng)用到 SVG 文件中。

由于預(yù)設(shè)配色只有 4 種顏色，如果你覺得應(yīng)用效果不是很完美，可以在左側(cè)的「item colors」里對畫面的任意一種顏色進(jìn)行單獨(dú)調(diào)整，讓整體的配色更加和諧。

② 單色模式（monochrome）

當(dāng)進(jìn)入單色模式后，畫面中的顏色就只剩一種顏色，而在色彩的飽和度上有所差別。此時我們可以通過色相滑塊修改色彩，以及整體降低色彩的飽和度，使配色更加和諧。

感覺這個功能很適合對個 UI 圖標(biāo)進(jìn)行批量上色——將多個圖標(biāo)一起導(dǎo)出為一個SVG文件，然后上傳到網(wǎng)站選擇一個主題色就能實(shí)現(xiàn)快速上色，整體風(fēng)格統(tǒng)也會統(tǒng)一，還可以重新下載為SVG格式，方便后期編輯。

③ 灰度模式 （graytone）

進(jìn)入灰度模式后，畫面中的色彩飽和度會處在一個很低的范圍，即使改變色相也只能看出一些細(xì)微的變化?？梢哉{(diào)節(jié)左側(cè)的 TONE VALUE 選項(xiàng)，可以把飽和度調(diào)整為零。

除了一些簡單的的圖標(biāo)和元素，Color-editor 也可以為畫面更加復(fù)雜矢量插畫進(jìn)行上色。需要注意上傳的插畫本身需要有不同的上色的區(qū)分，否則網(wǎng)站會無法識別。上色完成后，點(diǎn)擊網(wǎng)站右下角的下載按鈕就可以將保存文件，網(wǎng)站提供下載 PNG、SVG 和 PDF 三種格式。

好啦以上就是今天的配色神器推薦，喜歡本期推薦的話記得點(diǎn)贊收藏，也可以轉(zhuǎn)發(fā)給身邊有需要朋友。有關(guān)本文或設(shè)計(jì)的問題可以在評論區(qū)提出，我會第一時間為回復(fù) ~

推薦閱讀：