專題文章:網頁設計、前端設計好用的配色工具
98499
次閱讀
哪一個區塊需要用到什麼顏色、文字要怎麼搭配,這都是常常令網頁設計前端設計師感到苦惱的一部分。
其實也不只可以運用在網頁,平時商業簡報、各種海報設計都需要配色。
網頁設計、前端設計好用的配色工具:Colordot 只靠鼠標就能靠直覺配色、Klart Colors 沒靈感救星! 動態牆展示配色馬上使用、Color Lisa 擁有藝術家的配色網頁質感大提升
網頁設計配色要注意
-
盡量避免使用與背景太相似的文字顏色
這樣會使文字閱讀不易,整篇糊再一起 -
主色要清楚,不要東一個顏色西一個顏色
雖然網頁視覺豐富沒有錯,但是變成七彩的也就變得很俗了 有種反效果,盡量在網頁設計前就決定好顏色的搭配
不知道怎麼搭配,底下有好用的顏色工具推薦給你
Colordot
有夠簡單的工具,只要進到網頁裡面透過滑鼠左右上下移動就可以使用, 看到喜歡的顏色就點,就可以配下一個顏色,直到你喜歡為止。
colordot都會顯示色碼,不用擔心無法套用
使用教學請見:
網頁設計配色工具 Colordot 只靠鼠標就能靠直覺配色!
今天介紹這個好用的配色工具,不僅是網頁設計前端可以使用 若是想要做商業簡報的配色也同樣可以使用喔! 那我們就開始吧!
超簡單三步驟
步驟一:用滑鼠上下左右調顏色,喜歡的就點一下, 就會固定在畫面上了!是不是超方便呢?
步驟二:這時第一個顏色已經固定了,可以再重複步驟一的方法, 用滑鼠挑出想要搭配的顏色喔!直覺的頁面,能馬上比較顏色是否搭配得當。
不管你想新增多少個配色,只要按下滑鼠固定就可以使用了~
如果後悔,下面還有叉叉可以按掉,若想修改微調用RGB數值做調整喔!-
步驟三:每一個你挑選的顏色,底下都有色碼表,
挑選就可以複製下來使用囉!
小秘訣:如果不想一個一個複製,其實網址上後面都有一串色碼, 用逗點隔開,可以複製到剪貼簿裡面,方便取用喔!!
Colordot
Klart Colors
如果你不太相信自己的美感,Klart colors有好幾種幫你配好的顏色, 就像動態牆一樣,挑選喜歡的配色, 裡面也會附上色碼,對於美感不足的人非常方便。
使用教學請見:
網頁設計配色工具 Klart Colors 沒靈感救星! 動態牆展示配色馬上使用。
今天介紹這個好用的配色工具,可以幫助你在設計網頁顏色有很大的幫助。 尤其是如果對自己美感沒有把握、沒靈感時都可以上來看看, 這邊的配色是像動態牆一樣,可以自由的選擇。
廢話不多說,那我們就開始教學囉!
超簡單兩步驟
-
步驟一:選擇喜歡的配色,點進去。
這邊都有各式各樣的配色,不用自己去苦惱配色, 對於靈感也是很有用喔~
如果還不確定想要用哪一組配色選擇困難的話 左下角的愛心點選後就可以收藏,到時再做決定要用哪一個配色。 步驟二:複製色碼後就可以使用囉!!
Klart Colors
Color Lisa
若你追求藝術感的配色,這個網站有許多有美感的配色。
都是藝術家的配色或是有名公司所採用的顏色搭配。
相信出於大師之手的配色放到自己網頁上一定質感大提升
使用教學請見
網頁設計配色工具Color Lisa 擁有藝術家的配色網頁質感大提升!
今天要介紹的配色工具很特別,是根據藝術家的作品去配色。
點進去後可以看是哪一幅作品來源。
如果是藝術家畫在畫作裡使用的配色,使用在網頁或是簡報上絕對不會錯,而且質感簡直大提升!!
快來試試吧~
超簡單三步驟
-
步驟一:一開始會看到各個藝術家名字,可以點選自己想要的風格去選擇。
若是有特定的藝術家想要搜尋,上方有英文字母排序可以選擇,這樣就可以找到自己喜歡的藝術家配色。 -
步驟二:點進去後,上方有一個眼睛的圖示,點進去後可以看到這些配色是出自於哪一幅畫。
點進去後真的跟Color Lisa給的配色一樣呢。 -
步驟三:只要點選顏色,就會自動反白色碼,很方便複製使用喔
Color Lisa
喜歡文章,就分享出去吧!
請註明出處:https://www.cadch.com/modules/news/article.php?storyid=90
延伸閱讀:網頁設計的色彩學