Material Design 官方配色工具——Color Tool

Material Design 團隊在近期發布了一個非常強大的配色工具 Color Tool,經過試用,該工具相當簡單易用,方便快捷。

首先,它能夠迅速採用 Material Design 的官方色板進行配色。

使用方法非常簡單,只要選中右邊的 Primary 以及 Secondary ,然後在上方選擇對應的顏色,就能夠生成左側的樣式,同時還能調整文本顏色。

並且通過切換左側預覽圖可以查看多種 Material Design 布局下整體的效果。

選擇好配色以後,你還能在左側的 Accessibility 中查看當前配色下的文本特性,包括半透明度、尺寸等。

當然,除了調用 Material Design 的官方配色外,你還能通過 Custom 自定義主色調和輔色,從而定義你自己的色彩搭配。

最後,你可以通過點擊右上方的 codepen.io 鏈接,看到最終的一些重點組件實現效果,例如Button、Switch 等等,效果非常贊。當然,你也可以通過鏈接把自己的配色方案發給其他人。

總結來看,這個工具採用了嚴謹的技術手段給色彩定義了一種不一樣的配色規範,大大提高了配色效率和準確度。

如果大家對其他配色工具有興趣,可以參考我在《有哪些不錯的網頁設計素材網站?》下面「設計創意參考」段落的回答部分,同時推薦 Ant Design 的配色工具。

推薦閱讀:

如何做界面設計規範?
【UXRen譯#126】完美像素手冊第3版(附完整pdf下載)
設計規範的意義是什麼?
哪些例子最好地說明了「UI 過度設計」?

TAG:设计规范 | MaterialDesign | 配色方案 |