Tailwind Ink 是一個免費開源的專案,它透過了神經網路自動產生各種新的色度,能讓你能從調色盤中檢視各種顏色,每個顏色還會根據不同的深淺進行排序,並在每個顏色中附上色碼。
Tailwind Ink 在使用上也非常簡單,當你指定顏色後,他就會根據當前顏色進行擴展,自動從相似色開始漸變,形成一個調色盤的效果。由於它是開源的項目,因此如果有需要,你甚至還能動手調整神經網路,來使它符合你的期待生成顏色。
網站名稱:Tailwind Ink | AI color palette generator for Tailwindcss
網站網址:https://tailwind.ink/
Tailwind Ink 簡介教學
Step 1
進入頁面後,你可以從左上角顏色選取工具進行主顏色的挑選,或是直接在下方輸入指定的色碼,讓 AI 自動生成相關的顏色:
Step 2
每當你變動主顏色之後,AI 就會即時的動態調整全部調色盤的顏色,自動根據你所改變的主顏色,慢慢從深淺進行色盤的延展:
自動產生的顏色都會在右側顯示相對應的色碼與該顏色的 Weight,讓你可以直接複製色碼應用在你的專案當中。
Step 3
在上方 PALETTE 右側有一個「Aa」的按鈕,點選後它就可以顯示/關閉範例文字,讓你可以即時看到在每個顏色背景之下,前方顯示黑與白文字時,會如何呈現:
這個功能尤其對前端設計師非常有幫助,透過顯示黑/白文字,讓我們可以立即了解該顏色作為背景的情況下,前景文字的顏色是否能夠顯示得清楚。
以上就是 Tailwind Ink 的完整介紹。如果你還想了解其他有關線上調色盤的工具,可以參考:Color Palette Generator。
Tailwind Ink 評價推薦優點
- 自動產生 100 種相關顏色
- 可自行調整 AI 產生顏色的規則
- 提供色碼能直接複製取用
新增留言